material-react-table 1.3.16 → 1.4.0-beta.1

package/src/_locales/ro.ts

@@ -1,92 +1,94 @@
 import { MRT_Localization } from '../MaterialReactTable';
 
 export const MRT_Localization_RO: MRT_Localization = {
-  actions: "Acțiuni",
-  and: "și",
-  cancel: "Anulează",
-  changeFilterMode: "Schimbă mod filtru",
-  changeSearchMode: "Schimbă mod căutare",
-  clearFilter: "Curăță filtrarea",
-  clearSearch: "Curăță căutarea",
-  clearSort: "Curăță sortarea",
-  clickToCopy: "Apasă pentru a copia",
-  columnActions: "Acțiuni Coloană",
-  copiedToClipboard: "Copiat pe ecran",
-  dropToGroupBy: "Aruncă pentru a grupa după {column}",
-  edit: "Modifică",
-  expand: "Extinde",
-  expandAll: "Extinde tot",
-  filterArrIncludes: "Include",
-  filterArrIncludesAll: "Include tot",
-  filterArrIncludesSome: "Include",
-  filterBetween: "Între",
-  filterBetweenInclusive: "Între Inclusiv",
-  filterByColumn: "Filtrare după {column}",
-  filterContains: "Conține",
-  filterEmpty: "Gol",
-  filterEndsWith: "Se termină cu",
-  filterEquals: "Egal",
-  filterEqualsString: "Egale",
-  filterFuzzy: "Neclar",
-  filterGreaterThan: "Mai mare ca",
-  filterGreaterThanOrEqualTo: "Mai mare sau egal cu",
-  filterInNumberRange: "Între",
-  filterIncludesString: "Conține",
-  filterIncludesStringSensitive: "Conține",
-  filterLessThan: "Mai puțin decât",
-  filterLessThanOrEqualTo: "Mai Puțin Sau Egal Cu",
-  filterMode: "Mod filtrare: {filterType}",
-  filterNotEmpty: "Nu este gol",
-  filterNotEquals: "Nu sunt egale",
-  filterStartsWith: "Începe cu",
-  filterWeakEquals: "Egal",
-  filteringByColumn: "Filtrare după {column} - {filterType} {filterValue}",
-  goToFirstPage: "Prima pagină",
-  goToLastPage: "Ultima pagină",
-  goToNextPage: "Următoarea pagină",
-  goToPreviousPage: "Pagina anterioară",
-  grab: "Apucă",
-  groupByColumn: "Grupat după {column}",
-  groupedBy: "Grupat după ",
-  hideAll: "Ascunde tot",
-  hideColumn: "Ascunde coloana {column}",
-  max: "Max",
-  min: "Min",
-  move: "Mută",
-  noRecordsToDisplay: "Nu sunt înregistrări de afișat",
-  noResultsFound: "Niciun rezultat găsit",
-  of: "din",
-  or: "sau",
-  pinToLeft: "Fixează la stanga",
-  pinToRight: "Fixează la dreapta",
-  resetColumnSize: "Resetează dimensiune coloană",
-  resetOrder: "Resetează ordine",
-  rowActions: "Acțiunile liniei",
-  rowNumber: "#",
-  rowNumbers: "Numere linie",
-  rowsPerPage: "Linii per pagină",
-  save: "Salvează",
-  search: "Căutare",
+  actions: 'Acțiuni',
+  and: 'și',
+  cancel: 'Anulează',
+  changeFilterMode: 'Schimbă mod filtru',
+  changeSearchMode: 'Schimbă mod căutare',
+  clearFilter: 'Curăță filtrarea',
+  clearSearch: 'Curăță căutarea',
+  clearSort: 'Curăță sortarea',
+  clickToCopy: 'Apasă pentru a copia',
+  collapse: 'Restrânge',
+  collapseAll: 'Restrânge tot',
+  columnActions: 'Acțiuni Coloană',
+  copiedToClipboard: 'Copiat pe ecran',
+  dropToGroupBy: 'Aruncă pentru a grupa după {column}',
+  edit: 'Modifică',
+  expand: 'Extinde',
+  expandAll: 'Extinde tot',
+  filterArrIncludes: 'Include',
+  filterArrIncludesAll: 'Include tot',
+  filterArrIncludesSome: 'Include',
+  filterBetween: 'Între',
+  filterBetweenInclusive: 'Între Inclusiv',
+  filterByColumn: 'Filtrare după {column}',
+  filterContains: 'Conține',
+  filterEmpty: 'Gol',
+  filterEndsWith: 'Se termină cu',
+  filterEquals: 'Egal',
+  filterEqualsString: 'Egale',
+  filterFuzzy: 'Neclar',
+  filterGreaterThan: 'Mai mare ca',
+  filterGreaterThanOrEqualTo: 'Mai mare sau egal cu',
+  filterInNumberRange: 'Între',
+  filterIncludesString: 'Conține',
+  filterIncludesStringSensitive: 'Conține',
+  filterLessThan: 'Mai puțin decât',
+  filterLessThanOrEqualTo: 'Mai Puțin Sau Egal Cu',
+  filterMode: 'Mod filtrare: {filterType}',
+  filterNotEmpty: 'Nu este gol',
+  filterNotEquals: 'Nu sunt egale',
+  filterStartsWith: 'Începe cu',
+  filterWeakEquals: 'Egal',
+  filteringByColumn: 'Filtrare după {column} - {filterType} {filterValue}',
+  goToFirstPage: 'Prima pagină',
+  goToLastPage: 'Ultima pagină',
+  goToNextPage: 'Următoarea pagină',
+  goToPreviousPage: 'Pagina anterioară',
+  grab: 'Apucă',
+  groupByColumn: 'Grupat după {column}',
+  groupedBy: 'Grupat după ',
+  hideAll: 'Ascunde tot',
+  hideColumn: 'Ascunde coloana {column}',
+  max: 'Max',
+  min: 'Min',
+  move: 'Mută',
+  noRecordsToDisplay: 'Nu sunt înregistrări de afișat',
+  noResultsFound: 'Niciun rezultat găsit',
+  of: 'din',
+  or: 'sau',
+  pinToLeft: 'Fixează la stanga',
+  pinToRight: 'Fixează la dreapta',
+  resetColumnSize: 'Resetează dimensiune coloană',
+  resetOrder: 'Resetează ordine',
+  rowActions: 'Acțiunile liniei',
+  rowNumber: '#',
+  rowNumbers: 'Numere linie',
+  rowsPerPage: 'Linii per pagină',
+  save: 'Salvează',
+  search: 'Căutare',
   selectedCountOfRowCountRowsSelected:
-      "{selectedCount} din {rowCount} linii selectate",
-  select: "Selectare",
-  showAll: "Afișează tot",
-  showAllColumns: "Afișează toate coloanele",
-  showHideColumns: "Afișează/Ascunde coloanele",
-  showHideFilters: "Afișează/Ascunde filtrele",
-  showHideSearch: "Afișează/Ascunde căutarea",
-  sortByColumnAsc: "Sortează după {column} ascendent",
-  sortByColumnDesc: "Sortează după {column} descendent",
-  sortedByColumnAsc: "Sortează după {column} ascendent",
-  sortedByColumnDesc: "Sortează după {column} descendent",
-  thenBy: ", apoi după ",
-  toggleDensity: "Schimbă densitatea",
-  toggleFullScreen: "Schimbă pe ecran complet",
-  toggleSelectAll: "Comutare selectare totală",
-  toggleSelectRow: "Comutare selectare linie",
-  toggleVisibility: "Comutare visibilitate",
-  ungroupByColumn: "Degrupează după {column}",
-  unpin: "Deblocare",
-  unpinAll: "Deblocare",
-  unsorted: "Nesortat",
+    '{selectedCount} din {rowCount} linii selectate',
+  select: 'Selectare',
+  showAll: 'Afișează tot',
+  showAllColumns: 'Afișează toate coloanele',
+  showHideColumns: 'Afișează/Ascunde coloanele',
+  showHideFilters: 'Afișează/Ascunde filtrele',
+  showHideSearch: 'Afișează/Ascunde căutarea',
+  sortByColumnAsc: 'Sortează după {column} ascendent',
+  sortByColumnDesc: 'Sortează după {column} descendent',
+  sortedByColumnAsc: 'Sortează după {column} ascendent',
+  sortedByColumnDesc: 'Sortează după {column} descendent',
+  thenBy: ', apoi după ',
+  toggleDensity: 'Schimbă densitatea',
+  toggleFullScreen: 'Schimbă pe ecran complet',
+  toggleSelectAll: 'Comutare selectare totală',
+  toggleSelectRow: 'Comutare selectare linie',
+  toggleVisibility: 'Comutare visibilitate',
+  ungroupByColumn: 'Degrupează după {column}',
+  unpin: 'Deblocare',
+  unpinAll: 'Deblocare',
+  unsorted: 'Nesortat',
 };

