material-react-table 0.10.0 → 0.12.1

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "0.10.0",
+  "version": "0.12.1",
   "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.",
@@ -56,30 +56,30 @@
     }
   ],
   "devDependencies": {
-    "@babel/core": "^7.18.2",
-    "@emotion/react": "^11.9.0",
-    "@emotion/styled": "^11.8.1",
+    "@babel/core": "^7.18.5",
+    "@emotion/react": "^11.9.3",
+    "@emotion/styled": "^11.9.3",
     "@faker-js/faker": "^6.3.1",
-    "@mui/icons-material": "^5.8.2",
-    "@mui/material": "^5.8.2",
+    "@mui/icons-material": "^5.8.4",
+    "@mui/material": "^5.8.4",
     "@size-limit/preset-small-lib": "^7.0.8",
-    "@storybook/addon-a11y": "^6.5.7",
-    "@storybook/addon-actions": "^6.5.7",
-    "@storybook/addon-essentials": "^6.5.7",
+    "@storybook/addon-a11y": "^6.5.9",
+    "@storybook/addon-actions": "^6.5.9",
+    "@storybook/addon-essentials": "^6.5.9",
     "@storybook/addon-info": "^5.3.21",
-    "@storybook/addon-links": "^6.5.7",
-    "@storybook/addons": "^6.5.7",
-    "@storybook/react": "^6.5.7",
-    "@types/react": "^18.0.12",
+    "@storybook/addon-links": "^6.5.9",
+    "@storybook/addons": "^6.5.9",
+    "@storybook/react": "^6.5.9",
+    "@types/react": "^18.0.14",
     "@types/react-dom": "^18.0.5",
     "babel-loader": "^8.2.5",
     "eslint": "^8.17.0",
-    "eslint-plugin-react-hooks": "^4.5.0",
+    "eslint-plugin-react-hooks": "^4.6.0",
     "husky": "^8.0.1",
-    "prettier": "^2.6.2",
+    "prettier": "^2.7.1",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
-    "react-is": "^18.1.0",
+    "react-is": "^18.2.0",
     "rollup-plugin-commonjs": "^10.1.0",
     "rollup-plugin-node-resolve": "^5.2.0",
     "rollup-plugin-peer-deps-external": "^2.2.4",
@@ -98,7 +98,7 @@
   },
   "dependencies": {
     "@tanstack/match-sorter-utils": "^8.0.0-alpha.83",
-    "@tanstack/react-table": "^8.0.0-beta.8",
+    "@tanstack/react-table": "^8.0.0-beta.9",
     "react-dnd": "^16.0.1",
     "react-dnd-html5-backend": "^16.0.1",
     "react-virtual": "^2.10.4"

package/src/MaterialReactTable.tsx

@@ -203,7 +203,7 @@ export type MRT_ColumnDef<D extends Record<string, any> = {}> = Omit<
   enableColumnActions?: boolean;
   enableColumnOrdering?: boolean;
   enableEditing?: boolean;
-  enabledColumnFilterOptions?: (MRT_FILTER_OPTION | string)[];
+  enabledColumnFilterOptions?: (MRT_FILTER_OPTION | string)[] | null;
   filterFn?: MRT_FilterFn;
   filterSelectOptions?: (string | { text: string; value: string })[];
   footer?: string;
@@ -272,7 +272,7 @@ export type MRT_ColumnDef<D extends Record<string, any> = {}> = Omit<
         instance: MRT_TableInstance;
         column: MRT_Column<D>;
       }) => TableCellProps);
