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

package/dist/esm/types/MaterialReactTable.d.ts

@@ -266,7 +266,7 @@ export type MRT_ColumnDef<TData extends Record<string, any> = {}> = Omit<ColumnD
      * @example columnDefType: 'display'
      */
     columnDefType?: 'data' | 'display' | 'group';
-    columnFilterModeOptions?: MRT_FilterOption[] | null;
+    columnFilterModeOptions?: Array<LiteralUnion<string & MRT_FilterOption>> | null;
     columns?: MRT_ColumnDef<TData>[];
     enableClickToCopy?: boolean;
     enableColumnActions?: boolean;
@@ -405,7 +405,7 @@ export type MRT_DisplayColumnIds = 'mrt-row-actions' | 'mrt-row-drag' | 'mrt-row
  * @link https://www.material-react-table.com/docs/api/props
  */
 export type MaterialReactTableProps<TData extends Record<string, any> = {}> = Omit<Partial<TableOptions<TData>>, 'columns' | 'data' | 'defaultColumn' | 'enableRowSelection' | 'expandRowsFn' | 'getRowId' | 'globalFilterFn' | 'initialState' | 'onStateChange' | 'state'> & {
-    columnFilterModeOptions?: (MRT_FilterOption | string)[] | null;
+    columnFilterModeOptions?: Array<LiteralUnion<string & MRT_FilterOption>> | null;
     /**
      * The columns to display in the table. `accessorKey`s or `accessorFn`s must match keys in the `data` prop.
      *

package/dist/esm/types/body/MRT_TableBodyCell.d.ts

@@ -5,7 +5,7 @@ interface Props {
     enableHover?: boolean;
     numRows: number;
     rowIndex: number;
-    rowRef: RefObject<HTMLDivElement | HTMLTableRowElement>;
+    rowRef: RefObject<HTMLTableRowElement>;
     table: MRT_TableInstance;
 }
 export declare const MRT_TableBodyCell: FC<Props>;

package/dist/esm/types/body/MRT_TableBodyRowGrabHandle.d.ts

@@ -2,7 +2,7 @@ import { FC, RefObject } from 'react';
 import { MRT_Cell, MRT_TableInstance } from '..';
 interface Props {
     cell: MRT_Cell;
-    rowRef: RefObject<HTMLDivElement | HTMLTableRowElement>;
+    rowRef: RefObject<HTMLTableRowElement>;
     table: MRT_TableInstance;
 }
 export declare const MRT_TableBodyRowGrabHandle: FC<Props>;

package/dist/esm/types/table/MRT_TableRoot.d.ts

@@ -1,7 +1,7 @@
 import React from 'react';
 import type { MRT_Cell, MRT_Column, MRT_ColumnDef, MRT_FilterOption, MRT_Row, MRT_TableInstance, MRT_TableState, MaterialReactTableProps, MRT_Localization } from '..';
 export declare const MRT_TableRoot: <TData extends Record<string, any> = {}>(props: Omit<Partial<import("@tanstack/react-table").TableOptions<TData>>, "state" | "data" | "onStateChange" | "initialState" | "getRowId" | "columns" | "defaultColumn" | "globalFilterFn" | "enableRowSelection" | "expandRowsFn"> & {
-    columnFilterModeOptions?: (string | (string & Record<never, never>))[] | null | undefined;
+    columnFilterModeOptions?: (string & MRT_FilterOption)[] | null | undefined;
     columns: MRT_ColumnDef<TData>[];
     data: TData[];
     defaultColumn?: Partial<MRT_ColumnDef<TData>> | undefined;

package/dist/index.d.ts

@@ -389,7 +389,7 @@ type MRT_ColumnDef<TData extends Record<string, any> = {}> = Omit<ColumnDef<TDat
      * @example columnDefType: 'display'
      */
     columnDefType?: 'data' | 'display' | 'group';
-    columnFilterModeOptions?: MRT_FilterOption[] | null;
+    columnFilterModeOptions?: Array<LiteralUnion<string & MRT_FilterOption>> | null;
     columns?: MRT_ColumnDef<TData>[];
     enableClickToCopy?: boolean;
     enableColumnActions?: boolean;
@@ -528,7 +528,7 @@ type MRT_DisplayColumnIds = 'mrt-row-actions' | 'mrt-row-drag' | 'mrt-row-expand
  * @link https://www.material-react-table.com/docs/api/props
  */
 type MaterialReactTableProps<TData extends Record<string, any> = {}> = Omit<Partial<TableOptions<TData>>, 'columns' | 'data' | 'defaultColumn' | 'enableRowSelection' | 'expandRowsFn' | 'getRowId' | 'globalFilterFn' | 'initialState' | 'onStateChange' | 'state'> & {
-    columnFilterModeOptions?: (MRT_FilterOption | string)[] | null;
+    columnFilterModeOptions?: Array<LiteralUnion<string & MRT_FilterOption>> | null;
     /**
      * The columns to display in the table. `accessorKey`s or `accessorFn`s must match keys in the `data` prop.
      *

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "1.4.0-beta.0",
+  "version": "1.4.0-beta.1",
   "license": "MIT",
   "name": "material-react-table",
   "description": "A fully featured Material UI V5 implementation of TanStack React Table V8, written from the ground up in TypeScript.",

package/src/MaterialReactTable.tsx

@@ -361,7 +361,9 @@ export type MRT_ColumnDef<TData extends Record<string, any> = {}> = Omit<
    * @example columnDefType: 'display'
    */
   columnDefType?: 'data' | 'display' | 'group';
-  columnFilterModeOptions?: MRT_FilterOption[] | null;
+  columnFilterModeOptions?: Array<
+    LiteralUnion<string & MRT_FilterOption>
+  > | null;
   columns?: MRT_ColumnDef<TData>[];
   enableClickToCopy?: boolean;
   enableColumnActions?: boolean;
@@ -619,7 +621,9 @@ export type MaterialReactTableProps<TData extends Record<string, any> = {}> =
     | 'onStateChange'
     | 'state'
   > & {
-    columnFilterModeOptions?: (MRT_FilterOption | string)[] | null;
+    columnFilterModeOptions?: Array<
+      LiteralUnion<string & MRT_FilterOption>
+    > | null;
     /**
      * The columns to display in the table. `accessorKey`s or `accessorFn`s must match keys in the `data` prop.
      *

package/src/body/MRT_TableBody.tsx

@@ -120,8 +120,6 @@ export const MRT_TableBody: FC<Props> = ({ table }) => {
 
   return (
     <TableBody
-      component={layoutMode === 'grid' ? 'div' : 'tbody'}
-      role="rowgroup"
       {...tableBodyProps}
       sx={(theme) => ({
         display: layoutMode === 'grid' ? 'grid' : 'table-row-group',
@@ -131,13 +129,18 @@ export const MRT_TableBody: FC<Props> = ({ table }) => {
       })}
     >
       {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

@@ -23,7 +23,7 @@ interface Props {
   enableHover?: boolean;
   numRows: number;
   rowIndex: number;
-  rowRef: RefObject<HTMLDivElement | HTMLTableRowElement>;
+  rowRef: RefObject<HTMLTableRowElement>;
   table: MRT_TableInstance;
 }
 
@@ -169,8 +169,6 @@ export const MRT_TableBodyCell: FC<Props> = ({
 
   return (
     <TableCell
-      component={layoutMode === 'grid' ? 'div' : 'td'}
-      role="gridcell"
       {...tableCellProps}
       onDragEnter={handleDragEnter}
       onDoubleClick={handleDoubleClick}

package/src/body/MRT_TableBodyRow.tsx

@@ -47,7 +47,7 @@ export const MRT_TableBodyRow: FC<Props> = ({
     }
   };
 
-  const rowRef = useRef<HTMLDivElement | HTMLTableRowElement | null>(null);
+  const rowRef = useRef<HTMLTableRowElement | null>(null);
 
   const draggingBorder = useMemo(
     () =>
@@ -68,17 +68,15 @@ export const MRT_TableBodyRow: FC<Props> = ({
   return (
     <>
       <TableRow
-        component={layoutMode === 'grid' ? 'div' : 'tr'}
         hover
         onDragEnter={handleDragEnter}
         selected={row.getIsSelected()}
-        ref={(node: HTMLTableRowElement | HTMLDivElement) => {
+        ref={(node: HTMLTableRowElement) => {
           rowRef.current = node;
           if (virtualRow?.measureRef) {
             virtualRow.measureRef = node;
           }
         }}
-        role="row"
         {...tableRowProps}
         sx={(theme) => ({
           backgroundColor: lighten(theme.palette.background.default, 0.06),

package/src/body/MRT_TableBodyRowGrabHandle.tsx

@@ -4,7 +4,7 @@ import { MRT_GrabHandleButton } from '../buttons/MRT_GrabHandleButton';
 
 interface Props {
   cell: MRT_Cell;
-  rowRef: RefObject<HTMLDivElement | HTMLTableRowElement>;
+  rowRef: RefObject<HTMLTableRowElement>;
   table: MRT_TableInstance;
 }
 

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/column.utils.ts

@@ -274,7 +274,6 @@ export const getCommonCellStyles = ({
     table.options.layoutMode === 'grid'
       ? `${column.getSize()} 0 auto`
       : undefined,
-  maxWidth: `min(${column.getSize()}px, fit-content)`,
   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

@@ -30,12 +30,12 @@ export const MRT_TableHead: FC<Props> = ({ table }) => {
 
   return (
     <TableHead
-      component={layoutMode === 'grid' ? 'div' : 'thead'}
-      role="rowgroup"
       {...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

@@ -121,7 +121,6 @@ export const MRT_TableHeadCell: FC<Props> = ({ header, table }) => {
   return (
     <TableCell
       align={columnDefType === 'group' ? 'center' : 'left'}
-      component={layoutMode === 'grid' ? 'div' : 'td'}
       colSpan={header.colSpan}
       onDragEnter={handleDragEnter}
       ref={(node) => {
@@ -129,7 +128,6 @@ export const MRT_TableHeadCell: FC<Props> = ({ header, table }) => {
           tableHeadCellRefs.current[column.id] = node as HTMLTableCellElement;
         }
       }}
-      role="columnheader"
       {...tableCellProps}
       sx={(theme: Theme) => ({
         flexDirection: layoutMode === 'grid' ? 'column' : undefined,

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

@@ -21,13 +21,12 @@ export const MRT_TableHeadRow: FC<Props> = ({ headerGroup, table }) => {
 
   return (
     <TableRow
-      component={layoutMode === 'grid' ? 'div' : 'tr'}
-      role="row"
       {...tableRowProps}
       sx={(theme) => ({
+        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',
-        backgroundColor: lighten(theme.palette.background.default, 0.04),
+        top: 0,
         ...(tableRowProps?.sx instanceof Function
           ? tableRowProps?.sx(theme)
           : (tableRowProps?.sx as any)),

package/src/table/MRT_Table.tsx

@@ -32,13 +32,12 @@ export const MRT_Table: FC<Props> = ({ table }) => {
 
   return (
     <Table
-      component={layoutMode === 'grid' ? 'div' : 'table'}
-      role="grid"
       stickyHeader={
         enableStickyHeader || enableRowVirtualization || isFullScreen
       }
       {...tableProps}
       sx={(theme) => ({
+        display: layoutMode === 'grid' ? 'grid' : 'table',
         tableLayout:
           enableColumnResizing || enableRowVirtualization ? 'fixed' : 'auto',
         ...(tableProps?.sx instanceof Function