package/src/_locales/ru.ts

@@ -12,6 +12,8 @@ export const MRT_Localization_RU: MRT_Localization = {
   clickToCopy: 'Нажмите, чтобы скопировать',
   columnActions: 'Действие колонки',
   copiedToClipboard: 'Скопировано в буфер обмена',
+  collapse: 'Свернуть',
+  collapseAll: 'Свернуть все',
   dropToGroupBy: 'Добавить в группу к {column}',
   edit: 'Редактировать',
   expand: 'Раскрыть',

package/src/_locales/tr.ts

@@ -12,6 +12,8 @@ export const MRT_Localization_TR: MRT_Localization = {
   clickToCopy: 'Kopyala',
   columnActions: 'Sütun İşlemleri',
   copiedToClipboard: 'Panoya Kopyalandı',
+  collapse: 'Daralt',
+  collapseAll: 'Tümünü Daralt',
   dropToGroupBy: '{column} İle Gruplandırmak İçin Bırakın',
   edit: 'Düzenle',
   expand: 'Genişlet',

package/src/_locales/vi.ts

@@ -12,6 +12,8 @@ export const MRT_Localization_VI: MRT_Localization = {
   clickToCopy: 'Nhấn vào để sao chép',
   columnActions: 'Lựa chọn',
   copiedToClipboard: 'Sao chép vào bảng tạm',
+  collapse: 'Thu gọn',
+  collapseAll: 'Thu gọn tất cả',
   dropToGroupBy: 'Gộp dữ liệu theo {column}',
   edit: 'Chỉnh sửa',
   expand: 'Mở rộng',

package/src/body/MRT_TableBody.tsx

@@ -20,6 +20,7 @@ export const MRT_TableBody: FC<Props> = ({ table }) => {
       enableGlobalFilterRankedResults,
       enablePagination,
       enableRowVirtualization,
+      layoutMode,
       localization,
       manualFiltering,
       manualSorting,
@@ -118,15 +119,28 @@ export const MRT_TableBody: FC<Props> = ({ table }) => {
   // }
 
   return (
-    <TableBody {...tableBodyProps}>
+    <TableBody
+      {...tableBodyProps}
+      sx={(theme) => ({
+        display: layoutMode === 'grid' ? 'grid' : 'table-row-group',
+        ...(tableBodyProps?.sx instanceof Function
+          ? tableBodyProps?.sx(theme)
+          : (tableBodyProps?.sx as any)),
+      })}
+    >
       {tableBodyProps?.children ?? !rows.length ? (
-        <tr>
-          <td colSpan={table.getVisibleLeafColumns().length}>
+        <tr style={{ display: layoutMode === 'grid' ? 'grid' : 'table-row' }}>
+          <td
+            colSpan={table.getVisibleLeafColumns().length}
+            style={{ display: layoutMode === 'grid' ? 'grid' : 'table-cell' }}
+          >
             <Typography
               sx={{
                 color: 'text.secondary',
                 fontStyle: 'italic',
-                maxWidth: `min(100vw, ${tablePaperRef.current?.clientWidth}px)`,
+                maxWidth: `min(100vw, ${
+                  tablePaperRef.current?.clientWidth ?? 360
+                }px)`,
                 py: '2rem',
                 textAlign: 'center',
                 width: '100%',

package/src/body/MRT_TableBodyCell.tsx

@@ -45,6 +45,7 @@ export const MRT_TableBodyCell: FC<Props> = ({
       enableEditing,
       enableGrouping,
       enableRowNumbers,
+      layoutMode,
       muiTableBodyCellProps,
       muiTableBodyCellSkeletonProps,
       rowNumberMode,
@@ -172,6 +173,7 @@ export const MRT_TableBodyCell: FC<Props> = ({
       onDragEnter={handleDragEnter}
       onDoubleClick={handleDoubleClick}
       sx={(theme) => ({
+        alignItems: layoutMode === 'grid' ? 'center' : undefined,
         cursor: isEditable && editingMode === 'cell' ? 'pointer' : 'inherit',
         overflow: 'hidden',
         p:

package/src/body/MRT_TableBodyRow.tsx

@@ -26,6 +26,7 @@ export const MRT_TableBodyRow: FC<Props> = ({
     getState,
     options: {
       enableRowOrdering,
+      layoutMode,
       memoMode,
       muiTableBodyRowProps,
       renderDetailPanel,
@@ -67,10 +68,10 @@ export const MRT_TableBodyRow: FC<Props> = ({
   return (
     <>
       <TableRow
-        onDragEnter={handleDragEnter}
         hover
+        onDragEnter={handleDragEnter}
         selected={row.getIsSelected()}
-        ref={(node) => {
+        ref={(node: HTMLTableRowElement) => {
           rowRef.current = node;
           if (virtualRow?.measureRef) {
             virtualRow.measureRef = node;
@@ -79,6 +80,7 @@ export const MRT_TableBodyRow: FC<Props> = ({
         {...tableRowProps}
         sx={(theme) => ({
           backgroundColor: lighten(theme.palette.background.default, 0.06),
+          display: layoutMode === 'grid' ? 'flex' : 'table-row',
           opacity:
             draggingRow?.id === row.id || hoveredRow?.id === row.id ? 0.5 : 1,
           transition: 'all 150ms ease-in-out',

package/src/body/MRT_TableDetailPanel.tsx

@@ -14,6 +14,7 @@ export const MRT_TableDetailPanel: FC<Props> = ({ row, table }) => {
     getVisibleLeafColumns,
     getState,
     options: {
+      layoutMode,
       muiTableBodyRowProps,
       muiTableDetailPanelProps,
       renderDetailPanel,
@@ -32,7 +33,12 @@ export const MRT_TableDetailPanel: FC<Props> = ({ row, table }) => {
       : muiTableDetailPanelProps;
 
   return (
-    <TableRow {...tableRowProps}>
+    <TableRow
+      sx={{
+        display: layoutMode === 'grid' ? 'flex' : 'table-row',
+      }}
+      {...tableRowProps}
+    >
       <TableCell
         colSpan={getVisibleLeafColumns().length}
         {...tableCellProps}

package/src/buttons/MRT_EditActionButtons.tsx

@@ -22,13 +22,17 @@ export const MRT_EditActionButtons = <TData extends Record<string, any> = {}>({
       icons: { CancelIcon, SaveIcon },
       localization,
       onEditingRowSave,
+      onEditingRowCancel,
     },
     refs: { editInputRefs },
     setEditingRow,
   } = table;
   const { editingRow } = getState();
 
-  const handleCancel = () => setEditingRow(null);
+  const handleCancel = () => {
+    onEditingRowCancel?.({ row, table });
+    setEditingRow(null);
+  };
 
   const handleSave = () => {
     //look for auto-filled input values

package/src/buttons/MRT_ExpandAllButton.tsx

@@ -28,12 +28,18 @@ export const MRT_ExpandAllButton: FC<Props> = ({ table }) => {
       ? muiExpandAllButtonProps({ table })
       : muiExpandAllButtonProps;
 
+  const isAllRowsExpanded = getIsAllRowsExpanded();
+
   return (
     <Tooltip
       arrow
       enterDelay={1000}
       enterNextDelay={1000}
-      title={iconButtonProps?.title ?? localization.expandAll}
+      title={
+        iconButtonProps?.title ?? isAllRowsExpanded
+          ? localization.collapseAll
+          : localization.expandAll
+      }
     >
       <span>
         <IconButton
@@ -41,7 +47,7 @@ export const MRT_ExpandAllButton: FC<Props> = ({ table }) => {
           disabled={
             isLoading || (!renderDetailPanel && !getCanSomeRowsExpand())
           }
-          onClick={() => toggleAllRowsExpanded(!getIsAllRowsExpanded())}
+          onClick={() => toggleAllRowsExpanded(!isAllRowsExpanded)}
           {...iconButtonProps}
           sx={(theme) => ({
             height: density === 'compact' ? '1.75rem' : '2.25rem',
@@ -56,11 +62,7 @@ export const MRT_ExpandAllButton: FC<Props> = ({ table }) => {
           <KeyboardDoubleArrowDownIcon
             style={{
               transform: `rotate(${
-                getIsAllRowsExpanded()
-                  ? -180
-                  : getIsSomeRowsExpanded()
-                  ? -90
-                  : 0
+                isAllRowsExpanded ? -180 : getIsSomeRowsExpanded() ? -90 : 0
               }deg)`,
               transition: 'transform 150ms',
             }}

package/src/buttons/MRT_ExpandButton.tsx

@@ -25,6 +25,9 @@ export const MRT_ExpandButton: FC<Props> = ({ row, table }) => {
       ? muiExpandButtonProps({ table, row })
       : muiExpandButtonProps;
 
+  const canExpand = row.getCanExpand();
+  const isExpanded = row.getIsExpanded();
+
   const handleToggleExpand = (event: MouseEvent<HTMLButtonElement>) => {
     event.stopPropagation();
     row.toggleExpanded();
@@ -34,14 +37,19 @@ export const MRT_ExpandButton: FC<Props> = ({ row, table }) => {
   return (
     <Tooltip
       arrow
+      disableHoverListener={!canExpand && !renderDetailPanel}
       enterDelay={1000}
       enterNextDelay={1000}
-      title={iconButtonProps?.title ?? localization.expand}
+      title={
+        iconButtonProps?.title ?? isExpanded
+          ? localization.collapse
+          : localization.expand
+      }
     >
       <span>
         <IconButton
           aria-label={localization.expand}
-          disabled={!row.getCanExpand() && !renderDetailPanel}
+          disabled={!canExpand && !renderDetailPanel}
           {...iconButtonProps}
           onClick={handleToggleExpand}
           sx={(theme) => ({
@@ -56,11 +64,7 @@ export const MRT_ExpandButton: FC<Props> = ({ row, table }) => {
           <ExpandMoreIcon
             style={{
               transform: `rotate(${
-                !row.getCanExpand() && !renderDetailPanel
-                  ? -90
-                  : row.getIsExpanded()
-                  ? -180
-                  : 0
+                !canExpand && !renderDetailPanel ? -90 : isExpanded ? -180 : 0
               }deg)`,
               transition: 'transform 150ms',
             }}

package/src/column.utils.ts

@@ -248,6 +248,7 @@ export const getCommonCellStyles = ({
     : getIsFirstRightPinnedColumn(column)
     ? `4px 0 8px -6px ${alpha(theme.palette.common.black, 0.2)} inset`
     : undefined,
+  display: table.options.layoutMode === 'grid' ? 'flex' : 'table-cell',
   left:
     column.getIsPinned() === 'left'
       ? `${column.getStart('left')}px`
@@ -269,7 +270,10 @@ export const getCommonCellStyles = ({
   ...(tableCellProps?.sx instanceof Function
     ? tableCellProps.sx(theme)
     : (tableCellProps?.sx as any)),
-  maxWidth: `min(${column.getSize()}px, fit-content)`,
+  flex:
+    table.options.layoutMode === 'grid'
+      ? `${column.getSize()} 0 auto`
+      : undefined,
   minWidth: `max(${column.getSize()}px, ${column.columnDef.minSize ?? 30}px)`,
   width: header?.getSize() ?? column.getSize(),
 });

package/src/footer/MRT_TableFooter.tsx

@@ -12,7 +12,7 @@ export const MRT_TableFooter: FC<Props> = ({ table }) => {
   const {
     getFooterGroups,
     getState,
-    options: { enableStickyFooter, muiTableFooterProps },
+    options: { enableStickyFooter, layoutMode, muiTableFooterProps },
   } = table;
   const { isFullScreen } = getState();
 
@@ -30,6 +30,7 @@ export const MRT_TableFooter: FC<Props> = ({ table }) => {
       sx={(theme) => ({
         backgroundColor: lighten(theme.palette.background.default, 0.06),
         bottom: stickFooter ? 0 : undefined,
+        display: layoutMode === 'grid' ? 'grid' : 'table-row-group',
         opacity: stickFooter ? 0.97 : undefined,
         outline: stickFooter
           ? theme.palette.mode === 'light'

package/src/footer/MRT_TableFooterCell.tsx

@@ -11,7 +11,7 @@ interface Props {
 export const MRT_TableFooterCell: FC<Props> = ({ footer, table }) => {
   const {
     getState,
-    options: { muiTableFooterCellProps },
+    options: { layoutMode, muiTableFooterCellProps },
   } = table;
   const { density } = getState();
   const { column } = footer;
@@ -40,7 +40,9 @@ export const MRT_TableFooterCell: FC<Props> = ({ footer, table }) => {
       variant="head"
       {...tableCellProps}
       sx={(theme) => ({
+        display: layoutMode === 'grid' ? 'grid' : 'table-cell',
         fontWeight: 'bold',
+        justifyContent: columnDefType === 'group' ? 'center' : undefined,
         p:
           density === 'compact'
             ? '0.5rem'

package/src/footer/MRT_TableFooterRow.tsx

@@ -10,7 +10,7 @@ interface Props {
 
 export const MRT_TableFooterRow: FC<Props> = ({ footerGroup, table }) => {
   const {
-    options: { muiTableFooterRowProps },
+    options: { layoutMode, muiTableFooterRowProps },
   } = table;
 
   // if no content in row, skip row
@@ -30,7 +30,15 @@ export const MRT_TableFooterRow: FC<Props> = ({ footerGroup, table }) => {
       : muiTableFooterRowProps;
 
   return (
-    <TableRow {...tableRowProps}>
+    <TableRow
+      {...tableRowProps}
+      sx={(theme) => ({
+        display: layoutMode === 'grid' ? 'flex' : 'table-row',
+        ...(tableRowProps?.sx instanceof Function
+          ? tableRowProps?.sx(theme)
+          : (tableRowProps?.sx as any)),
+      })}
+    >
       {footerGroup.headers.map((footer: MRT_Header) => (
         <MRT_TableFooterCell footer={footer} key={footer.id} table={table} />
       ))}

package/src/head/MRT_TableHead.tsx

@@ -11,7 +11,12 @@ export const MRT_TableHead: FC<Props> = ({ table }) => {
   const {
     getHeaderGroups,
     getState,
-    options: { enableStickyHeader, muiTableHeadProps, enableRowVirtualization },
+    options: {
+      enableRowVirtualization,
+      enableStickyHeader,
+      layoutMode,
+      muiTableHeadProps,
+    },
   } = table;
   const { isFullScreen } = getState();
 
@@ -27,8 +32,10 @@ export const MRT_TableHead: FC<Props> = ({ table }) => {
     <TableHead
       {...tableHeadProps}
       sx={(theme) => ({
+        display: layoutMode === 'grid' ? 'grid' : 'table-row-group',
         opacity: 0.97,
-        position: stickyHeader ? 'sticky' : undefined,
+        position: stickyHeader ? 'sticky' : 'relative',
+        top: stickyHeader && layoutMode === 'grid' ? 0 : undefined,
         zIndex: stickyHeader ? 2 : undefined,
         ...(tableHeadProps?.sx instanceof Function
           ? tableHeadProps?.sx(theme)

package/src/head/MRT_TableHeadCell.tsx

@@ -27,6 +27,7 @@ export const MRT_TableHeadCell: FC<Props> = ({ header, table }) => {
       enableColumnOrdering,
       enableGrouping,
       enableMultiSort,
+      layoutMode,
       muiTableHeadCellProps,
     },
     refs: { tableHeadCellRefs },
@@ -129,6 +130,7 @@ export const MRT_TableHeadCell: FC<Props> = ({ header, table }) => {
       }}
       {...tableCellProps}
       sx={(theme: Theme) => ({
+        flexDirection: layoutMode === 'grid' ? 'column' : undefined,
         fontWeight: 'bold',
         overflow: 'visible',
         p:

package/src/head/MRT_TableHeadCellFilterLabel.tsx

@@ -16,6 +16,8 @@ export const MRT_TableHeadCellFilterLabel: FC<Props> = ({ header, table }) => {
       icons: { FilterAltIcon },
       localization,
     },
+    refs: { filterInputRefs },
+    setShowFilters,
   } = table;
   const { column } = header;
   const { columnDef } = column;
@@ -64,6 +66,11 @@ export const MRT_TableHeadCellFilterLabel: FC<Props> = ({ header, table }) => {
           <IconButton
             disableRipple
             onClick={(event: MouseEvent<HTMLButtonElement>) => {
+              setShowFilters(true);
+              queueMicrotask(() => {
+                filterInputRefs.current[`${column.id}-0`]?.focus();
+                filterInputRefs.current[`${column.id}-0`]?.select();
+              });
               event.stopPropagation();
             }}
             size="small"

package/src/head/MRT_TableHeadRow.tsx

@@ -11,7 +11,7 @@ interface Props {
 
 export const MRT_TableHeadRow: FC<Props> = ({ headerGroup, table }) => {
   const {
-    options: { muiTableHeadRowProps },
+    options: { layoutMode, muiTableHeadRowProps },
   } = table;
 
   const tableRowProps =
@@ -23,19 +23,17 @@ export const MRT_TableHeadRow: FC<Props> = ({ headerGroup, table }) => {
     <TableRow
       {...tableRowProps}
       sx={(theme) => ({
-        boxShadow: `4px 0 8px ${alpha(theme.palette.common.black, 0.1)}`,
         backgroundColor: lighten(theme.palette.background.default, 0.04),
+        boxShadow: `4px 0 8px ${alpha(theme.palette.common.black, 0.1)}`,
+        display: layoutMode === 'grid' ? 'flex' : 'table-row',
+        top: 0,
         ...(tableRowProps?.sx instanceof Function
           ? tableRowProps?.sx(theme)
           : (tableRowProps?.sx as any)),
       })}
     >
-      {headerGroup.headers.map((header: MRT_Header, index) => (
-        <MRT_TableHeadCell
-          header={header}
-          key={header.id || index}
-          table={table}
-        />
+      {headerGroup.headers.map((header: MRT_Header) => (
+        <MRT_TableHeadCell header={header} key={header.id} table={table} />
       ))}
     </TableRow>
   );

package/src/menus/MRT_ShowHideColumnsMenu.tsx

@@ -38,7 +38,6 @@ export const MRT_ShowHideColumnsMenu = <
       enableHiding,
       enablePinning,
       localization,
-      columns,
     },
   } = table;
   const { density, columnOrder, columnPinning } = getState();
@@ -65,7 +64,6 @@ export const MRT_ShowHideColumnsMenu = <
     }
     return columns;
   }, [
-    columns,
     columnOrder,
     columnPinning,
     getAllColumns(),

package/src/table/MRT_Table.tsx

@@ -18,6 +18,7 @@ export const MRT_Table: FC<Props> = ({ table }) => {
       enableStickyHeader,
       enableTableFooter,
       enableTableHead,
+      layoutMode,
       memoMode,
       muiTableProps,
     },
@@ -36,6 +37,7 @@ export const MRT_Table: FC<Props> = ({ table }) => {
       }
       {...tableProps}
       sx={(theme) => ({
+        display: layoutMode === 'grid' ? 'grid' : 'table',
         tableLayout:
           enableColumnResizing || enableRowVirtualization ? 'fixed' : 'auto',
         ...(tableProps?.sx instanceof Function