material-react-table 0.17.0 → 0.18.1

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "0.17.0",
+  "version": "0.18.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.",

package/src/MaterialReactTable.tsx

@@ -3,7 +3,6 @@ import React, {
   Dispatch,
   FC,
   FocusEvent,
-  MouseEvent,
   ReactNode,
   SetStateAction,
 } from 'react';
@@ -30,8 +29,6 @@ import {
   Cell,
   Column,
   ColumnDef,
-  ColumnOrderState,
-  ColumnPinningState,
   FilterFn,
   FilterFnOption,
   Header,
@@ -46,7 +43,6 @@ import {
   TableInstance,
   TableState,
   UseTableInstanceOptions,
-  VisibilityState,
 } from '@tanstack/react-table';
 import { Options as VirtualizerOptions } from 'react-virtual';
 import { MRT_Localization, MRT_DefaultLocalization_EN } from './localization';
@@ -128,6 +124,7 @@ export type MRT_TableInstance<D extends Record<string, any> = {}> = Omit<
   setCurrentGlobalFilterFn: Dispatch<SetStateAction<MRT_FilterFn>>;
   setDensity: Dispatch<SetStateAction<'comfortable' | 'compact' | 'spacious'>>;
   setIsFullScreen: Dispatch<SetStateAction<boolean>>;
+  setShowAlertBanner: Dispatch<SetStateAction<boolean>>;
   setShowFilters: Dispatch<SetStateAction<boolean>>;
   setShowGlobalFilter: Dispatch<SetStateAction<boolean>>;
 };
@@ -140,6 +137,7 @@ export type MRT_TableState<D extends Record<string, any> = {}> = TableState & {
   density: 'comfortable' | 'compact' | 'spacious';
   isLoading: boolean;
   isFullScreen: boolean;
+  showAlertBanner: boolean;
   showFilters: boolean;
   showGlobalFilter: boolean;
   showProgressBars: boolean;
@@ -288,7 +286,7 @@ export type MRT_ColumnDef<D extends Record<string, any> = {}> = Omit<
     cell: MRT_Cell<D>;
     instance: MRT_TableInstance<D>;
   }) => void;
