material-react-table 0.8.9 → 0.8.12

package/dist/menus/MRT_ShowHideColumnsMenu.d.ts

@@ -1,5 +1,5 @@
 import { FC } from 'react';
-import { MRT_TableInstance } from '..';
+import type { MRT_TableInstance } from '..';
 interface Props {
     anchorEl: HTMLElement | null;
     isSubMenu?: boolean;

package/package.json

@@ -1,8 +1,8 @@
 {
-  "version": "0.8.9",
+  "version": "0.8.12",
   "license": "MIT",
   "name": "material-react-table",
-  "description": "A fully featured Material UI implementation of Tanstack react-table, inspired by material-table and the MUI X DataGrid, written from the ground up in TypeScript.",
+  "description": "A fully featured Material UI implementation of TanStack React Table, inspired by material-table and the MUI X DataGrid, written from the ground up in TypeScript.",
   "author": "Kevin Vandy",
   "keywords": [
     "react-table",
@@ -48,11 +48,11 @@
   "size-limit": [
     {
       "path": "dist/material-react-table.cjs.production.min.js",
-      "limit": "60 KB"
+      "limit": "50 KB"
     },
     {
       "path": "dist/material-react-table.esm.js",
-      "limit": "60 KB"
+      "limit": "50 KB"
     }
   ],
   "devDependencies": {
@@ -63,17 +63,17 @@
     "@mui/icons-material": "^5.8.2",
     "@mui/material": "^5.8.2",
     "@size-limit/preset-small-lib": "^7.0.8",
-    "@storybook/addon-a11y": "^6.5.5",
-    "@storybook/addon-actions": "^6.5.5",
-    "@storybook/addon-essentials": "^6.5.5",
+    "@storybook/addon-a11y": "^6.5.6",
+    "@storybook/addon-actions": "^6.5.6",
+    "@storybook/addon-essentials": "^6.5.6",
     "@storybook/addon-info": "^5.3.21",
-    "@storybook/addon-links": "^6.5.5",
-    "@storybook/addons": "^6.5.5",
-    "@storybook/react": "^6.5.5",
-    "@types/react": "^18.0.10",
+    "@storybook/addon-links": "^6.5.6",
+    "@storybook/addons": "^6.5.6",
+    "@storybook/react": "^6.5.6",
+    "@types/react": "^18.0.11",
     "@types/react-dom": "^18.0.5",
     "babel-loader": "^8.2.5",
-    "eslint": "^8.16.0",
+    "eslint": "^8.17.0",
     "eslint-plugin-react-hooks": "^4.5.0",
     "husky": "^8.0.1",
     "prettier": "^2.6.2",
@@ -87,7 +87,7 @@
     "storybook-dark-mode": "^1.1.0",
     "tsdx": "^0.14.1",
     "tslib": "^2.4.0",
-    "typescript": "^4.7.2"
+    "typescript": "^4.7.3"
   },
   "peerDependencies": {
     "@emotion/react": ">=11",
@@ -98,7 +98,7 @@
   },
   "dependencies": {
     "@tanstack/match-sorter-utils": "^8.0.0-alpha.83",
-    "@tanstack/react-table": "^8.0.0-alpha.89",
+    "@tanstack/react-table": "^8.0.0-beta.4",
     "react-dnd": "^16.0.1",
     "react-dnd-html5-backend": "^16.0.1"
   }

package/src/MaterialReactTable.tsx

@@ -35,7 +35,6 @@ import {
   Header,
   HeaderGroup,
   Overwrite,
-  PaginationState,
   ReactTableGenerics,
   Row,
   TableGenerics,
@@ -79,9 +78,11 @@ export type MRT_TableInstance<D extends Record<string, any> = {}> = Omit<
     >
   >,
   | 'getAllColumns'
+  | 'getAllFlatColumns'
   | 'getAllLeafColumns'
   | 'getColumn'
   | 'getExpandedRowModel'
+  | 'getFlatHeaders'
   | 'getPaginationRowModel'
   | 'getPrePaginationRowModel'
   | 'getRowModel'
@@ -90,9 +91,11 @@ export type MRT_TableInstance<D extends Record<string, any> = {}> = Omit<
   | 'options'
 > & {
   getAllColumns: () => MRT_Column<D>[];
+  getAllFlatColumns: () => MRT_Column<D>[];
   getAllLeafColumns: () => MRT_Column<D>[];
   getColumn: (columnId: string) => MRT_Column<D>;
   getExpandedRowModel: () => MRT_RowModel<D>;
+  getFlatHeaders: () => MRT_Header<D>[];
   getPaginationRowModel: () => MRT_RowModel<D>;
   getPrePaginationRowModel: () => MRT_RowModel<D>;
   getRowModel: () => MRT_RowModel<D>;
@@ -117,10 +120,7 @@ export type MRT_TableInstance<D extends Record<string, any> = {}> = Omit<
   setShowGlobalFilter: Dispatch<SetStateAction<boolean>>;
 };
 
-export type MRT_TableState<D extends Record<string, any> = {}> = Omit<
-  TableState,
-  'pagination'
-> & {
+export type MRT_TableState<D extends Record<string, any> = {}> = TableState & {
   currentEditingCell: MRT_Cell<D> | null;
   currentEditingRow: MRT_Row<D> | null;
   currentFilterFns: Record<string, string | Function>;
@@ -128,7 +128,6 @@ export type MRT_TableState<D extends Record<string, any> = {}> = Omit<
   isDensePadding: boolean;
   isLoading: boolean;
   isFullScreen: boolean;
-  pagination: Partial<PaginationState>;
   showFilters: boolean;
   showGlobalFilter: boolean;
   showProgressBars: boolean;
@@ -137,7 +136,7 @@ export type MRT_TableState<D extends Record<string, any> = {}> = Omit<
 
 export type MRT_ColumnDef<D extends Record<string, any> = {}> = Omit<
   ColumnDef<D>,
-  'header' | 'footer' | 'columns' | 'filterFn'
+  'accessorFN' | 'header' | 'footer' | 'columns' | 'filterFn'
 > & {
   Edit?: ({
     cell,
@@ -153,20 +152,24 @@ export type MRT_ColumnDef<D extends Record<string, any> = {}> = Omit<
     header: MRT_Header<D>;
     tableInstance: MRT_TableInstance<D>;
   }) => ReactNode;
-  Footer?: ({
-    footer,
-    tableInstance,
-  }: {
-    footer: MRT_Header<D>;
-    tableInstance: MRT_TableInstance<D>;
-  }) => ReactNode;
-  Header?: ({
-    header,
-    tableInstance,
-  }: {
-    header: MRT_Header<D>;
-    tableInstance: MRT_TableInstance<D>;
-  }) => ReactNode;
+  Footer?:
+    | ReactNode
+    | (({
+        footer,
+        tableInstance,
+      }: {
+        footer: MRT_Header<D>;
+        tableInstance: MRT_TableInstance<D>;
+      }) => ReactNode);
+  Header?:
+    | ReactNode
+    | (({
+        header,
+        tableInstance,
+      }: {
+        header: MRT_Header<D>;
+        tableInstance: MRT_TableInstance<D>;
+      }) => ReactNode);
   Cell?: ({
     cell,
     tableInstance,
@@ -174,7 +177,7 @@ export type MRT_ColumnDef<D extends Record<string, any> = {}> = Omit<
     cell: MRT_Cell<D>;
     tableInstance: MRT_TableInstance<D>;
   }) => ReactNode;
-  id: keyof D | string;
+  accessorFN?: (row: D) => any;
   columns?: MRT_ColumnDef<D>[];
   enableClickToCopy?: boolean;
   enableColumnActions?: boolean;
@@ -185,6 +188,7 @@ export type MRT_ColumnDef<D extends Record<string, any> = {}> = Omit<
   filterSelectOptions?: (string | { text: string; value: string })[];
   footer?: string;
   header: string;
+  id: keyof D | string;
   muiTableBodyCellCopyButtonProps?:
     | ButtonProps
     | (({
@@ -280,13 +284,12 @@ export type MRT_ColumnDef<D extends Record<string, any> = {}> = Omit<
 export type MRT_Column<D extends Record<string, any> = {}> = Omit<
   Column<D>,
   'header' | 'footer' | 'columns'
-> &
-  MRT_ColumnDef<D> & {
-    columns?: MRT_Column<D>[];
-    columnDef: MRT_ColumnDef<D>;
-    header: string;
-    footer: string;
-  };
+> & {
+  columns?: MRT_Column<D>[];
+  columnDef: MRT_ColumnDef<D>;
+  header: string;
+  footer: string;
+};
 
 export type MRT_Header<D extends Record<string, any> = {}> = Omit<
   Header<D>,
@@ -304,12 +307,13 @@ export type MRT_HeaderGroup<D extends Record<string, any> = {}> = Omit<
 
 export type MRT_Row<D extends Record<string, any> = {}> = Omit<
   Row<D>,
-  'getVisibleCells' | 'getAllCells' | 'subRows' | 'original'
+  'getVisibleCells' | 'getAllCells' | 'subRows' | 'original' | '_valuesCache'
 > & {
   getAllCells: () => MRT_Cell<D>[];
   getVisibleCells: () => MRT_Cell<D>[];
   subRows?: MRT_Row<D>[];
   original: D;
+  _valuesCache?: D;
 };
 
 export type MRT_Cell<D extends Record<string, any> = {}> = Omit<

package/src/body/MRT_TableBodyCell.tsx

@@ -39,15 +39,17 @@ export const MRT_TableBodyCell: FC<Props> = ({
 
   const { column, row } = cell;
 
+  const { columnDef, columnDefType } = column;
+
   const mTableCellBodyProps =
     muiTableBodyCellProps instanceof Function
       ? muiTableBodyCellProps({ cell, tableInstance })
       : muiTableBodyCellProps;
 
   const mcTableCellBodyProps =
-    column.muiTableBodyCellProps instanceof Function
-      ? column.muiTableBodyCellProps({ cell, tableInstance })
-      : column.muiTableBodyCellProps;
+    columnDef.muiTableBodyCellProps instanceof Function
+      ? columnDef.muiTableBodyCellProps({ cell, tableInstance })
+      : columnDef.muiTableBodyCellProps;
 
   const tableCellProps = {
     ...mTableCellBodyProps,
@@ -56,15 +58,16 @@ export const MRT_TableBodyCell: FC<Props> = ({
 
   const skeletonWidth = useMemo(
     () =>
-      column.columnDefType === 'display'
+      columnDefType === 'display'
         ? column.getSize() / 2
         : Math.random() * (column.getSize() - column.getSize() / 3) +
           column.getSize() / 3,
-    [column.columnDefType, column.getSize()],
+    [columnDefType, column.getSize()],
   );
 
   const isEditable =
-    (enableEditing || column.enableEditing) && column.enableEditing !== false;
+    (enableEditing || columnDef.enableEditing) &&
+    columnDef.enableEditing !== false;
 
   const isEditing =
     isEditable &&
@@ -74,8 +77,8 @@ export const MRT_TableBodyCell: FC<Props> = ({
 
   const handleDoubleClick = (_event: MouseEvent<HTMLTableCellElement>) => {
     if (
-      (enableEditing || column.enableEditing) &&
-      column.enableEditing !== false &&
+      (enableEditing || columnDef.enableEditing) &&
+      columnDef.enableEditing !== false &&
       editingMode === 'cell'
     ) {
       setCurrentEditingCell(cell);
@@ -133,10 +136,10 @@ export const MRT_TableBodyCell: FC<Props> = ({
             ? `${column.getStart('left')}px`
             : undefined,
         p: isDensePadding
-          ? column.columnDefType === 'display'
+          ? columnDefType === 'display'
             ? '0 0.5rem'
             : '0.5rem'
-          : column.columnDefType === 'display'
+          : columnDefType === 'display'
           ? '0.5rem 0.75rem'
           : '1rem',
         pl:
@@ -160,7 +163,7 @@ export const MRT_TableBodyCell: FC<Props> = ({
       })}
       style={{
         maxWidth: `min(${column.getSize()}px, fit-content)`,
-        minWidth: `max(${column.getSize()}px, ${column.minSize ?? 30}px)`,
+        minWidth: `max(${column.getSize()}px, ${columnDef.minSize ?? 30}px)`,
         width: column.getSize(),
       }}
     >
@@ -172,8 +175,8 @@ export const MRT_TableBodyCell: FC<Props> = ({
             width={skeletonWidth}
             {...muiTableBodyCellSkeletonProps}
           />
-        ) : column.columnDefType === 'display' ? (
-          column.columnDef.Cell?.({ cell, tableInstance })
+        ) : columnDefType === 'display' ? (
+          columnDef.Cell?.({ cell, tableInstance })
         ) : cell.getIsPlaceholder() ||
           (row.getIsGrouped() &&
             column.id !==
@@ -181,12 +184,12 @@ export const MRT_TableBodyCell: FC<Props> = ({
           cell.renderAggregatedCell()
         ) : isEditing ? (
           <MRT_EditCellTextField cell={cell} tableInstance={tableInstance} />
-        ) : (enableClickToCopy || column.enableClickToCopy) &&
-          column.enableClickToCopy !== false ? (
+        ) : (enableClickToCopy || columnDef.enableClickToCopy) &&
+          columnDef.enableClickToCopy !== false ? (
           <>
             <MRT_CopyButton cell={cell} tableInstance={tableInstance}>
               <>
-                {cell.column.columnDef?.Cell?.({ cell, tableInstance }) ??
+                {columnDef?.Cell?.({ cell, tableInstance }) ??
                   cell.renderCell()}
               </>
             </MRT_CopyButton>
@@ -194,8 +197,7 @@ export const MRT_TableBodyCell: FC<Props> = ({
           </>
         ) : (
           <>
-            {cell.column.columnDef?.Cell?.({ cell, tableInstance }) ??
-              cell.renderCell()}
+            {columnDef?.Cell?.({ cell, tableInstance }) ?? cell.renderCell()}
             {row.getIsGrouped() && <> ({row.subRows?.length ?? ''})</>}
           </>
         )}

package/src/buttons/MRT_CopyButton.tsx

@@ -17,6 +17,10 @@ export const MRT_CopyButton: FC<Props> = ({
     options: { localization, muiTableBodyCellCopyButtonProps },
   } = tableInstance;
 
+  const { column } = cell;
+
+  const { columnDef } = column;
+
   const [copied, setCopied] = useState(false);
 
   const handleCopy = (text: unknown) => {
@@ -31,9 +35,12 @@ export const MRT_CopyButton: FC<Props> = ({
       : muiTableBodyCellCopyButtonProps;
 
   const mcTableBodyCellCopyButtonProps =
-    cell.column.muiTableBodyCellCopyButtonProps instanceof Function
-      ? cell.column.muiTableBodyCellCopyButtonProps({ cell, tableInstance })
-      : cell.column.muiTableBodyCellCopyButtonProps;
+    columnDef.muiTableBodyCellCopyButtonProps instanceof Function
+      ? columnDef.muiTableBodyCellCopyButtonProps({
+          cell,
+          tableInstance,
+        })
+      : columnDef.muiTableBodyCellCopyButtonProps;
 
   const buttonProps = {
     ...mTableBodyCellCopyButtonProps,

package/src/buttons/MRT_ToggleColumnActionMenuButton.tsx

@@ -22,6 +22,8 @@ export const MRT_ToggleColumnActionMenuButton: FC<Props> = ({
 
   const { column } = header;
 
+  const { columnDef } = column;
+
   const [anchorEl, setAnchorEl] = useState<null | HTMLElement>(null);
 
   const handleClick = (event: MouseEvent<HTMLElement>) => {
@@ -36,12 +38,12 @@ export const MRT_ToggleColumnActionMenuButton: FC<Props> = ({
       : muiTableHeadCellColumnActionsButtonProps;
 
   const mcTableHeadCellColumnActionsButtonProps =
-    column.muiTableHeadCellColumnActionsButtonProps instanceof Function
-      ? column.muiTableHeadCellColumnActionsButtonProps({
+    columnDef.muiTableHeadCellColumnActionsButtonProps instanceof Function
+      ? columnDef.muiTableHeadCellColumnActionsButtonProps({
           column,
           tableInstance,
         })
-      : column.muiTableHeadCellColumnActionsButtonProps;
+      : columnDef.muiTableHeadCellColumnActionsButtonProps;
 
   const iconButtonProps = {
     ...mTableHeadCellColumnActionsButtonProps,

package/src/footer/MRT_TableFooterCell.tsx

@@ -17,15 +17,17 @@ export const MRT_TableFooterCell: FC<Props> = ({ footer, tableInstance }) => {
 
   const { column } = footer;
 
+  const { columnDef, columnDefType } = column;
+
   const mTableFooterCellProps =
     muiTableFooterCellProps instanceof Function
       ? muiTableFooterCellProps({ column, tableInstance })
       : muiTableFooterCellProps;
 
   const mcTableFooterCellProps =
-    column.muiTableFooterCellProps instanceof Function
-      ? column.muiTableFooterCellProps({ column, tableInstance })
-      : column.muiTableFooterCellProps;
+    columnDef.muiTableFooterCellProps instanceof Function
+      ? columnDef.muiTableFooterCellProps({ column, tableInstance })
+      : columnDef.muiTableFooterCellProps;
 
   const tableCellProps = {
     ...mTableFooterCellProps,
@@ -34,7 +36,7 @@ export const MRT_TableFooterCell: FC<Props> = ({ footer, tableInstance }) => {
 
   return (
     <TableCell
-      align={column.columnDefType === 'group' ? 'center' : 'left'}
+      align={columnDefType === 'group' ? 'center' : 'left'}
       colSpan={footer.colSpan}
       variant="head"
       {...tableCellProps}
@@ -57,11 +59,13 @@ export const MRT_TableFooterCell: FC<Props> = ({ footer, tableInstance }) => {
       <>
         {footer.isPlaceholder
           ? null
-          : column.columnDef.Footer?.({
+          : columnDef.Footer instanceof Function
+          ? columnDef.Footer?.({
               footer,
               tableInstance,
-            }) ??
-            column.columnDef.footer ??
+            })
+          : columnDef.Footer ??
+            columnDef.footer ??
             footer.renderFooter() ??
             null}
       </>

package/src/footer/MRT_TableFooterRow.tsx

@@ -19,10 +19,10 @@ export const MRT_TableFooterRow: FC<Props> = ({
   // if no content in row, skip row
   if (
     !footerGroup.headers?.some(
-      (h) =>
-        (typeof h.column.columnDef.footer === 'string' &&
-          !!h.column.columnDef.footer) ||
-        h.column.columnDef.Footer,
+      (header) =>
+        (typeof header.column.columnDef.footer === 'string' &&
+          !!header.column.columnDef.footer) ||
+        header.column.columnDef.Footer,
     )
   )
     return null;

package/src/head/MRT_DraggableTableHeadCell.tsx

@@ -20,18 +20,25 @@ export const MRT_DraggableTableHeadCell: FC<Props> = ({
 
   const { columnOrder } = getState();
 
-  const reorder = (item: MRT_Header, newIndex: number) => {
-    const { index: currentIndex } = item;
-    columnOrder.splice(newIndex, 0, columnOrder.splice(currentIndex, 1)[0]);
+  const reorder = (movingHeader: MRT_Header, receivingHeader: MRT_Header) => {
+    if (movingHeader.column.getCanPin()) {
+      movingHeader.column.pin(receivingHeader.column.getIsPinned());
+    }
+    const { index: currentIndex } = movingHeader;
+    columnOrder.splice(
+      receivingHeader.index,
+      0,
+      columnOrder.splice(currentIndex, 1)[0],
+    );
     setColumnOrder([...columnOrder]);
   };
 
-  const [, drop] = useDrop({
+  const [, dropRef] = useDrop({
     accept: 'header',
-    drop: (item: MRT_Header) => reorder(item, header.index),
+    drop: (movingHeader: MRT_Header) => reorder(movingHeader, header),
   });
 
-  const [{ isDragging }, drag, preview] = useDrag({
+  const [{ isDragging }, dragRef, previewRef] = useDrag({
     collect: (monitor) => ({
       isDragging: monitor.isDragging(),
     }),
@@ -41,11 +48,11 @@ export const MRT_DraggableTableHeadCell: FC<Props> = ({
 
   return (
     <MRT_TableHeadCell
-      dragRef={drag}
-      dropRef={drop}
+      dragRef={dragRef}
+      dropRef={dropRef}
       header={header}
       isDragging={isDragging}
-      previewRef={preview}
+      previewRef={previewRef}
       tableInstance={tableInstance}
     />
   );