-  onMrtCellEditBlur?: ({
+  onCellEditBlur?: ({
     cell,
     event,
     instance,
@@ -281,7 +281,7 @@ export type MRT_ColumnDef<D extends Record<string, any> = {}> = Omit<
     cell: MRT_Cell<D>;
     instance: MRT_TableInstance<D>;
   }) => void;
-  onMrtCellEditChange?: ({
+  onCellEditChanged?: ({
     cell,
     event,
     instance,
@@ -290,7 +290,16 @@ export type MRT_ColumnDef<D extends Record<string, any> = {}> = Omit<
     cell: MRT_Cell<D>;
     instance: MRT_TableInstance<D>;
   }) => void;
-  onMrtFilterValueChange?: ({
+  onColumnFilterValueChanged?: ({
+    column,
+    event,
+    filterValue,
+  }: {
+    column: MRT_Column<D>;
+    event: ChangeEvent<HTMLInputElement>;
+    filterValue: any;
+  }) => void;
+  onColumnFilterValueChangedDebounced?: ({
     column,
     event,
     filterValue,
@@ -303,7 +312,7 @@ 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'
+  'header' | 'footer' | 'columns' | 'columnDef'
 > & {
   columns?: MRT_Column<D>[];
   columnDef: MRT_ColumnDef<D>;
@@ -389,8 +398,8 @@ export type MaterialReactTableProps<D extends Record<string, any> = {}> =
     enableToolbarBottom?: boolean;
     enableToolbarInternalActions?: boolean;
     enableToolbarTop?: boolean;
-    enabledColumnFilterOptions?: (MRT_FILTER_OPTION | string)[];
-    enabledGlobalFilterOptions?: (MRT_FILTER_OPTION | string)[];
+    enabledColumnFilterOptions?: (MRT_FILTER_OPTION | string)[] | null;
+    enabledGlobalFilterOptions?: (MRT_FILTER_OPTION | string)[] | null;
     icons?: Partial<MRT_Icons>;
     localization?: Partial<MRT_Localization>;
     muiLinearProgressProps?:
@@ -560,13 +569,7 @@ export type MaterialReactTableProps<D extends Record<string, any> = {}> =
     muiTableToolbarTopProps?:
       | ToolbarProps
       | (({ instance }: { instance: MRT_TableInstance }) => ToolbarProps);
-    onCurrentEditingCellChange?: OnChangeFn<MRT_Cell>;
-    onCurrentEditingRowChange?: OnChangeFn<MRT_Row>;
-    onCurrentFilterFnsChange?: OnChangeFn<{ [key: string]: MRT_FilterFn }>;
-    onCurrentGlobalFilterFnChange?: OnChangeFn<MRT_FilterFn>;
-    onIsDensePaddingChange?: OnChangeFn<boolean>;
-    onIsFullScreenChange?: OnChangeFn<boolean>;
-    onMrtCellClick?: ({
+    onCellClick?: ({
       cell,
       event,
       instance,
@@ -575,7 +578,7 @@ export type MaterialReactTableProps<D extends Record<string, any> = {}> =
       instance: MRT_TableInstance<D>;
       event: MouseEvent<HTMLTableCellElement>;
     }) => void;
-    onMrtCellEditBlur?: ({
+    onCellEditBlur?: ({
       cell,
       event,
       instance,
@@ -584,7 +587,7 @@ export type MaterialReactTableProps<D extends Record<string, any> = {}> =
       cell: MRT_Cell<D>;
       instance: MRT_TableInstance<D>;
     }) => void;
-    onMrtCellEditChange?: ({
+    onCellEditChanged?: ({
       cell,
       event,
       instance,
@@ -593,23 +596,16 @@ export type MaterialReactTableProps<D extends Record<string, any> = {}> =
       cell: MRT_Cell<D>;
       instance: MRT_TableInstance<D>;
     }) => void;
-    onMrtDetailPanelClick?: ({
+    onColumnFilterValueChanged?: ({
+      column,
       event,
-      row,
-      instance,
+      filterValue,
     }: {
-      event: MouseEvent<HTMLTableCellElement>;
-      row: MRT_Row<D>;
-      instance: MRT_TableInstance<D>;
+      column: MRT_Column<D>;
+      event: ChangeEvent<HTMLInputElement>;
+      filterValue: any;
     }) => void;
-    onMrtEditRowSubmit?: ({
-      row,
-      instance,
-    }: {
-      row: MRT_Row<D>;
-      instance: MRT_TableInstance<D>;
-    }) => Promise<void> | void;
-    onMrtFilterValueChange?: ({
+    onColumnFilterValueChangedDebounced?: ({
       column,
       event,
       filterValue,
@@ -618,60 +614,59 @@ export type MaterialReactTableProps<D extends Record<string, any> = {}> =
       event: ChangeEvent<HTMLInputElement>;
       filterValue: any;
     }) => void;
-    onMrtGlobalFilterValueChange?: ({
-      event,
+    onColumnVisibilityChanged?: ({
+      column,
+      columnVisibility,
       instance,
     }: {
-      event: ChangeEvent<HTMLInputElement>;
+      column: MRT_Column<D>;
+      columnVisibility: VisibilityState;
       instance: MRT_TableInstance<D>;
     }) => void;
-    onMrtRowClick?: ({
+    onCurrentEditingCellChange?: OnChangeFn<MRT_Cell>;
+    onCurrentEditingRowChange?: OnChangeFn<MRT_Row>;
+    onCurrentFilterFnsChange?: OnChangeFn<{ [key: string]: MRT_FilterFn }>;
+    onCurrentGlobalFilterFnChange?: OnChangeFn<MRT_FilterFn>;
+    onDetailPanelClick?: ({
       event,
       row,
       instance,
     }: {
-      event: MouseEvent<HTMLTableRowElement>;
+      event: MouseEvent<HTMLTableCellElement>;
       row: MRT_Row<D>;
       instance: MRT_TableInstance<D>;
     }) => void;
-    onMrtRowExpandChange?: ({
-      event,
+    onEditRowSubmit?: ({
       row,
+      instance,
     }: {
-      event: MouseEvent<HTMLButtonElement>;
       row: MRT_Row<D>;
       instance: MRT_TableInstance<D>;
-    }) => void;
-    onMrtSelectAllChange?: ({
+    }) => Promise<void> | void;
+    onExpandChanged?: ({
       event,
-      selectedRows,
-      instance,
+      row,
     }: {
-      event: ChangeEvent;
-      selectedRows: MRT_Row<D>[];
+      event: MouseEvent<HTMLButtonElement>;
+      row: MRT_Row<D>;
       instance: MRT_TableInstance<D>;
     }) => void;
-    onMrtSelectRowChange?: ({
+    onGlobalFilterValueChanged?: ({
       event,
-      row,
-      selectedRows,
       instance,
     }: {
-      event: ChangeEvent;
-      row: MRT_Row<D>;
-      selectedRows: MRT_Row<D>[];
+      event: ChangeEvent<HTMLInputElement>;
       instance: MRT_TableInstance<D>;
     }) => void;
-    onMrtToggleColumnVisibility?: ({
-      column,
-      columnVisibility,
+    onGlobalFilterValueChangedDebounced?: ({
+      event,
       instance,
     }: {
-      column: MRT_Column<D>;
-      columnVisibility: VisibilityState;
+      event: ChangeEvent<HTMLInputElement>;
       instance: MRT_TableInstance<D>;
     }) => void;
-    onMrtToggleDensePadding?: ({
+    onIsDensePaddingChange?: OnChangeFn<boolean>;
+    onIsDensePaddingChanged?: ({
       event,
       isDensePadding,
       instance,
@@ -680,7 +675,8 @@ export type MaterialReactTableProps<D extends Record<string, any> = {}> =
       isDensePadding: boolean;
       instance: MRT_TableInstance<D>;
     }) => void;
-    onMrtToggleFullScreen?: ({
+    onIsFullScreenChange?: OnChangeFn<boolean>;
+    onIsFullScreenChanged?: ({
       event,
       isFullScreen,
       instance,
@@ -689,30 +685,59 @@ export type MaterialReactTableProps<D extends Record<string, any> = {}> =
       isFullScreen: boolean;
       instance: MRT_TableInstance<D>;
     }) => void;
-    onMrtToggleShowFilters?: ({
+    onRowClick?: ({
       event,
-      showFilters,
+      row,
       instance,
     }: {
-      event: MouseEvent<HTMLButtonElement>;
-      showFilters: boolean;
+      event: MouseEvent<HTMLTableRowElement>;
+      row: MRT_Row<D>;
       instance: MRT_TableInstance<D>;
     }) => void;
-    onMrtToggleShowGlobalFilter?: ({
+    onRowSelectAllChanged?: ({
       event,
-      showGlobalFilter,
+      selectedRows,
       instance,
     }: {
-      event: MouseEvent<HTMLButtonElement>;
-      showGlobalFilter: boolean;
+      event: ChangeEvent;
+      selectedRows: MRT_Row<D>[];
+      instance: MRT_TableInstance<D>;
+    }) => void;
+    onRowSelectionChanged?: ({
+      event,
+      row,
+      selectedRows,
+      instance,
+    }: {
+      event: ChangeEvent;
+      row: MRT_Row<D>;
+      selectedRows: MRT_Row<D>[];
       instance: MRT_TableInstance<D>;
     }) => void;
     onShowFiltersChange?: OnChangeFn<boolean>;
+    onShowFiltersChanged?: ({
+      event,
+      instance,
+      showFilters,
+    }: {
+      event: MouseEvent<HTMLButtonElement>;
+      instance: MRT_TableInstance<D>;
+      showFilters: boolean;
+    }) => void;
     onShowGlobalFilterChange?: OnChangeFn<boolean>;
+    onShowGlobalFilterChanged?: ({
+      event,
+      instance,
+      showGlobalFilter,
+    }: {
+      event: MouseEvent<HTMLButtonElement>;
+      instance: MRT_TableInstance<D>;
+      showGlobalFilter: boolean;
+    }) => void;
     persistentStateMode?: 'localStorage' | 'sessionStorage';
     positionActionsColumn?: 'first' | 'last';
-    positionPagination?: 'bottom' | 'top' | 'both';
     positionGlobalFilter?: 'left' | 'right';
+    positionPagination?: 'bottom' | 'top' | 'both';
     positionToolbarActions?: 'bottom' | 'top';
     positionToolbarAlertBanner?: 'bottom' | 'top';
     renderDetailPanel?: ({

package/src/body/MRT_TableBodyCell.tsx

@@ -29,7 +29,7 @@ export const MRT_TableBodyCell: FC<Props> = ({
       enableRowNumbers,
       muiTableBodyCellProps,
       muiTableBodyCellSkeletonProps,
-      onMrtCellClick,
+      onCellClick,
       rowNumberMode,
       tableId,
     },
@@ -130,7 +130,7 @@ export const MRT_TableBodyCell: FC<Props> = ({
   return (
     <TableCell
       onClick={(event: MouseEvent<HTMLTableCellElement>) =>
-        onMrtCellClick?.({ event, cell, instance })
+        onCellClick?.({ event, cell, instance })
       }
       onDoubleClick={handleDoubleClick}
       {...tableCellProps}

package/src/body/MRT_TableBodyRow.tsx

@@ -13,7 +13,7 @@ interface Props {
 export const MRT_TableBodyRow: FC<Props> = ({ row, rowIndex, instance }) => {
   const {
     getIsSomeColumnsPinned,
-    options: { muiTableBodyRowProps, onMrtRowClick, renderDetailPanel },
+    options: { muiTableBodyRowProps, onRowClick, renderDetailPanel },
   } = instance;
 
   const tableRowProps =
@@ -26,7 +26,7 @@ export const MRT_TableBodyRow: FC<Props> = ({ row, rowIndex, instance }) => {
       <TableRow
         hover
         onClick={(event: MouseEvent<HTMLTableRowElement>) =>
-          onMrtRowClick?.({ event, row, instance })
+          onRowClick?.({ event, row, instance })
         }
         selected={row.getIsSelected()}
         {...tableRowProps}

package/src/body/MRT_TableDetailPanel.tsx

@@ -13,7 +13,7 @@ export const MRT_TableDetailPanel: FC<Props> = ({ row, instance }) => {
     options: {
       muiTableBodyRowProps,
       muiTableDetailPanelProps,
-      onMrtDetailPanelClick,
+      onDetailPanelClick,
       renderDetailPanel,
     },
   } = instance;
@@ -33,7 +33,7 @@ export const MRT_TableDetailPanel: FC<Props> = ({ row, instance }) => {
       <TableCell
         colSpan={getVisibleLeafColumns().length}
         onClick={(event: MouseEvent<HTMLTableCellElement>) =>
-          onMrtDetailPanelClick?.({ event, row, instance })
+          onDetailPanelClick?.({ event, row, instance })
         }
         {...tableCellProps}
         sx={{

package/src/buttons/MRT_EditActionButtons.tsx

@@ -13,7 +13,7 @@ export const MRT_EditActionButtons: FC<Props> = ({ row, instance }) => {
     options: {
       icons: { CancelIcon, SaveIcon },
       localization,
-      onMrtEditRowSubmit,
+      onEditRowSubmit,
     },
     setCurrentEditingRow,
   } = instance;
@@ -26,7 +26,7 @@ export const MRT_EditActionButtons: FC<Props> = ({ row, instance }) => {
   };
 
   const handleSave = () => {
-    onMrtEditRowSubmit?.({ row: currentEditingRow ?? row, instance });
+    onEditRowSubmit?.({ row: currentEditingRow ?? row, instance });
     setCurrentEditingRow(null);
   };
 

package/src/buttons/MRT_ExpandButton.tsx

@@ -13,7 +13,7 @@ export const MRT_ExpandButton: FC<Props> = ({ row, instance }) => {
     options: {
       icons: { ExpandMoreIcon },
       localization,
-      onMrtRowExpandChange,
+      onExpandChanged,
       renderDetailPanel,
     },
   } = instance;
@@ -22,7 +22,7 @@ export const MRT_ExpandButton: FC<Props> = ({ row, instance }) => {
 
   const handleToggleExpand = (event: MouseEvent<HTMLButtonElement>) => {
     row.toggleExpanded();
-    onMrtRowExpandChange?.({ event, row, instance });
+    onExpandChanged?.({ event, row, instance });
   };
 
   return (

package/src/buttons/MRT_FullScreenToggleButton.tsx

@@ -15,7 +15,7 @@ export const MRT_FullScreenToggleButton: FC<Props> = ({
     options: {
       icons: { FullscreenExitIcon, FullscreenIcon },
       localization,
-      onMrtToggleFullScreen,
+      onIsFullScreenChanged,
     },
     setIsFullScreen,
   } = instance;
@@ -23,7 +23,7 @@ export const MRT_FullScreenToggleButton: FC<Props> = ({
   const { isFullScreen } = getState();
 
   const handleToggleFullScreen = (event: MouseEvent<HTMLButtonElement>) => {
-    onMrtToggleFullScreen?.({
+    onIsFullScreenChanged?.({
       event,
       isFullScreen: !isFullScreen,
       instance,

package/src/buttons/MRT_ToggleDensePaddingButton.tsx

@@ -15,7 +15,7 @@ export const MRT_ToggleDensePaddingButton: FC<Props> = ({
     options: {
       icons: { DensityMediumIcon, DensitySmallIcon },
       localization,
-      onMrtToggleDensePadding,
+      onIsDensePaddingChanged,
     },
     setIsDensePadding,
   } = instance;
@@ -23,7 +23,7 @@ export const MRT_ToggleDensePaddingButton: FC<Props> = ({
   const { isDensePadding } = getState();
 
   const handleToggleDensePadding = (event: MouseEvent<HTMLButtonElement>) => {
-    onMrtToggleDensePadding?.({
+    onIsDensePaddingChanged?.({
       event,
       isDensePadding: !isDensePadding,
       instance,

package/src/buttons/MRT_ToggleFiltersButton.tsx

@@ -12,7 +12,7 @@ export const MRT_ToggleFiltersButton: FC<Props> = ({ instance, ...rest }) => {
     options: {
       icons: { FilterListIcon, FilterListOffIcon },
       localization,
-      onMrtToggleShowFilters,
+      onShowFiltersChanged,
     },
     setShowFilters,
   } = instance;
@@ -20,7 +20,7 @@ export const MRT_ToggleFiltersButton: FC<Props> = ({ instance, ...rest }) => {
   const { showFilters } = getState();
 
   const handleToggleShowFilters = (event: MouseEvent<HTMLButtonElement>) => {
-    onMrtToggleShowFilters?.({
+    onShowFiltersChanged?.({
       event,
       showFilters: !showFilters,
       instance,

package/src/buttons/MRT_ToggleGlobalFilterButton.tsx

@@ -17,7 +17,7 @@ export const MRT_ToggleGlobalFilterButton: FC<Props> = ({
       tableId,
       localization,
       muiSearchTextFieldProps,
-      onMrtToggleShowGlobalFilter,
+      onShowGlobalFilterChanged,
     },
     setShowGlobalFilter,
   } = instance;
@@ -30,7 +30,7 @@ export const MRT_ToggleGlobalFilterButton: FC<Props> = ({
       : muiSearchTextFieldProps;
 
   const handleToggleSearch = (event: MouseEvent<HTMLButtonElement>) => {
-    onMrtToggleShowGlobalFilter?.({
+    onShowGlobalFilterChanged?.({
       event,
       showGlobalFilter: !showGlobalFilter,
       instance,

package/src/filtersFNs.ts

@@ -4,10 +4,10 @@ import { MRT_Row } from '.';
 export const fuzzy = (
   row: MRT_Row,
   columnId: string,
-  value: string,
+  filterValue: string,
   addMeta: (item: RankingInfo) => void,
 ) => {
-  const itemRank = rankItem(row.getValue(columnId), value, {
+  const itemRank = rankItem(row.getValue(columnId), filterValue, {
     threshold: rankings.MATCHES,
   });
   addMeta(itemRank);

package/src/inputs/MRT_EditCellTextField.tsx

@@ -20,8 +20,8 @@ export const MRT_EditCellTextField: FC<Props> = ({ cell, instance }) => {
       tableId,
       enableEditing,
       muiTableBodyCellEditTextFieldProps,
-      onMrtCellEditBlur,
-      onMrtCellEditChange,
+      onCellEditBlur,
+      onCellEditChanged,
     },
     setCurrentEditingCell,
     setCurrentEditingRow,
@@ -35,8 +35,8 @@ export const MRT_EditCellTextField: FC<Props> = ({ cell, instance }) => {
 
   const handleChange = (event: ChangeEvent<HTMLInputElement>) => {
     setValue(event.target.value);
-    columnDef.onMrtCellEditChange?.({ event, cell, instance });
-    onMrtCellEditChange?.({ event, cell, instance });
+    columnDef.onCellEditChanged?.({ event, cell, instance });
+    onCellEditChanged?.({ event, cell, instance });
   };
 
   const handleBlur = (event: FocusEvent<HTMLInputElement>) => {
@@ -46,8 +46,8 @@ export const MRT_EditCellTextField: FC<Props> = ({ cell, instance }) => {
       setCurrentEditingRow({ ...getState().currentEditingRow } as MRT_Row);
     }
     setCurrentEditingCell(null);
-    columnDef.onMrtCellEditBlur?.({ event, cell, instance });
-    onMrtCellEditBlur?.({ event, cell, instance });
+    columnDef.onCellEditBlur?.({ event, cell, instance });
+    onCellEditBlur?.({ event, cell, instance });
   };
 
   const mTableBodyCellEditTextFieldProps =