material-react-table 1.9.4 → 1.11.0

package/src/_locales/fi.ts

@@ -0,0 +1,94 @@
+import type { MRT_Localization } from '../MaterialReactTable';
+
+export const MRT_Localization_FI: MRT_Localization = {
+  actions: 'Toiminnot',
+  and: 'ja',
+  cancel: 'Peruuta',
+  changeFilterMode: 'Muuta suodattimen tilaa',
+  changeSearchMode: 'Muuta hakutapaa',
+  clearFilter: 'Tyhjennä suodatin',
+  clearSearch: 'Tyhjennä haku',
+  clearSort: 'Tyhjennä lajittelu',
+  clickToCopy: 'Kopioi napsauttamalla',
+  collapse: 'Supista',
+  collapseAll: 'Supista kaikki',
+  columnActions: 'Saraketoiminnot',
+  copiedToClipboard: 'Kopioitu leikepöydälle',
+  dropToGroupBy: 'Pudota tähän ryhmitelläksesi sarakkeen {column} mukaan',
+  edit: 'Muokkaa',
+  expand: 'Laajenna',
+  expandAll: 'Laajenna kaikki',
+  filterArrIncludes: 'Sisältää',
+  filterArrIncludesAll: 'Sisältää kaikki',
+  filterArrIncludesSome: 'Sisältää',
+  filterBetween: 'Välillä',
+  filterBetweenInclusive: 'Välillä mukaan lukien',
+  filterByColumn: 'Suodata sarakkeen {column} mukaan',
+  filterContains: 'Sisältää',
+  filterEmpty: 'Tyhjä',
+  filterEndsWith: 'Loppuu',
+  filterEquals: 'On yhtä kuin',
+  filterEqualsString: 'On yhtä kuin',
+  filterFuzzy: 'Sumea',
+  filterGreaterThan: 'Enemmän kuin',
+  filterGreaterThanOrEqualTo: 'Enemmän tai yhtä paljon kuin',
+  filterInNumberRange: 'Välillä',
+  filterIncludesString: 'Sisältää',
+  filterIncludesStringSensitive: 'Sisältää',
+  filterLessThan: 'Vähemmän kuin',
+  filterLessThanOrEqualTo: 'Vähemmän tai yhtä paljon kuin',
+  filterMode: 'Suodattimen tila: {filterType}',
+  filterNotEmpty: 'Ei tyhjä',
+  filterNotEquals: 'Ei ole yhtä kuin',
+  filterStartsWith: 'Alkaa',
+  filterWeakEquals: 'On yhtä kuin',
+  filteringByColumn: 'Suodatetaan sarakkeen {column} mukaan - {filterType} {filterValue}',
+  goToFirstPage: 'Siirry ensimmäiselle sivulle',
+  goToLastPage: 'Siirry viimeiselle sivulle',
+  goToNextPage: 'Siirry seuraavalle sivulle',
+  goToPreviousPage: 'Siirry edelliselle sivulle',
+  grab: 'Nappaa',
+  groupByColumn: 'Ryhmittele sarakkeen {column} mukaan',
+  groupedBy: 'Ryhmitelty sarakkeella ',
+  hideAll: 'Piilota kaikki',
+  hideColumn: 'Piilota sarake {column}',
+  max: 'Maksimi',
+  min: 'Minimi',
+  move: 'Siirrä',
+  noRecordsToDisplay: 'Ei näytettäviä tietueita',
+  noResultsFound: 'Ei tuloksia',
+  of: '/',
+  or: 'tai',
+  pinToLeft: 'Kiinnitä vasemmalle',
+  pinToRight: 'Kiinnitä oikealle',
+  resetColumnSize: 'Nollaa sarakkeen koko',
+  resetOrder: 'Nollaa järjestys',
+  rowActions: 'Rivitoiminnot',
+  rowNumber: '#',
+  rowNumbers: 'Rivinumerot',
+  rowsPerPage: 'Rivejä per sivu',
+  save: 'Tallenna',
+  search: 'Etsi',
+  selectedCountOfRowCountRowsSelected:
+    '{selectedCount}/{rowCount} rivi(ä) valittu',
+  select: 'Valitse',
+  showAll: 'Näytä kaikki',
+  showAllColumns: 'Näytä kaikki sarakkeet',
+  showHideColumns: 'Näytä/piilota sarakkeita',
+  showHideFilters: 'Näytä/piilota suodattimet',
+  showHideSearch: 'Näytä/piilota haku',
+  sortByColumnAsc: 'Järjestä sarakkeen {column} mukaan nousevasti',
+  sortByColumnDesc: 'Järjestä sarakkeen {column} mukaan laskevasti',
+  sortedByColumnAsc: 'Järjestetty sarakkeen {column} mukaan nousevasti',
+  sortedByColumnDesc: 'Järjestetty sarakkeen {column} mukaan laskevasti',
+  thenBy: ', sitten ',
+  toggleDensity: 'Vaihda tiheyttä',
+  toggleFullScreen: 'Vaihda kokoruututila',
+  toggleSelectAll: 'Vaihda valitse kaikki',
+  toggleSelectRow: 'Vaihda valitse rivi',
+  toggleVisibility: 'Vaihda näkyvyys',
+  ungroupByColumn: 'Poista ryhmittely sarakkeen {column} mukaan',
+  unpin: 'Poista kiinnitys',
+  unpinAll: 'Poista kiinnitys kaikilta',
+  unsorted: 'Järjestämätön',
+};

