material-react-table 0.8.11 → 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,5 +1,5 @@
 {
-  "version": "0.8.11",
+  "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.",
@@ -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",

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;

package/src/body/MRT_TableBodyCell.tsx

@@ -39,7 +39,7 @@ export const MRT_TableBodyCell: FC<Props> = ({
 
   const { column, row } = cell;
 
-  const { columnDef } = column;
+  const { columnDef, columnDefType } = column;
 
   const mTableCellBodyProps =
     muiTableBodyCellProps instanceof Function
@@ -58,11 +58,11 @@ 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 =
@@ -136,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:
@@ -175,7 +175,7 @@ export const MRT_TableBodyCell: FC<Props> = ({
             width={skeletonWidth}
             {...muiTableBodyCellSkeletonProps}
           />
-        ) : column.columnDefType === 'display' ? (
+        ) : columnDefType === 'display' ? (
           columnDef.Cell?.({ cell, tableInstance })
         ) : cell.getIsPlaceholder() ||
           (row.getIsGrouped() &&
@@ -189,7 +189,7 @@ export const MRT_TableBodyCell: FC<Props> = ({
           <>
             <MRT_CopyButton cell={cell} tableInstance={tableInstance}>
               <>
-                {cell.column.columnDef?.Cell?.({ cell, tableInstance }) ??
+                {columnDef?.Cell?.({ cell, tableInstance }) ??
                   cell.renderCell()}
               </>
             </MRT_CopyButton>
@@ -197,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,12 +35,12 @@ export const MRT_CopyButton: FC<Props> = ({
       : muiTableBodyCellCopyButtonProps;
 
   const mcTableBodyCellCopyButtonProps =
-    cell.column.columnDef.muiTableBodyCellCopyButtonProps instanceof Function
-      ? cell.column.columnDef.muiTableBodyCellCopyButtonProps({
+    columnDef.muiTableBodyCellCopyButtonProps instanceof Function
+      ? columnDef.muiTableBodyCellCopyButtonProps({
           cell,
           tableInstance,
         })
-      : cell.column.columnDef.muiTableBodyCellCopyButtonProps;
+      : 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,13 +38,12 @@ export const MRT_ToggleColumnActionMenuButton: FC<Props> = ({
       : muiTableHeadCellColumnActionsButtonProps;
 
   const mcTableHeadCellColumnActionsButtonProps =
-    column.columnDef.muiTableHeadCellColumnActionsButtonProps instanceof
-    Function
-      ? column.columnDef.muiTableHeadCellColumnActionsButtonProps({
+    columnDef.muiTableHeadCellColumnActionsButtonProps instanceof Function
+      ? columnDef.muiTableHeadCellColumnActionsButtonProps({
           column,
           tableInstance,
         })
-      : column.columnDef.muiTableHeadCellColumnActionsButtonProps;
+      : columnDef.muiTableHeadCellColumnActionsButtonProps;
 
   const iconButtonProps = {
     ...mTableHeadCellColumnActionsButtonProps,

package/src/footer/MRT_TableFooterCell.tsx

@@ -17,7 +17,7 @@ export const MRT_TableFooterCell: FC<Props> = ({ footer, tableInstance }) => {
 
   const { column } = footer;
 
-  const { columnDef } = column;
+  const { columnDef, columnDefType } = column;
 
   const mTableFooterCellProps =
     muiTableFooterCellProps instanceof Function
@@ -36,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}

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}
     />
   );

package/src/head/MRT_TableHeadCell.tsx

@@ -59,12 +59,12 @@ export const MRT_TableHeadCell: FC<Props> = ({
   };
 
   const headerElement = (
-    column.columnDef?.Header instanceof Function
-      ? column.columnDef?.Header?.({
+    columnDef?.Header instanceof Function
+      ? columnDef?.Header?.({
           header,
           tableInstance,
         })
-      : column.columnDef?.Header ?? header.renderHeader()
+      : columnDef?.Header ?? header.renderHeader()
   ) as ReactNode;
 
   const getIsLastLeftPinnedColumn = () => {
@@ -123,12 +123,7 @@ export const MRT_TableHeadCell: FC<Props> = ({
           column.getIsPinned() && columnDefType !== 'group'
             ? 'sticky'
             : undefined,
-        pt:
-          columnDefType === 'display'
-            ? 0
-            : isDensePadding
-            ? '0.75rem'
-            : '1.25rem',
+        pt: columnDefType !== 'data' ? 0 : isDensePadding ? '0.25' : '.5rem',
         right:
           column.getIsPinned() === 'right' ? `${getTotalRight()}px` : undefined,
         transition: `all ${enableColumnResizing ? 0 : '0.2s'} ease-in-out`,

package/src/head/MRT_TableHeadCellFilterLabel.tsx

@@ -24,11 +24,13 @@ export const MRT_TableHeadCellFilterLabel: FC<Props> = ({
 
   const { column } = header;
 
+  const { columnDef } = column;
+
   const filterFn = getState()?.currentFilterFns?.[header.id];
 
   const filterTooltip = !!column.getFilterValue()
     ? localization.filteringByColumn
-        .replace('{column}', String(column.columnDef.header))
+        .replace('{column}', String(columnDef.header))
         .replace(
           '{filterType}',
           filterFn instanceof Function

package/src/head/MRT_TableHeadCellResizeHandle.tsx

@@ -17,6 +17,8 @@ export const MRT_TableHeadCellResizeHandle: FC<Props> = ({
 
   const { column } = header;
 
+  const { columnDefType } = column;
+
   return (
     <Divider
       flexItem
@@ -26,8 +28,7 @@ export const MRT_TableHeadCellResizeHandle: FC<Props> = ({
         borderRadius: '2px',
         borderRightWidth: '2px',
         cursor: 'col-resize',
-        height:
-          showFilters && column.columnDefType === 'data' ? '4rem' : '2rem',
+        height: showFilters && columnDefType === 'data' ? '4rem' : '2rem',
         opacity: 0.8,
         position: 'absolute',
         right: '1px',

package/src/head/MRT_TableHeadCellSortLabel.tsx

@@ -17,16 +17,12 @@ export const MRT_TableHeadCellSortLabel: FC<Props> = ({
 
   const { column } = header;
 
+  const { columnDef } = column;
+
   const sortTooltip = !!column.getIsSorted()
     ? column.getIsSorted() === 'desc'
-      ? localization.sortedByColumnDesc.replace(
-          '{column}',
-          column.columnDef.header,
-        )
-      : localization.sortedByColumnAsc.replace(
-          '{column}',
-          column.columnDef.header,
-        )
+      ? localization.sortedByColumnDesc.replace('{column}', columnDef.header)
+      : localization.sortedByColumnAsc.replace('{column}', columnDef.header)
     : localization.unsorted;
 
   return (

package/src/inputs/MRT_FilterTextField.tsx

@@ -144,7 +144,7 @@ export const MRT_FilterTextField: FC<Props> = ({
       : inputIndex === 1
       ? localization.max
       : '';
-  console.log({ textFieldProps });
+
   return (
     <>
       <TextField

package/src/localization.ts

@@ -37,6 +37,7 @@ export interface MRT_Localization {
   pinToLeft: string;
   pinToRight: string;
   resetColumnSize: string;
+  resetOrder: string;
   rowActions: string;
   rowNumber: string;
   rowNumbers: string;
@@ -104,6 +105,7 @@ export const MRT_DefaultLocalization_EN: MRT_Localization = {
   pinToLeft: 'Pin to left',
   pinToRight: 'Pin to right',
   resetColumnSize: 'Reset column size',
+  resetOrder: 'Reset order',
   rowActions: 'Row Actions',
   rowNumber: '#',
   rowNumbers: 'Row Numbers',

package/src/menus/MRT_ShowHideColumnsMenu.tsx

@@ -1,7 +1,7 @@
 import React, { FC, useMemo } from 'react';
 import { Button, Menu, Divider, Box } from '@mui/material';
 import { MRT_ShowHideColumnsMenuItems } from './MRT_ShowHideColumnsMenuItems';
-import { MRT_Column, MRT_TableInstance } from '..';
+import type { MRT_Column, MRT_TableInstance } from '..';
 
 interface Props {
   anchorEl: HTMLElement | null;
@@ -18,16 +18,16 @@ export const MRT_ShowHideColumnsMenu: FC<Props> = ({
 }) => {
   const {
     getAllColumns,
+    getAllLeafColumns,
     getIsAllColumnsVisible,
-    getIsSomeColumnsVisible,
     getIsSomeColumnsPinned,
+    getIsSomeColumnsVisible,
     getState,
     toggleAllColumnsVisible,
-    getAllLeafColumns,
-    options: { localization, enablePinning },
+    options: { localization, enablePinning, enableColumnOrdering },
   } = tableInstance;
 
-  const { isDensePadding } = getState();
+  const { isDensePadding, columnOrder, columnPinning } = getState();
 
   const hideAllColumns = () => {
     getAllLeafColumns()
@@ -35,25 +35,19 @@ export const MRT_ShowHideColumnsMenu: FC<Props> = ({
       .forEach((col) => col.toggleVisibility(false));
   };
 
-  const allDisplayColumns = useMemo(
-    () => getAllColumns().filter((col) => col.columnDefType === 'display'),
-    [getAllColumns()],
-  );
-
-  const allDataColumns: (MRT_Column | null)[] = useMemo(() => {
-    const dataColumns = getAllColumns().filter(
-      (col) => col.columnDefType !== 'display',
-    );
-    return getIsSomeColumnsPinned()
-      ? [
-          ...dataColumns.filter((c) => c.getIsPinned() === 'left'),
-          null,
-          ...dataColumns.filter((c) => c.getIsPinned() === false),
-          null,
-          ...dataColumns.filter((c) => c.getIsPinned() === 'right'),
-        ]
-      : dataColumns;
-  }, [getAllColumns(), getState().columnPinning, getIsSomeColumnsPinned()]);
+  const allColumns = useMemo(() => {
+    const columns = getAllColumns();
+    if (
+      columnOrder.length > 0 &&
+      !columns.some((col) => col.columnDefType === 'group')
+    ) {
+      return (
+        columnOrder.map((colId) => columns.find((col) => col.id === colId)) ??
+        columns
+      );
+    }
+    return columns;
+  }, [getAllColumns(), columnOrder, columnPinning]) as MRT_Column[];
 
   return (
     <Menu
@@ -80,6 +74,11 @@ export const MRT_ShowHideColumnsMenu: FC<Props> = ({
             {localization.hideAll}
           </Button>
         )}
+        {!isSubMenu && enableColumnOrdering && (
+          <Button onClick={() => tableInstance.resetColumnOrder()}>
+            {localization.resetOrder}
+          </Button>
+        )}
         {!isSubMenu && enablePinning && (
           <Button
             disabled={!getIsSomeColumnsPinned()}
@@ -96,7 +95,7 @@ export const MRT_ShowHideColumnsMenu: FC<Props> = ({
         </Button>
       </Box>
       <Divider />
-      {allDisplayColumns.map((column, index) => (
+      {allColumns.map((column, index) => (
         <MRT_ShowHideColumnsMenuItems
           column={column}
           isSubMenu={isSubMenu}
@@ -104,19 +103,6 @@ export const MRT_ShowHideColumnsMenu: FC<Props> = ({
           tableInstance={tableInstance}
         />
       ))}
-      <Divider />
-      {allDataColumns.map((column, index) =>
-        column ? (
-          <MRT_ShowHideColumnsMenuItems
-            column={column}
-            isSubMenu={isSubMenu}
-            key={`${index}-${column.id}`}
-            tableInstance={tableInstance}
-          />
-        ) : (
-          <Divider key={`${index}-divider`} />
-        ),
-      )}
     </Menu>
   );
 };

package/src/menus/MRT_ShowHideColumnsMenuItems.tsx

@@ -1,7 +1,7 @@
 import React, { FC } from 'react';
 import { FormControlLabel, MenuItem, Switch } from '@mui/material';
-import type { MRT_Column, MRT_TableInstance } from '..';
 import { MRT_ColumnPinningButtons } from '../buttons/MRT_ColumnPinningButtons';
+import type { MRT_Column, MRT_TableInstance } from '..';
 
 interface Props {
   column: MRT_Column;
@@ -21,13 +21,15 @@ export const MRT_ShowHideColumnsMenuItems: FC<Props> = ({
 
   const { columnVisibility } = getState();
 
+  const { columnDef, columnDefType } = column;
+
   const switchChecked =
-    (column.columnDefType !== 'group' && column.getIsVisible()) ||
-    (column.columnDefType === 'group' &&
+    (columnDefType !== 'group' && column.getIsVisible()) ||
+    (columnDefType === 'group' &&
       column.getLeafColumns().some((col) => col.getIsVisible()));
 
   const handleToggleColumnHidden = (column: MRT_Column) => {
-    if (column.columnDefType === 'group') {
+    if (columnDefType === 'group') {
       column?.columns?.forEach?.((childColumn: MRT_Column) => {
         childColumn.toggleVisibility(!switchChecked);
       });
@@ -59,11 +61,18 @@ export const MRT_ShowHideColumnsMenuItems: FC<Props> = ({
           />
         )}
         <FormControlLabel
-          componentsProps={{ typography: { sx: { marginBottom: 0 } } }}
+          componentsProps={{
+            typography: {
+              sx: {
+                marginBottom: 0,
+                opacity: columnDefType !== 'display' ? 1 : 0.5,
+              },
+            },
+          }}
           checked={switchChecked}
           control={<Switch />}
           disabled={(isSubMenu && switchChecked) || !column.getCanHide()}
-          label={column.columnDef.header}
+          label={columnDef.header}
           onChange={() => handleToggleColumnHidden(column)}
         />
       </MenuItem>