material-react-table 0.9.5 → 0.10.0

package/src/MaterialReactTable.tsx

@@ -34,6 +34,7 @@ import {
   FilterFnOption,
   Header,
   HeaderGroup,
+  OnChangeFn,
   Overwrite,
   ReactTableGenerics,
   Row,
@@ -43,9 +44,9 @@ import {
   UseTableInstanceOptions,
   VisibilityState,
 } from '@tanstack/react-table';
+import { Options as VirtualizerOptions } from 'react-virtual';
 import { MRT_Localization, MRT_DefaultLocalization_EN } from './localization';
 import { MRT_Default_Icons, MRT_Icons } from './icons';
-import { MRT_FILTER_OPTION } from './enums';
 import { MRT_TableRoot } from './table/MRT_TableRoot';
 
 export type MRT_TableOptions<D extends Record<string, any> = {}> = Partial<
@@ -119,7 +120,7 @@ export type MRT_TableInstance<D extends Record<string, any> = {}> = Omit<
       [key: string]: MRT_FilterFn;
     }>
   >;
-  setCurrentGlobalFilterFn: Dispatch<SetStateAction<MRT_FilterFn<D>>>;
+  setCurrentGlobalFilterFn: Dispatch<SetStateAction<MRT_FilterFn>>;
   setIsDensePadding: Dispatch<SetStateAction<boolean>>;
   setIsFullScreen: Dispatch<SetStateAction<boolean>>;
   setShowFilters: Dispatch<SetStateAction<boolean>>;