package/src/_locales/id.ts

@@ -0,0 +1,95 @@
+import type { MRT_Localization } from '../MaterialReactTable';
+
+export const MRT_Localization_ID: MRT_Localization = {
+  actions: 'Aksi',
+  and: 'dan',
+  cancel: 'Batal',
+  changeFilterMode: 'Ubah mode filter',
+  changeSearchMode: 'Ubah mode pencarian',
+  clearFilter: 'Hapus filter',
+  clearSearch: 'Hapus pencarian',
+  clearSort: 'Hapus urutan',
+  clickToCopy: 'Klik untuk menyalin',
+  collapse: 'Ciutkan',
+  collapseAll: 'Ciutkan semua',
+  columnActions: 'Aksi Kolom',
+  copiedToClipboard: 'Disalin ke papan klip',
+  dropToGroupBy: 'Jatuhkan untuk mengelompokkan berdasarkan {column}',
+  edit: 'Ubah',
+  expand: 'Bentangkan',
+  expandAll: 'Bentangkan semua',
+  filterArrIncludes: 'Termasuk',
+  filterArrIncludesAll: 'Termasuk semua',
+  filterArrIncludesSome: 'Termasuk',
+  filterBetween: 'Antara',
+  filterBetweenInclusive: 'Antara Inklusif',
+  filterByColumn: 'Filter berdasarkan {column}',
+  filterContains: 'Berisi',
+  filterEmpty: 'Kosong',
+  filterEndsWith: 'Berakhir Dengan',
+  filterEquals: 'Sama dengan',
+  filterEqualsString: 'Sama dengan',
+  filterFuzzy: 'Fuzzy',
+  filterGreaterThan: 'Lebih Dari',
+  filterGreaterThanOrEqualTo: 'Lebih Dari Atau Sama Dengan',
+  filterInNumberRange: 'Antara',
+  filterIncludesString: 'Berisi',
+  filterIncludesStringSensitive: 'Berisi',
+  filterLessThan: 'Kurang Dari',
+  filterLessThanOrEqualTo: 'Kurang Dari Atau Sama Dengan',
+  filterMode: 'Mode Filter: {filterType}',
+  filterNotEmpty: 'Tidak Kosong',
+  filterNotEquals: 'Tidak Sama Dengan',
+  filterStartsWith: 'Dimulai Dengan',
+  filterWeakEquals: 'Sama Dengan',
+  filteringByColumn:
+    'Memfilter berdasarkan {column} - {filterType} {filterValue}',
+  goToFirstPage: 'Pergi ke halaman pertama',
+  goToLastPage: 'Pergi ke halaman terakhir',
+  goToNextPage: 'Pergi ke halaman berikutnya',
+  goToPreviousPage: 'Pergi ke halaman sebelumnya',
+  grab: 'Ambil',
+  groupByColumn: 'Kelompokkan berdasarkan {column}',
+  groupedBy: 'Dikelompokkan berdasarkan ',
+  hideAll: 'Sembunyikan semua',
+  hideColumn: 'Sembunyikan kolom {column}',
+  max: 'Maks',
+  min: 'Min',
+  move: 'Pindah',
+  noRecordsToDisplay: 'Tidak ada data untuk ditampilkan',
+  noResultsFound: 'Tidak ada hasil yang ditemukan',
+  of: 'dari',
+  or: 'atau',
+  pinToLeft: 'Sematkan ke kiri',
+  pinToRight: 'Sematkan ke kanan',
+  resetColumnSize: 'Reset ukuran kolom',
+  resetOrder: 'Reset urutan',
+  rowActions: 'Aksi Baris',
+  rowNumber: '#',
+  rowNumbers: 'Nomor Baris',
+  rowsPerPage: 'Baris per halaman',
+  save: 'Simpan',
+  search: 'Cari',
+  selectedCountOfRowCountRowsSelected:
+    '{selectedCount} dari {rowCount} baris dipilih',
+  select: 'Pilih',
+  showAll: 'Tampilkan semua',
+  showAllColumns: 'Tampilkan semua kolom',
+  showHideColumns: 'Tampilkan/Sembunyikan kolom',
+  showHideFilters: 'Tampilkan/Sembunyikan filter',
+  showHideSearch: 'Tampilkan/Sembunyikan pencarian',
+  sortByColumnAsc: 'Urutkan berdasarkan {column} menaik',
+  sortByColumnDesc: 'Urutkan berdasarkan {column} menurun',
+  sortedByColumnAsc: 'Diurutkan berdasarkan {column} menaik',
+  sortedByColumnDesc: 'Diurutkan berdasarkan {column} menurun',
+  thenBy: ', lalu berdasarkan ',
+  toggleDensity: 'Beralih kepadatan',
+  toggleFullScreen: 'Beralih layar penuh',
+  toggleSelectAll: 'Beralih pilih semua',
+  toggleSelectRow: 'Beralih pilih baris',
+  toggleVisibility: 'Beralih visibilitas',
+  ungroupByColumn: 'Batalkan pengelompokan berdasarkan {column}',
+  unpin: 'Lepaskan sematan',
+  unpinAll: 'Lepaskan semua sematan',
+  unsorted: 'Tidak diurutkan',
+};