-  onCellEditChanged?: ({
+  onCellEditChange?: ({
     cell,
     event,
     instance,
@@ -297,28 +295,6 @@ export type MRT_ColumnDef<D extends Record<string, any> = {}> = Omit<
     cell: MRT_Cell<D>;
     instance: MRT_TableInstance<D>;
   }) => void;
-  onColumnFilterValueChanged?: ({
-    column,
-    event,
-    filterValue,
-    instance,
-  }: {
-    column: MRT_Column<D>;
-    event: ChangeEvent<HTMLInputElement>;
-    filterValue: any;
-    instance: MRT_TableInstance<D>;
-  }) => void;
-  onColumnFilterValueChangedDebounced?: ({
-    column,
-    event,
-    filterValue,
-    instance,
-  }: {
-    column: MRT_Column<D>;
-    event: ChangeEvent<HTMLInputElement>;
-    filterValue: any;
-    instance: MRT_TableInstance<D>;
-  }) => void;
   sortingFn?: MRT_SortingFn;
 };
 
@@ -598,15 +574,6 @@ export type MaterialReactTableProps<D extends Record<string, any> = {}> =
     muiTableToolbarTopProps?:
       | ToolbarProps
       | (({ instance }: { instance: MRT_TableInstance<D> }) => ToolbarProps);
-    onCellClick?: ({
-      cell,
-      event,
-      instance,
-    }: {
-      cell: MRT_Cell<D>;
-      instance: MRT_TableInstance<D>;
-      event: MouseEvent<HTMLTableCellElement>;
-    }) => void;
     onCellEditBlur?: ({
       cell,
       event,
@@ -616,7 +583,7 @@ export type MaterialReactTableProps<D extends Record<string, any> = {}> =
       cell: MRT_Cell<D>;
       instance: MRT_TableInstance<D>;
     }) => void;
-    onCellEditChanged?: ({
+    onCellEditChange?: ({
       cell,
       event,
       instance,
@@ -625,64 +592,10 @@ export type MaterialReactTableProps<D extends Record<string, any> = {}> =
       cell: MRT_Cell<D>;
       instance: MRT_TableInstance<D>;
     }) => void;
-    onColumnFilterValueChanged?: ({
-      column,
-      event,
-      filterValue,
-      instance,
-    }: {
-      column: MRT_Column<D>;
-      event: ChangeEvent<HTMLInputElement>;
-      filterValue: any;
-      instance: MRT_TableInstance<D>;
-    }) => void;
-    onColumnFilterValueChangedDebounced?: ({
-      column,
-      event,
-      filterValue,
-      instance,
-    }: {
-      column: MRT_Column<D>;
-      event: ChangeEvent<HTMLInputElement>;
-      filterValue: any;
-      instance: MRT_TableInstance<D>;
-    }) => void;
-    onColumnOrderChanged?: ({
-      columnOrder,
-      instance,
-    }: {
-      columnOrder: ColumnOrderState;
-      instance: MRT_TableInstance<D>;
-    }) => void;
-    onColumnPinningChanged?: ({
-      columnPinning,
-      instance,
-    }: {
-      columnPinning: ColumnPinningState;
-      instance: MRT_TableInstance<D>;
-    }) => void;
-    onColumnVisibilityChanged?: ({
-      column,
-      columnVisibility,
-      instance,
-    }: {
-      column: MRT_Column<D>;
-      columnVisibility: VisibilityState;
-      instance: MRT_TableInstance<D>;
-    }) => void;
     onCurrentEditingCellChange?: OnChangeFn<MRT_Cell>;
     onCurrentEditingRowChange?: OnChangeFn<MRT_Row>;
     onCurrentFilterFnsChange?: OnChangeFn<{ [key: string]: MRT_FilterFn }>;
     onCurrentGlobalFilterFnChange?: OnChangeFn<MRT_FilterFn>;
-    onDetailPanelClick?: ({
-      event,
-      row,
-      instance,
-    }: {
-      event: MouseEvent<HTMLTableCellElement>;
-      row: MRT_Row<D>;
-      instance: MRT_TableInstance<D>;
-    }) => void;
     onEditRowSubmit?: ({
       row,
       instance,
@@ -690,97 +603,11 @@ export type MaterialReactTableProps<D extends Record<string, any> = {}> =
       row: MRT_Row<D>;
       instance: MRT_TableInstance<D>;
     }) => Promise<void> | void;
-    onExpandChanged?: ({
-      event,
-      row,
-    }: {
-      event: MouseEvent<HTMLButtonElement>;
-      row: MRT_Row<D>;
-      instance: MRT_TableInstance<D>;
-    }) => void;
-    onGlobalFilterValueChanged?: ({
-      event,
-      instance,
-    }: {
-      event: ChangeEvent<HTMLInputElement>;
-      instance: MRT_TableInstance<D>;
-    }) => void;
-    onGlobalFilterValueChangedDebounced?: ({
-      event,
-      instance,
-    }: {
-      event: ChangeEvent<HTMLInputElement>;
-      instance: MRT_TableInstance<D>;
-    }) => void;
     onDensityChange?: OnChangeFn<boolean>;
-    onDensityChanged?: ({
-      event,
-      density,
-      instance,
-    }: {
-      event: MouseEvent<HTMLButtonElement>;
-      density: 'comfortable' | 'compact' | 'spacious';
-      instance: MRT_TableInstance<D>;
-    }) => void;
     onIsFullScreenChange?: OnChangeFn<boolean>;
-    onIsFullScreenChanged?: ({
-      event,
-      isFullScreen,
-      instance,
-    }: {
-      event: MouseEvent<HTMLButtonElement>;
-      isFullScreen: boolean;
-      instance: MRT_TableInstance<D>;
-    }) => void;
-    onRowClick?: ({
-      event,
-      row,
-      instance,
-    }: {
-      event: MouseEvent<HTMLTableRowElement>;
-      row: MRT_Row<D>;
-      instance: MRT_TableInstance<D>;
-    }) => void;
-    onRowSelectAllChanged?: ({
-      event,
-      selectedRows,
-      instance,
-    }: {
-      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;
+    onShowAlertBannerChange?: OnChangeFn<boolean>;
     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;
     positionActionsColumn?: 'first' | 'last';
     positionGlobalFilter?: 'left' | 'right';
     positionPagination?: 'bottom' | 'top' | 'both';

package/src/body/MRT_TableBodyCell.tsx

@@ -29,8 +29,6 @@ export const MRT_TableBodyCell: FC<Props> = ({
       enableRowNumbers,
       muiTableBodyCellProps,
       muiTableBodyCellSkeletonProps,
-      onCellClick,
-      onRowClick,
       rowNumberMode,
       tableId,
     },
@@ -132,9 +130,6 @@ export const MRT_TableBodyCell: FC<Props> = ({
 
   return (
     <TableCell
-      onClick={(event: MouseEvent<HTMLTableCellElement>) =>
-        onCellClick?.({ event, cell, instance })
-      }
       onDoubleClick={handleDoubleClick}
       {...tableCellProps}
       ref={
@@ -149,10 +144,7 @@ export const MRT_TableBodyCell: FC<Props> = ({
           : getIsFirstRightPinnedColumn()
           ? `-4px 0 4px -2px ${alpha(theme.palette.common.black, 0.1)}`
           : undefined,
-        cursor:
-          (isEditable && editingMode === 'cell') || onRowClick || onCellClick
-            ? 'pointer'
-            : 'text',
+        cursor: isEditable && editingMode === 'cell' ? 'pointer' : 'text',
         left:
           column.getIsPinned() === 'left'
             ? `${column.getStart('left')}px`

package/src/body/MRT_TableBodyRow.tsx

@@ -1,4 +1,4 @@
-import React, { FC, MouseEvent } from 'react';
+import React, { FC } from 'react';
 import { darken, lighten, TableRow } from '@mui/material';
 import { MRT_TableBodyCell } from './MRT_TableBodyCell';
 import { MRT_TableDetailPanel } from './MRT_TableDetailPanel';
@@ -13,7 +13,7 @@ interface Props {
 export const MRT_TableBodyRow: FC<Props> = ({ row, rowIndex, instance }) => {
   const {
     getIsSomeColumnsPinned,
-    options: { muiTableBodyRowProps, onRowClick, renderDetailPanel },
+    options: { muiTableBodyRowProps, renderDetailPanel },
   } = instance;
 
   const tableRowProps =
@@ -25,9 +25,6 @@ export const MRT_TableBodyRow: FC<Props> = ({ row, rowIndex, instance }) => {
     <>
       <TableRow
         hover
-        onClick={(event: MouseEvent<HTMLTableRowElement>) =>
-          onRowClick?.({ event, row, instance })
-        }
         selected={row.getIsSelected()}
         {...tableRowProps}
         sx={(theme) => ({

package/src/body/MRT_TableDetailPanel.tsx

@@ -1,4 +1,4 @@
-import React, { FC, MouseEvent } from 'react';
+import React, { FC } from 'react';
 import { Collapse, TableCell, TableRow } from '@mui/material';
 import type { MRT_Row, MRT_TableInstance } from '..';
 
@@ -13,7 +13,6 @@ export const MRT_TableDetailPanel: FC<Props> = ({ row, instance }) => {
     options: {
       muiTableBodyRowProps,
       muiTableDetailPanelProps,
-      onDetailPanelClick,
       renderDetailPanel,
     },
   } = instance;
@@ -32,9 +31,6 @@ export const MRT_TableDetailPanel: FC<Props> = ({ row, instance }) => {
     <TableRow {...tableRowProps}>
       <TableCell
         colSpan={getVisibleLeafColumns().length}
-        onClick={(event: MouseEvent<HTMLTableCellElement>) =>
-          onDetailPanelClick?.({ event, row, instance })
-        }
         {...tableCellProps}
         sx={{
           borderBottom: !row.getIsExpanded() ? 'none' : undefined,

package/src/buttons/MRT_ExpandButton.tsx

@@ -1,4 +1,4 @@
-import React, { FC, MouseEvent } from 'react';
+import React, { FC } from 'react';
 import { IconButton, Tooltip } from '@mui/material';
 import type { MRT_Row, MRT_TableInstance } from '..';
 
@@ -14,7 +14,6 @@ export const MRT_ExpandButton: FC<Props> = ({ row, instance }) => {
       icons: { ExpandMoreIcon },
       localization,
       muiExpandButtonProps,
-      onExpandChanged,
       renderDetailPanel,
     },
   } = instance;
@@ -26,9 +25,8 @@ export const MRT_ExpandButton: FC<Props> = ({ row, instance }) => {
       ? muiExpandButtonProps({ instance, row })
       : muiExpandButtonProps;
 
-  const handleToggleExpand = (event: MouseEvent<HTMLButtonElement>) => {
+  const handleToggleExpand = () => {
     row.toggleExpanded();
-    onExpandChanged?.({ event, row, instance });
   };
 
   return (

package/src/buttons/MRT_FullScreenToggleButton.tsx

@@ -1,4 +1,4 @@
-import React, { FC, MouseEvent } from 'react';
+import React, { FC } from 'react';
 import { IconButton, IconButtonProps, Tooltip } from '@mui/material';
 import { MRT_TableInstance } from '..';
 
@@ -15,19 +15,13 @@ export const MRT_FullScreenToggleButton: FC<Props> = ({
     options: {
       icons: { FullscreenExitIcon, FullscreenIcon },
       localization,
-      onIsFullScreenChanged,
     },
     setIsFullScreen,
   } = instance;
 
   const { isFullScreen } = getState();
 
-  const handleToggleFullScreen = (event: MouseEvent<HTMLButtonElement>) => {
-    onIsFullScreenChanged?.({
-      event,
-      isFullScreen: !isFullScreen,
-      instance,
-    });
+  const handleToggleFullScreen = () => {
     setIsFullScreen(!isFullScreen);
   };
 

package/src/buttons/MRT_ToggleDensePaddingButton.tsx

@@ -1,4 +1,4 @@
-import React, { FC, MouseEvent } from 'react';
+import React, { FC } from 'react';
 import { IconButton, IconButtonProps, Tooltip } from '@mui/material';
 import { MRT_TableInstance } from '..';
 
@@ -15,25 +15,19 @@ export const MRT_ToggleDensePaddingButton: FC<Props> = ({
     options: {
       icons: { DensityLargeIcon, DensityMediumIcon, DensitySmallIcon },
       localization,
-      onDensityChanged,
     },
     setDensity,
   } = instance;
 
   const { density } = getState();
 
-  const handleToggleDensePadding = (event: MouseEvent<HTMLButtonElement>) => {
+  const handleToggleDensePadding = () => {
     const nextDensity =
       density === 'comfortable'
         ? 'compact'
         : density === 'compact'
         ? 'spacious'
         : 'comfortable';
-    onDensityChanged?.({
-      event,
-      density: nextDensity,
-      instance,
-    });
     setDensity(nextDensity);
   };
 

package/src/buttons/MRT_ToggleFiltersButton.tsx

@@ -1,4 +1,4 @@
-import React, { FC, MouseEvent } from 'react';
+import React, { FC } from 'react';
 import { IconButton, IconButtonProps, Tooltip } from '@mui/material';
 import { MRT_TableInstance } from '..';
 
@@ -12,19 +12,13 @@ export const MRT_ToggleFiltersButton: FC<Props> = ({ instance, ...rest }) => {
     options: {
       icons: { FilterListIcon, FilterListOffIcon },
       localization,
-      onShowFiltersChanged,
     },
     setShowFilters,
   } = instance;
 
   const { showFilters } = getState();
 
-  const handleToggleShowFilters = (event: MouseEvent<HTMLButtonElement>) => {
-    onShowFiltersChanged?.({
-      event,
-      showFilters: !showFilters,
-      instance,
-    });
+  const handleToggleShowFilters = () => {
     setShowFilters(!showFilters);
   };
 

package/src/buttons/MRT_ToggleGlobalFilterButton.tsx

@@ -1,4 +1,4 @@
-import React, { FC, MouseEvent } from 'react';
+import React, { FC } from 'react';
 import { IconButton, IconButtonProps, Tooltip } from '@mui/material';
 import { MRT_TableInstance } from '..';
 
@@ -17,7 +17,6 @@ export const MRT_ToggleGlobalFilterButton: FC<Props> = ({
       tableId,
       localization,
       muiSearchTextFieldProps,
-      onShowGlobalFilterChanged,
     },
     setShowGlobalFilter,
   } = instance;
@@ -29,12 +28,7 @@ export const MRT_ToggleGlobalFilterButton: FC<Props> = ({
       ? muiSearchTextFieldProps({ instance })
       : muiSearchTextFieldProps;
 
-  const handleToggleSearch = (event: MouseEvent<HTMLButtonElement>) => {
-    onShowGlobalFilterChanged?.({
-      event,
-      showGlobalFilter: !showGlobalFilter,
-      instance,
-    });
+  const handleToggleSearch = () => {
     setShowGlobalFilter(!showGlobalFilter);
     setTimeout(
       () =>

package/src/head/MRT_TableHeadCellResizeHandle.tsx

@@ -13,7 +13,7 @@ export const MRT_TableHeadCellResizeHandle: FC<Props> = ({
 }) => {
   const { getState } = instance;
 
-  const { showFilters } = getState();
+  const { density, showFilters } = getState();
 
   const { column } = header;
 
@@ -29,13 +29,14 @@ export const MRT_TableHeadCellResizeHandle: FC<Props> = ({
         borderRightWidth: '2px',
         cursor: 'col-resize',
         height: showFilters && columnDefType === 'data' ? '4rem' : '2rem',
+        mr: density === 'compact' ? '-0.5rem' : '-1rem',
         opacity: 0.8,
         position: 'absolute',
-        mr: '-1rem',
         right: '1px',
         touchAction: 'none',
         transition: column.getIsResizing() ? undefined : 'all 0.2s ease-in-out',
         userSelect: 'none',
+        zIndex: 4,
         '&:active': {
           backgroundColor: theme.palette.info.main,
           opacity: 1,

package/src/inputs/MRT_EditCellTextField.tsx

@@ -21,7 +21,7 @@ export const MRT_EditCellTextField: FC<Props> = ({ cell, instance }) => {
       enableEditing,
       muiTableBodyCellEditTextFieldProps,
       onCellEditBlur,
-      onCellEditChanged,
+      onCellEditChange,
     },
     setCurrentEditingCell,
     setCurrentEditingRow,
@@ -35,8 +35,8 @@ export const MRT_EditCellTextField: FC<Props> = ({ cell, instance }) => {
 
   const handleChange = (event: ChangeEvent<HTMLInputElement>) => {
     setValue(event.target.value);
-    columnDef.onCellEditChanged?.({ event, cell, instance });
-    onCellEditChanged?.({ event, cell, instance });
+    columnDef.onCellEditChange?.({ event, cell, instance });
+    onCellEditChange?.({ event, cell, instance });
   };
 
   const handleBlur = (event: FocusEvent<HTMLInputElement>) => {

package/src/inputs/MRT_FilterTextField.tsx

@@ -37,8 +37,6 @@ export const MRT_FilterTextField: FC<Props> = ({
       icons: { FilterListIcon, CloseIcon },
       localization,
       muiTableHeadCellFilterTextFieldProps,
-      onColumnFilterValueChanged,
-      onColumnFilterValueChangedDebounced,
       tableId,
     },
     setCurrentFilterFns,
@@ -87,18 +85,6 @@ export const MRT_FilterTextField: FC<Props> = ({
       } else {
         column.setFilterValue(event.target.value ?? undefined);
       }
-      onColumnFilterValueChangedDebounced?.({
-        column,
-        event,
-        filterValue: event.target.value,
-        instance,
-      });
-      columnDef.onColumnFilterValueChangedDebounced?.({
-        column,
-        event,
-        filterValue: event.target.value,
-        instance,
-      });
     }, 200),
     [],
   );
@@ -106,18 +92,6 @@ export const MRT_FilterTextField: FC<Props> = ({
   const handleChange = (event: ChangeEvent<HTMLInputElement>) => {
     setFilterValue(event.target.value);
     handleChangeDebounced(event);
-    onColumnFilterValueChanged?.({
-      column,
-      event,
-      filterValue: event.target.value,
-      instance,
-    });
-    columnDef.onColumnFilterValueChanged?.({
-      column,
-      event,
-      filterValue: event.target.value,
-      instance,
-    });
   };
 
   const handleFilterMenuOpen = (event: MouseEvent<HTMLElement>) => {

package/src/inputs/MRT_GlobalFilterTextField.tsx

@@ -29,8 +29,6 @@ export const MRT_GlobalFilterTextField: FC<Props> = ({ instance }) => {
       icons: { SearchIcon, CloseIcon },
       localization,
       muiSearchTextFieldProps,
-      onGlobalFilterValueChanged,
-      onGlobalFilterValueChangedDebounced,
       tableId,
     },
   } = instance;
@@ -43,7 +41,6 @@ export const MRT_GlobalFilterTextField: FC<Props> = ({ instance }) => {
   const handleChangeDebounced = useCallback(
     debounce((event: ChangeEvent<HTMLInputElement>) => {
       setGlobalFilter(event.target.value ?? undefined);
-      onGlobalFilterValueChangedDebounced?.({ event, instance });
     }, 250),
     [],
   );
@@ -51,7 +48,6 @@ export const MRT_GlobalFilterTextField: FC<Props> = ({ instance }) => {
   const handleChange = (event: ChangeEvent<HTMLInputElement>) => {
     setSearchValue(event.target.value);
     handleChangeDebounced(event);
-    onGlobalFilterValueChanged?.({ event, instance });
   };
 
   const handleGlobalFilterMenuOpen = (event: MouseEvent<HTMLElement>) => {

package/src/inputs/MRT_SelectCheckbox.tsx

@@ -10,16 +10,11 @@ interface Props {
 
 export const MRT_SelectCheckbox: FC<Props> = ({ row, selectAll, instance }) => {
   const {
-    getRowModel,
-    getPaginationRowModel,
-    getSelectedRowModel,
     getState,
     options: {
       localization,
       muiSelectCheckboxProps,
       muiSelectAllCheckboxProps,
-      onRowSelectionChanged,
-      onRowSelectAllChanged,
       selectAllMode,
     },
   } = instance;
@@ -33,27 +28,8 @@ export const MRT_SelectCheckbox: FC<Props> = ({ row, selectAll, instance }) => {
       } else if (selectAllMode === 'page') {
         instance.getToggleAllPageRowsSelectedHandler()(event as any);
       }
-      onRowSelectAllChanged?.({
-        event,
-        selectedRows: event.target.checked
-          ? selectAllMode === 'all'
-            ? getRowModel().flatRows
-            : getPaginationRowModel().flatRows
-          : [],
-        instance,
-      });
     } else if (row) {
       row?.getToggleSelectedHandler()(event as any);
-      onRowSelectionChanged?.({
-        event,
-        row,
-        selectedRows: event.target.checked
-          ? [...getSelectedRowModel().flatRows, row]
-          : getSelectedRowModel().flatRows.filter(
-              (selectedRow) => selectedRow.id !== row.id,
-            ),
-        instance,
-      });
     }
   };