@@ -142,48 +143,61 @@ export type MRT_TableState<D extends Record<string, any> = {}> = TableState & {
 
 export type MRT_ColumnDef<D extends Record<string, any> = {}> = Omit<
   ColumnDef<D>,
-  'accessorFN' | 'header' | 'footer' | 'columns' | 'filterFn'
+  | 'accessorFn'
+  | 'aggregatedCell'
+  | 'header'
+  | 'footer'
+  | 'columns'
+  | 'filterFn'
+  | 'cell'
 > & {
+  AggregatedCell?: ({
+    cell,
+    instance,
+  }: {
+    cell: MRT_Cell<D>;
+    instance: MRT_TableInstance<D>;
+  }) => ReactNode;
   Cell?: ({
     cell,
-    tableInstance,
+    instance,
   }: {
     cell: MRT_Cell<D>;
-    tableInstance: MRT_TableInstance<D>;
+    instance: MRT_TableInstance<D>;
   }) => ReactNode;
   Edit?: ({
     cell,
-    tableInstance,
+    instance,
   }: {
     cell: MRT_Cell<D>;
-    tableInstance: MRT_TableInstance<D>;
+    instance: MRT_TableInstance<D>;
   }) => ReactNode;
   Filter?: ({
     header,
-    tableInstance,
+    instance,
   }: {
     header: MRT_Header<D>;
-    tableInstance: MRT_TableInstance<D>;
+    instance: MRT_TableInstance<D>;
   }) => ReactNode;
   Footer?:
     | ReactNode
     | (({
         footer,
-        tableInstance,
+        instance,
       }: {
         footer: MRT_Header<D>;
-        tableInstance: MRT_TableInstance<D>;
+        instance: MRT_TableInstance<D>;
       }) => ReactNode);
   Header?:
     | ReactNode
     | (({
         header,
-        tableInstance,
+        instance,
       }: {
         header: MRT_Header<D>;
-        tableInstance: MRT_TableInstance<D>;
+        instance: MRT_TableInstance<D>;
       }) => ReactNode);
-  accessorFN?: (row: D) => any;
+  accessorFn?: (row: D) => any;
   columns?: MRT_ColumnDef<D>[];
   enableClickToCopy?: boolean;
   enableColumnActions?: boolean;
@@ -198,83 +212,83 @@ export type MRT_ColumnDef<D extends Record<string, any> = {}> = Omit<
   muiTableBodyCellCopyButtonProps?:
     | ButtonProps
     | (({
-        tableInstance,
+        instance,
         cell,
       }: {
-        tableInstance: MRT_TableInstance;
+        instance: MRT_TableInstance;
         cell: MRT_Cell<D>;
       }) => ButtonProps);
   muiTableBodyCellEditTextFieldProps?:
     | TextFieldProps
     | (({
-        tableInstance,
+        instance,
         cell,
       }: {
-        tableInstance: MRT_TableInstance;
+        instance: MRT_TableInstance;
         cell: MRT_Cell<D>;
       }) => TextFieldProps);
   muiTableBodyCellProps?:
     | TableCellProps
     | (({
-        tableInstance,
+        instance,
         cell,
       }: {
-        tableInstance: MRT_TableInstance;
+        instance: MRT_TableInstance;
         cell: MRT_Cell<D>;
       }) => TableCellProps);
   muiTableFooterCellProps?:
     | TableCellProps
     | (({
-        tableInstance,
+        instance,
         column,
       }: {
-        tableInstance: MRT_TableInstance;
+        instance: MRT_TableInstance;
         column: MRT_Column<D>;
       }) => TableCellProps);
   muiTableHeadCellColumnActionsButtonProps?:
     | IconButtonProps
     | (({
-        tableInstance,
+        instance,
         column,
       }: {
-        tableInstance: MRT_TableInstance;
+        instance: MRT_TableInstance;
         column: MRT_Column<D>;
       }) => IconButtonProps);
   muiTableHeadCellFilterTextFieldProps?:
     | TextFieldProps
     | (({
-        tableInstance,
+        instance,
         column,
       }: {
-        tableInstance: MRT_TableInstance;
+        instance: MRT_TableInstance;
         column: MRT_Column<D>;
       }) => TextFieldProps);
   muiTableHeadCellProps?:
     | TableCellProps
     | (({
-        tableInstance,
+        instance,
         column,
       }: {
-        tableInstance: MRT_TableInstance;
+        instance: MRT_TableInstance;
         column: MRT_Column<D>;
       }) => TableCellProps);
   onMrtCellEditBlur?: ({
     cell,
     event,
-    tableInstance,
+    instance,
   }: {
     event: FocusEvent<HTMLInputElement>;
     cell: MRT_Cell<D>;
-    tableInstance: MRT_TableInstance<D>;
+    instance: MRT_TableInstance<D>;
   }) => void;
   onMrtCellEditChange?: ({
     cell,
     event,
-    tableInstance,
+    instance,
   }: {
     event: ChangeEvent<HTMLInputElement>;
     cell: MRT_Cell<D>;
-    tableInstance: MRT_TableInstance<D>;
+    instance: MRT_TableInstance<D>;
   }) => void;
   onMrtFilterValueChange?: ({
     column,
@@ -330,9 +344,24 @@ export type MRT_Cell<D extends Record<string, any> = {}> = Omit<
   row: MRT_Row<D>;
 };
 
-export type MRT_FilterFn<D extends Record<string, any> = {}> =
+export type MRT_FILTER_OPTION =
+  | 'between'
+  | 'contains'
+  | 'empty'
+  | 'endsWith'
+  | 'equals'
+  | 'fuzzy'
+  | 'greaterThan'
+  | 'greaterThanOrEqual'
+  | 'lessThan'
+  | 'lessThanOrEqual'
+  | 'notEmpty'
+  | 'notEquals'
+  | 'startsWith'
+  | FilterFnOption<TableGenerics>;
+
+export type MRT_FilterFn =
   | FilterFn<TableGenerics>
-  | FilterFnOption<D>
   | MRT_FILTER_OPTION
   | number
   | string
@@ -367,248 +396,218 @@ export type MaterialReactTableProps<D extends Record<string, any> = {}> =
     muiLinearProgressProps?:
       | LinearProgressProps
       | (({
-          tableInstance,
+          instance,
         }: {
-          tableInstance: MRT_TableInstance;
+          instance: MRT_TableInstance;
         }) => LinearProgressProps);
     muiSearchTextFieldProps?:
       | TextFieldProps
-      | (({
-          tableInstance,
-        }: {
-          tableInstance: MRT_TableInstance;
-        }) => TextFieldProps);
+      | (({ instance }: { instance: MRT_TableInstance }) => TextFieldProps);
     muiSelectCheckboxProps?:
       | CheckboxProps
       | (({
-          tableInstance,
+          instance,
           isSelectAll,
           row,
         }: {
-          tableInstance: MRT_TableInstance;
+          instance: MRT_TableInstance;
           isSelectAll: boolean;
           row?: MRT_Row<D>;
         }) => CheckboxProps);
     muiTableBodyCellCopyButtonProps?:
       | ButtonProps
       | (({
-          tableInstance,
+          instance,
           cell,
         }: {
-          tableInstance: MRT_TableInstance;
+          instance: MRT_TableInstance;
           cell: MRT_Cell<D>;
         }) => ButtonProps);
     muiTableBodyCellEditTextFieldProps?:
       | TextFieldProps
       | (({
-          tableInstance,
+          instance,
           cell,
         }: {
-          tableInstance: MRT_TableInstance;
+          instance: MRT_TableInstance;
           cell: MRT_Cell<D>;
         }) => TextFieldProps);
     muiTableBodyCellProps?:
       | TableCellProps
       | (({
-          tableInstance,
+          instance,
           cell,
         }: {
-          tableInstance: MRT_TableInstance;
+          instance: MRT_TableInstance;
           cell: MRT_Cell<D>;
         }) => TableCellProps);
     muiTableBodyCellSkeletonProps?:
       | SkeletonProps
       | (({
-          tableInstance,
+          instance,
           cell,
         }: {
-          tableInstance: MRT_TableInstance;
+          instance: MRT_TableInstance;
           cell: MRT_Cell<D>;
         }) => SkeletonProps);
     muiTableBodyProps?:
       | TableBodyProps
-      | (({
-          tableInstance,
-        }: {
-          tableInstance: MRT_TableInstance;
-        }) => TableBodyProps);
+      | (({ instance }: { instance: MRT_TableInstance }) => TableBodyProps);
     muiTableBodyRowProps?:
       | TableRowProps
       | (({
-          tableInstance,
+          instance,
           row,
         }: {
-          tableInstance: MRT_TableInstance;
+          instance: MRT_TableInstance;
           row: MRT_Row<D>;
         }) => TableRowProps);
     muiTableContainerProps?:
       | TableContainerProps
       | (({
-          tableInstance,
+          instance,
         }: {
-          tableInstance: MRT_TableInstance;
+          instance: MRT_TableInstance;
         }) => TableContainerProps);
     muiTableDetailPanelProps?:
       | TableCellProps
       | (({
-          tableInstance,
+          instance,
           row,
         }: {
-          tableInstance: MRT_TableInstance;
+          instance: MRT_TableInstance;
           row: MRT_Row<D>;
         }) => TableCellProps);
     muiTableFooterCellProps?:
       | TableCellProps
       | (({
-          tableInstance,
+          instance,
           column,
         }: {
-          tableInstance: MRT_TableInstance;
+          instance: MRT_TableInstance;
           column: MRT_Column<D>;
         }) => TableCellProps);
     muiTableFooterProps?:
       | TableFooterProps
-      | (({
-          tableInstance,
-        }: {
-          tableInstance: MRT_TableInstance;
-        }) => TableFooterProps);
+      | (({ instance }: { instance: MRT_TableInstance }) => TableFooterProps);
     muiTableFooterRowProps?:
       | TableRowProps
       | (({
-          tableInstance,
+          instance,
           footerGroup,
         }: {
-          tableInstance: MRT_TableInstance;
+          instance: MRT_TableInstance;
           footerGroup: MRT_HeaderGroup<D>;
         }) => TableRowProps);
     muiTableHeadCellColumnActionsButtonProps?:
       | IconButtonProps
       | (({
-          tableInstance,
+          instance,
           column,
         }: {
-          tableInstance: MRT_TableInstance;
+          instance: MRT_TableInstance;
           column: MRT_Column<D>;
         }) => IconButtonProps);
     muiTableHeadCellFilterTextFieldProps?:
       | TextFieldProps
       | (({
-          tableInstance,
+          instance,
           column,
         }: {
-          tableInstance: MRT_TableInstance;
+          instance: MRT_TableInstance;
           column: MRT_Column<D>;
         }) => TextFieldProps);
     muiTableHeadCellProps?:
       | TableCellProps
       | (({
-          tableInstance,
+          instance,
           column,
         }: {
-          tableInstance: MRT_TableInstance;
+          instance: MRT_TableInstance;
           column: MRT_Column<D>;
         }) => TableCellProps);
     muiTableHeadProps?:
       | TableHeadProps
-      | (({
-          tableInstance,
-        }: {
-          tableInstance: MRT_TableInstance;
-        }) => TableHeadProps);
+      | (({ instance }: { instance: MRT_TableInstance }) => TableHeadProps);
     muiTableHeadRowProps?:
       | TableRowProps
       | (({
-          tableInstance,
+          instance,
           headerGroup,
         }: {
-          tableInstance: MRT_TableInstance;
+          instance: MRT_TableInstance;
           headerGroup: MRT_HeaderGroup<D>;
         }) => TableRowProps);
     muiTablePaginationProps?:
       | Partial<TablePaginationProps>
       | (({
-          tableInstance,
+          instance,
         }: {
-          tableInstance: MRT_TableInstance;
+          instance: MRT_TableInstance;
         }) => Partial<TablePaginationProps>);
     muiTablePaperProps?:
       | PaperProps
-      | (({
-          tableInstance,
-        }: {
-          tableInstance: MRT_TableInstance;
-        }) => PaperProps);
+      | (({ instance }: { instance: MRT_TableInstance }) => PaperProps);
     muiTableProps?:
       | TableProps
-      | (({
-          tableInstance,
-        }: {
-          tableInstance: MRT_TableInstance;
-        }) => TableProps);
+      | (({ instance }: { instance: MRT_TableInstance }) => TableProps);
     muiTableToolbarAlertBannerProps?:
       | AlertProps
-      | (({
-          tableInstance,
-        }: {
-          tableInstance: MRT_TableInstance;
-        }) => AlertProps);
+      | (({ instance }: { instance: MRT_TableInstance }) => AlertProps);
     muiTableToolbarBottomProps?:
       | ToolbarProps
-      | (({
-          tableInstance,
-        }: {
-          tableInstance: MRT_TableInstance;
-        }) => ToolbarProps);
+      | (({ instance }: { instance: MRT_TableInstance }) => ToolbarProps);
     muiTableToolbarTopProps?:
       | ToolbarProps
-      | (({
-          tableInstance,
-        }: {
-          tableInstance: MRT_TableInstance;
-        }) => 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?: ({
       cell,
       event,
-      tableInstance,
+      instance,
     }: {
       cell: MRT_Cell<D>;
-      tableInstance: MRT_TableInstance<D>;
+      instance: MRT_TableInstance<D>;
       event: MouseEvent<HTMLTableCellElement>;
     }) => void;
     onMrtCellEditBlur?: ({
       cell,
       event,
-      tableInstance,
+      instance,
     }: {
       event: FocusEvent<HTMLInputElement>;
       cell: MRT_Cell<D>;
-      tableInstance: MRT_TableInstance<D>;
+      instance: MRT_TableInstance<D>;
     }) => void;
     onMrtCellEditChange?: ({
       cell,
       event,
-      tableInstance,
+      instance,
     }: {
       event: ChangeEvent<HTMLInputElement>;
       cell: MRT_Cell<D>;
-      tableInstance: MRT_TableInstance<D>;
+      instance: MRT_TableInstance<D>;
     }) => void;
     onMrtDetailPanelClick?: ({
       event,
       row,
-      tableInstance,
+      instance,
     }: {
       event: MouseEvent<HTMLTableCellElement>;
       row: MRT_Row<D>;
-      tableInstance: MRT_TableInstance<D>;
+      instance: MRT_TableInstance<D>;
     }) => void;
     onMrtEditRowSubmit?: ({
       row,
-      tableInstance,
+      instance,
     }: {
       row: MRT_Row<D>;
-      tableInstance: MRT_TableInstance<D>;
+      instance: MRT_TableInstance<D>;
     }) => Promise<void> | void;
     onMrtFilterValueChange?: ({
       column,
@@ -621,19 +620,19 @@ export type MaterialReactTableProps<D extends Record<string, any> = {}> =
     }) => void;
     onMrtGlobalFilterValueChange?: ({
       event,
-      tableInstance,
+      instance,
     }: {
       event: ChangeEvent<HTMLInputElement>;
-      tableInstance: MRT_TableInstance<D>;
+      instance: MRT_TableInstance<D>;
     }) => void;
     onMrtRowClick?: ({
       event,
       row,
-      tableInstance,
+      instance,
     }: {
       event: MouseEvent<HTMLTableRowElement>;
       row: MRT_Row<D>;
-      tableInstance: MRT_TableInstance<D>;
+      instance: MRT_TableInstance<D>;
     }) => void;
     onMrtRowExpandChange?: ({
       event,
@@ -641,73 +640,75 @@ export type MaterialReactTableProps<D extends Record<string, any> = {}> =
     }: {
       event: MouseEvent<HTMLButtonElement>;
       row: MRT_Row<D>;
-      tableInstance: MRT_TableInstance<D>;
+      instance: MRT_TableInstance<D>;
     }) => void;
     onMrtSelectAllChange?: ({
       event,
       selectedRows,
-      tableInstance,
+      instance,
     }: {
       event: ChangeEvent;
       selectedRows: MRT_Row<D>[];
-      tableInstance: MRT_TableInstance<D>;
+      instance: MRT_TableInstance<D>;
     }) => void;
     onMrtSelectRowChange?: ({
       event,
       row,
       selectedRows,
-      tableInstance,
+      instance,
     }: {
       event: ChangeEvent;
       row: MRT_Row<D>;
       selectedRows: MRT_Row<D>[];
-      tableInstance: MRT_TableInstance<D>;
+      instance: MRT_TableInstance<D>;
     }) => void;
     onMrtToggleColumnVisibility?: ({
       column,
       columnVisibility,
-      tableInstance,
+      instance,
     }: {
       column: MRT_Column<D>;
       columnVisibility: VisibilityState;
-      tableInstance: MRT_TableInstance<D>;
+      instance: MRT_TableInstance<D>;
     }) => void;
     onMrtToggleDensePadding?: ({
       event,
       isDensePadding,
-      tableInstance,
+      instance,
     }: {
       event: MouseEvent<HTMLButtonElement>;
       isDensePadding: boolean;
-      tableInstance: MRT_TableInstance<D>;
+      instance: MRT_TableInstance<D>;
     }) => void;
     onMrtToggleFullScreen?: ({
       event,
       isFullScreen,
-      tableInstance,
+      instance,
     }: {
       event: MouseEvent<HTMLButtonElement>;
       isFullScreen: boolean;
-      tableInstance: MRT_TableInstance<D>;
+      instance: MRT_TableInstance<D>;
     }) => void;
     onMrtToggleShowFilters?: ({
       event,
       showFilters,
-      tableInstance,
+      instance,
     }: {
       event: MouseEvent<HTMLButtonElement>;
       showFilters: boolean;
-      tableInstance: MRT_TableInstance<D>;
+      instance: MRT_TableInstance<D>;
     }) => void;
     onMrtToggleShowGlobalFilter?: ({
       event,
       showGlobalFilter,
-      tableInstance,
+      instance,
     }: {
       event: MouseEvent<HTMLButtonElement>;
       showGlobalFilter: boolean;
-      tableInstance: MRT_TableInstance<D>;
+      instance: MRT_TableInstance<D>;
     }) => void;
+    onShowFiltersChange?: OnChangeFn<boolean>;
+    onShowGlobalFilterChange?: OnChangeFn<boolean>;
     persistentStateMode?: 'localStorage' | 'sessionStorage';
     positionActionsColumn?: 'first' | 'last';
     positionPagination?: 'bottom' | 'top' | 'both';
@@ -716,66 +717,67 @@ export type MaterialReactTableProps<D extends Record<string, any> = {}> =
     positionToolbarAlertBanner?: 'bottom' | 'top';
     renderDetailPanel?: ({
       row,
-      tableInstance,
+      instance,
     }: {
       row: MRT_Row<D>;
-      tableInstance: MRT_TableInstance<D>;
+      instance: MRT_TableInstance<D>;
     }) => ReactNode;
     renderRowActionMenuItems?: ({
       closeMenu,
       row,
-      tableInstance,
+      instance,
     }: {
       closeMenu: () => void;
       row: MRT_Row<D>;
-      tableInstance: MRT_TableInstance<D>;
+      instance: MRT_TableInstance<D>;
     }) => ReactNode[];
     renderRowActions?: ({
       row,
-      tableInstance,
+      instance,
     }: {
       row: MRT_Row<D>;
-      tableInstance: MRT_TableInstance<D>;
+      instance: MRT_TableInstance<D>;
     }) => ReactNode;
     renderToolbarCustomActions?: ({
-      tableInstance,
+      instance,
     }: {
-      tableInstance: MRT_TableInstance<D>;
+      instance: MRT_TableInstance<D>;
     }) => ReactNode;
     renderToolbarInternalActions?: ({
-      tableInstance,
+      instance,
       MRT_ToggleGlobalFilterButton,
       MRT_ToggleFiltersButton,
       MRT_ShowHideColumnsButton,
       MRT_ToggleDensePaddingButton,
       MRT_FullScreenToggleButton,
     }: {
-      tableInstance: MRT_TableInstance<D>;
+      instance: MRT_TableInstance<D>;
       MRT_ToggleGlobalFilterButton: FC<
-        IconButtonProps & { tableInstance: MRT_TableInstance<D> }
+        IconButtonProps & { instance: MRT_TableInstance<D> }
       >;
       MRT_ToggleFiltersButton: FC<
-        IconButtonProps & { tableInstance: MRT_TableInstance<D> }
+        IconButtonProps & { instance: MRT_TableInstance<D> }
       >;
       MRT_ShowHideColumnsButton: FC<
-        IconButtonProps & { tableInstance: MRT_TableInstance<D> }
+        IconButtonProps & { instance: MRT_TableInstance<D> }
       >;
       MRT_ToggleDensePaddingButton: FC<
-        IconButtonProps & { tableInstance: MRT_TableInstance<D> }
+        IconButtonProps & { instance: MRT_TableInstance<D> }
       >;
       MRT_FullScreenToggleButton: FC<
-        IconButtonProps & { tableInstance: MRT_TableInstance<D> }
+        IconButtonProps & { instance: MRT_TableInstance<D> }
       >;
     }) => ReactNode;
     rowNumberMode?: 'original' | 'static';
     selectAllMode?: 'all' | 'page';
     tableId?: string;
+    virtualizerProps?: VirtualizerOptions<HTMLDivElement>;
   };
 
 export default <D extends Record<string, any> = {}>({
   autoResetExpanded = false,
   columnResizeMode = 'onEnd',
-  defaultColumn = { minSize: 30, maxSize: 1000, size: 180 },
+  defaultColumn = { minSize: 40, maxSize: 1000, size: 180 },
   editingMode = 'row',
   enableColumnActions = true,
   enableColumnFilters = true,
@@ -793,7 +795,7 @@ export default <D extends Record<string, any> = {}>({
   enablePinning = false,
   enableSelectAll = true,
   enableSorting = true,
-  enableStickyHeader = true,
+  enableStickyHeader = false,
   enableTableFooter = true,
   enableTableHead = true,
   enableToolbarBottom = true,