package/src/body/MRT_TableBody.tsx

@@ -42,6 +42,7 @@ export const MRT_TableBody = ({
       manualSorting,
       memoMode,
       muiTableBodyProps,
+      renderEmptyRowsFallback,
       rowVirtualizerInstanceRef,
       rowVirtualizerProps,
       virtualizerInstanceRef,
@@ -163,24 +164,28 @@ export const MRT_TableBody = ({
           <tr style={{ display: layoutMode === 'grid' ? 'grid' : 'table-row' }}>
             <td
               colSpan={table.getVisibleLeafColumns().length}
-              style={{ display: layoutMode === 'grid' ? 'grid' : 'table-cell' }}
+              style={{
+                display: layoutMode === 'grid' ? 'grid' : 'table-cell',
+              }}
             >
-              <Typography
-                sx={{
-                  color: 'text.secondary',
-                  fontStyle: 'italic',
-                  maxWidth: `min(100vw, ${
-                    tablePaperRef.current?.clientWidth ?? 360
-                  }px)`,
-                  py: '2rem',
-                  textAlign: 'center',
-                  width: '100%',
-                }}
-              >
-                {globalFilter || columnFilters.length
-                  ? localization.noResultsFound
-                  : localization.noRecordsToDisplay}
-              </Typography>
+              {renderEmptyRowsFallback?.({ table }) ?? (
+                <Typography
+                  sx={{
+                    color: 'text.secondary',
+                    fontStyle: 'italic',
+                    maxWidth: `min(100vw, ${
+                      tablePaperRef.current?.clientWidth ?? 360
+                    }px)`,
+                    py: '2rem',
+                    textAlign: 'center',
+                    width: '100%',
+                  }}
+                >
+                  {globalFilter || columnFilters.length
+                    ? localization.noResultsFound
+                    : localization.noRecordsToDisplay}
+                </Typography>
+              )}
             </td>
           </tr>
         ) : (

package/src/body/MRT_TableBodyRow.tsx

@@ -47,7 +47,7 @@ export const MRT_TableBodyRow = ({
 
   const tableRowProps =
     muiTableBodyRowProps instanceof Function
-      ? muiTableBodyRowProps({ row, table })
+      ? muiTableBodyRowProps({ row, staticRowIndex: rowIndex, table })
       : muiTableBodyRowProps;
 
   const handleDragEnter = (_e: DragEvent) => {
@@ -136,6 +136,7 @@ export const MRT_TableBodyRow = ({
         <MRT_TableDetailPanel
           parentRowRef={rowRef}
           row={row}
+          rowIndex={rowIndex}
           table={table}
           virtualRow={virtualRow}
         />

package/src/body/MRT_TableDetailPanel.tsx

@@ -9,6 +9,7 @@ import type { MRT_Row, MRT_TableInstance } from '..';
 interface Props {
   parentRowRef: React.RefObject<HTMLTableRowElement>;
   row: MRT_Row;
+  rowIndex: number;
   table: MRT_TableInstance;
   virtualRow?: VirtualItem;
 }
@@ -16,6 +17,7 @@ interface Props {
 export const MRT_TableDetailPanel = ({
   parentRowRef,
   row,
+  rowIndex,
   table,
   virtualRow,
 }: Props) => {
@@ -33,7 +35,7 @@ export const MRT_TableDetailPanel = ({
 
   const tableRowProps =
     muiTableBodyRowProps instanceof Function
-      ? muiTableBodyRowProps({ isDetailPanel: true, row, table })
+      ? muiTableBodyRowProps({ isDetailPanel: true, row, staticRowIndex: rowIndex, table })
       : muiTableBodyRowProps;
 
   const tableCellProps =

package/src/column.utils.ts

@@ -164,29 +164,34 @@ export const getTrailingDisplayColumnIds = <
   TData extends Record<string, any> = {},
 >(
   props: MaterialReactTableProps<TData>,
-) => [
-  props.positionActionsColumn === 'last' &&
-    (props.enableRowActions ||
-      (props.enableEditing &&
-        ['row', 'modal'].includes(props.editingMode ?? ''))) &&
-    'mrt-row-actions',
-  props.positionExpandColumn === 'last' &&
-    showExpandColumn(props) &&
-    'mrt-row-expand',
-];
+) =>
+  [
+    props.positionActionsColumn === 'last' &&
+      (props.enableRowActions ||
+        (props.enableEditing &&
+          ['row', 'modal'].includes(props.editingMode ?? ''))) &&
+      'mrt-row-actions',
+    props.positionExpandColumn === 'last' &&
+      showExpandColumn(props) &&
+      'mrt-row-expand',
+  ].filter(Boolean) as MRT_DisplayColumnIds[];
 
 export const getDefaultColumnOrderIds = <
   TData extends Record<string, any> = {},
 >(
   props: MaterialReactTableProps<TData>,
-) =>
-  [
-    ...getLeadingDisplayColumnIds(props),
-    ...getAllLeafColumnDefs(props.columns).map((columnDef) =>
-      getColumnId(columnDef),
-    ),
-    ...getTrailingDisplayColumnIds(props),
-  ].filter(Boolean) as string[];
+) => {
+  const leadingDisplayCols: string[] = getLeadingDisplayColumnIds(props);
+  const trailingDisplayCols: string[] = getTrailingDisplayColumnIds(props);
+  const allLeafColumnDefs = getAllLeafColumnDefs(props.columns)
+    .map((columnDef) => getColumnId(columnDef))
+    .filter(
+      (columnId) =>
+        !leadingDisplayCols.includes(columnId) &&
+        !trailingDisplayCols.includes(columnId),
+    );
+  return [...leadingDisplayCols, ...allLeafColumnDefs, ...trailingDisplayCols];
+};
 
 export const getDefaultColumnFilterFn = <
   TData extends Record<string, any> = {},
@@ -250,72 +255,79 @@ export const getCommonCellStyles = ({
   table: MRT_TableInstance;
   tableCellProps: TableCellProps;
   theme: Theme;
-}) => ({
-  backgroundColor:
-    column.getIsPinned() && column.columnDef.columnDefType !== 'group'
-      ? alpha(lighten(theme.palette.background.default, 0.04), 0.97)
-      : 'inherit',
-  backgroundImage: 'inherit',
-  boxShadow: getIsLastLeftPinnedColumn(table, column)
-    ? `-4px 0 8px -6px ${alpha(theme.palette.common.black, 0.2)} inset`
-    : getIsFirstRightPinnedColumn(column)
-    ? `4px 0 8px -6px ${alpha(theme.palette.common.black, 0.2)} inset`
-    : undefined,
-  display: table.options.layoutMode === 'grid' ? 'flex' : 'table-cell',
-  flex:
-    table.options.layoutMode === 'grid'
-      ? `var(--${header ? 'header' : 'col'}-${parseCSSVarId(
-          header?.id ?? column.id,
-        )}-size) 0 auto`
-      : undefined,
-  left:
-    column.getIsPinned() === 'left'
-      ? `${column.getStart('left')}px`
-      : undefined,
-  ml:
-    table.options.enableColumnVirtualization &&
-    column.getIsPinned() === 'left' &&
-    column.getPinnedIndex() === 0
-      ? `-${
-          column.getSize() * (table.getState().columnPinning.left?.length ?? 1)
-        }px`
-      : undefined,
-  mr:
-    table.options.enableColumnVirtualization &&
-    column.getIsPinned() === 'right' &&
-    column.getPinnedIndex() === table.getVisibleLeafColumns().length - 1
-      ? `-${
-          column.getSize() *
-          (table.getState().columnPinning.right?.length ?? 1) *
-          1.2
-        }px`
-      : undefined,
-  opacity:
-    table.getState().draggingColumn?.id === column.id ||
-    table.getState().hoveredColumn?.id === column.id
-      ? 0.5
-      : 1,
-  position:
-    column.getIsPinned() && column.columnDef.columnDefType !== 'group'
-      ? 'sticky'
-      : undefined,
-  right:
-    column.getIsPinned() === 'right'
-      ? `${getTotalRight(table, column)}px`
+}) => {
+  const widthStyles = {
+    minWidth: `max(calc(var(--${header ? 'header' : 'col'}-${parseCSSVarId(
+      header?.id ?? column.id,
+    )}-size) * 1px), ${column.columnDef.minSize ?? 30}px)`,
+    width: `calc(var(--${header ? 'header' : 'col'}-${parseCSSVarId(
+      header?.id ?? column.id,
+    )}-size) * 1px)`,
+  };
+  return {
+    backgroundColor:
+      column.getIsPinned() && column.columnDef.columnDefType !== 'group'
+        ? alpha(lighten(theme.palette.background.default, 0.04), 0.97)
+        : 'inherit',
+    backgroundImage: 'inherit',
+    boxShadow: getIsLastLeftPinnedColumn(table, column)
+      ? `-4px 0 8px -6px ${alpha(theme.palette.common.black, 0.2)} inset`
+      : getIsFirstRightPinnedColumn(column)
+      ? `4px 0 8px -6px ${alpha(theme.palette.common.black, 0.2)} inset`
       : undefined,
-  transition: table.options.enableColumnVirtualization
-    ? 'none'
-    : `padding 150ms ease-in-out`,
-  ...(tableCellProps?.sx instanceof Function
-    ? tableCellProps.sx(theme)
-    : (tableCellProps?.sx as any)),
-  minWidth: `max(calc(var(--${header ? 'header' : 'col'}-${parseCSSVarId(
-    header?.id ?? column.id,
-  )}-size) * 1px), ${column.columnDef.minSize ?? 30}px)`,
-  width: `calc(var(--${header ? 'header' : 'col'}-${parseCSSVarId(
-    header?.id ?? column.id,
-  )}-size) * 1px)`,
-});
+    display: table.options.layoutMode === 'grid' ? 'flex' : 'table-cell',
+    flex:
+      table.options.layoutMode === 'grid'
+        ? `var(--${header ? 'header' : 'col'}-${parseCSSVarId(
+            header?.id ?? column.id,
+          )}-size) 0 auto`
+        : undefined,
+    left:
+      column.getIsPinned() === 'left'
+        ? `${column.getStart('left')}px`
+        : undefined,
+    ml:
+      table.options.enableColumnVirtualization &&
+      column.getIsPinned() === 'left' &&
+      column.getPinnedIndex() === 0
+        ? `-${
+            column.getSize() *
+            (table.getState().columnPinning.left?.length ?? 1)
+          }px`
+        : undefined,
+    mr:
+      table.options.enableColumnVirtualization &&
+      column.getIsPinned() === 'right' &&
+      column.getPinnedIndex() === table.getVisibleLeafColumns().length - 1
+        ? `-${
+            column.getSize() *
+            (table.getState().columnPinning.right?.length ?? 1) *
+            1.2
+          }px`
+        : undefined,
+    opacity:
+      table.getState().draggingColumn?.id === column.id ||
+      table.getState().hoveredColumn?.id === column.id
+        ? 0.5
+        : 1,
+    position:
+      column.getIsPinned() && column.columnDef.columnDefType !== 'group'
+        ? 'sticky'
+        : undefined,
+    right:
+      column.getIsPinned() === 'right'
+        ? `${getTotalRight(table, column)}px`
+        : undefined,
+    transition: table.options.enableColumnVirtualization
+      ? 'none'
+      : `padding 150ms ease-in-out`,
+    ...(!table.options.enableColumnResizing && widthStyles), //let devs pass in width styles if column resizing is disabled
+    ...(tableCellProps?.sx instanceof Function
+      ? tableCellProps.sx(theme)
+      : (tableCellProps?.sx as any)),
+    ...(table.options.enableColumnResizing && widthStyles), //don't let devs pass in width styles if column resizing is enabled
+  };
+};
 
 export const MRT_DefaultColumn = {
   filterVariant: 'text',

package/src/head/MRT_TableHeadCell.tsx

@@ -177,7 +177,7 @@ export const MRT_TableHeadCell = ({ header, table }: Props) => {
         <Box
           className="Mui-TableHeadCell-Content"
           sx={{
-            alignItems: 'flex-start',
+            alignItems: 'center',
             display: 'flex',
             flexDirection:
               tableCellProps?.align === 'right' ? 'row-reverse' : 'row',
@@ -213,7 +213,7 @@ export const MRT_TableHeadCell = ({ header, table }: Props) => {
             <Box
               className="Mui-TableHeadCell-Content-Wrapper"
               sx={{
-                minWidth: '5ch',
+                minWidth: `${Math.min(columnDef.header.length, 5)}ch`,
                 overflow: columnDefType === 'data' ? 'hidden' : undefined,
                 textOverflow: 'ellipsis',
                 whiteSpace:

package/src/head/MRT_TableHeadCellResizeHandle.tsx

@@ -33,7 +33,7 @@ export const MRT_TableHeadCellResizeHandle = ({ header, table }: Props) => {
         cursor: 'col-resize',
         mr: density === 'compact' ? '-0.75rem' : '-1rem',
         position: 'absolute',
-        right: '1px',
+        right: '4px',
         px: '4px',
         '&:active > hr': {
           backgroundColor: theme.palette.info.main,

package/src/menus/MRT_ColumnActionMenu.tsx

@@ -5,7 +5,6 @@ import ListItemIcon from '@mui/material/ListItemIcon';
 import Menu from '@mui/material/Menu';
 import MenuItem from '@mui/material/MenuItem';
 import { MRT_FilterOptionMenu } from './MRT_FilterOptionMenu';
-import { MRT_ShowHideColumnsMenu } from './MRT_ShowHideColumnsMenu';
 import type { MRT_Header, MRT_TableInstance } from '..';
 
 export const commonMenuItemStyles = {
@@ -67,12 +66,11 @@ export const MRT_ColumnActionMenu = ({
   } = table;
   const { column } = header;
   const { columnDef } = column;
-  const { columnSizing, columnVisibility, density } = getState();
+  const { columnSizing, columnVisibility, density, showColumnFilters } =
+    getState();
 
   const [filterMenuAnchorEl, setFilterMenuAnchorEl] =
     useState<null | HTMLElement>(null);
-  const [showHideColumnsMenuAnchorEl, setShowHideColumnsMenuAnchorEl] =
-    useState<null | HTMLElement>(null);
 
   const handleClearSort = () => {
     column.clearSorting();
@@ -132,13 +130,6 @@ export const MRT_ColumnActionMenu = ({
     setFilterMenuAnchorEl(event.currentTarget);
   };
 
-  const handleOpenShowHideColumnsMenu = (
-    event: React.MouseEvent<HTMLElement>,
-  ) => {
-    event.stopPropagation();
-    setShowHideColumnsMenuAnchorEl(event.currentTarget);
-  };
-
   const isSelectFilter = !!columnDef.filterSelectOptions;
 
   const allowedColumnFilterOptions =
@@ -238,6 +229,7 @@ export const MRT_ColumnActionMenu = ({
             </Box>
           </MenuItem>,
           <MenuItem
+            disabled={showColumnFilters && !enableColumnFilterModes}
             divider={enableGrouping || enableHiding}
             key={1}
             onClick={handleFilterByColumn}
@@ -386,22 +378,7 @@ export const MRT_ColumnActionMenu = ({
               String(columnDef.header),
             )}
           </Box>
-          <IconButton
-            onClick={handleOpenShowHideColumnsMenu}
-            onMouseEnter={handleOpenShowHideColumnsMenu}
-            size="small"
-            sx={{ p: 0 }}
-          >
-            <ArrowRightIcon />
-          </IconButton>
         </MenuItem>,
-        <MRT_ShowHideColumnsMenu
-          anchorEl={showHideColumnsMenuAnchorEl}
-          isSubMenu
-          key={2}
-          setAnchorEl={setShowHideColumnsMenuAnchorEl}
-          table={table}
-        />,
       ]}
     </Menu>
   );

package/src/menus/MRT_ShowHideColumnsMenu.tsx

@@ -18,7 +18,6 @@ export const MRT_ShowHideColumnsMenu = <
   TData extends Record<string, any> = {},
 >({
   anchorEl,
-  isSubMenu,
   setAnchorEl,
   table,
 }: Props<TData>) => {
@@ -88,12 +87,12 @@ export const MRT_ShowHideColumnsMenu = <
       <Box
         sx={{
           display: 'flex',
-          justifyContent: isSubMenu ? 'center' : 'space-between',
+          justifyContent: 'space-between',
           p: '0.5rem',
           pt: 0,
         }}
       >
-        {!isSubMenu && enableHiding && (
+        {enableHiding && (
           <Button
             disabled={!getIsSomeColumnsVisible()}
             onClick={hideAllColumns}
@@ -101,7 +100,7 @@ export const MRT_ShowHideColumnsMenu = <
             {localization.hideAll}
           </Button>
         )}
-        {!isSubMenu && enableColumnOrdering && (
+        {enableColumnOrdering && (
           <Button
             onClick={() =>
               table.setColumnOrder(
@@ -112,7 +111,7 @@ export const MRT_ShowHideColumnsMenu = <
             {localization.resetOrder}
           </Button>
         )}
-        {!isSubMenu && enablePinning && (
+        {enablePinning && (
           <Button
             disabled={!getIsSomeColumnsPinned()}
             onClick={() => table.resetColumnPinning(true)}
@@ -135,7 +134,6 @@ export const MRT_ShowHideColumnsMenu = <
           allColumns={allColumns}
           column={column}
           hoveredColumn={hoveredColumn}
-          isSubMenu={isSubMenu}
           key={`${index}-${column.id}`}
           setHoveredColumn={setHoveredColumn}
           table={table}