material-react-table 0.40.10 → 0.41.0

package/dist/index.d.ts

@@ -423,7 +423,8 @@ declare type MRT_ColumnDef<TData extends Record<string, any> = {}> = Omit<Column
     }) => ReactNode[];
     sortingFn?: MRT_SortingFn;
 };
-declare type MRT_DefinedColumnDef<TData extends Record<string, any> = {}> = Omit<MRT_ColumnDef<TData>, 'id'> & {
+declare type MRT_DefinedColumnDef<TData extends Record<string, any> = {}> = Omit<MRT_ColumnDef<TData>, 'id' | 'defaultDisplayColumn'> & {
+    defaultDisplayColumn: Partial<MRT_ColumnDef<TData>>;
     id: string;
     _filterFn: MRT_FilterOption;
 };
@@ -475,6 +476,7 @@ declare type MaterialReactTableProps<TData extends Record<string, any> = {}> = O
     columns: MRT_ColumnDef<TData>[];
     data: TData[];
     defaultColumn?: Partial<MRT_ColumnDef<TData>>;
+    defaultDisplayColumn?: Partial<MRT_ColumnDef<TData>>;
     displayColumnDefOptions?: Partial<{
         [key in MRT_DisplayColumnIds]: Partial<MRT_ColumnDef>;
     }>;
@@ -724,7 +726,7 @@ declare type Virtualizer = {
     scrollToIndex: (index: number, options?: any | undefined) => void;
     measure: () => void;
 };
-declare const _default: <TData extends Record<string, any> = {}>({ aggregationFns, autoResetExpanded, columnResizeMode, defaultColumn, editingMode, enableBottomToolbar, enableColumnActions, enableColumnFilters, enableColumnOrdering, enableColumnResizing, enableDensityToggle, enableExpandAll, enableFilters, enableFullScreenToggle, enableGlobalFilter, enableGlobalFilterRankedResults, enableGrouping, enableHiding, enableMultiRowSelection, enableMultiSort, enablePagination, enablePinning, enableRowSelection, enableSelectAll, enableSorting, enableStickyHeader, enableTableFooter, enableTableHead, enableToolbarInternalActions, enableTopToolbar, filterFns, icons, localization, positionActionsColumn, positionExpandColumn, positionGlobalFilter, positionPagination, positionToolbarAlertBanner, positionToolbarDropZone, rowNumberMode, selectAllMode, sortingFns, ...rest }: MaterialReactTableProps<TData>) => JSX.Element;
+declare const _default: <TData extends Record<string, any> = {}>({ aggregationFns, autoResetExpanded, columnResizeMode, defaultColumn, defaultDisplayColumn, editingMode, enableBottomToolbar, enableColumnActions, enableColumnFilters, enableColumnOrdering, enableColumnResizing, enableDensityToggle, enableExpandAll, enableFilters, enableFullScreenToggle, enableGlobalFilter, enableGlobalFilterRankedResults, enableGrouping, enableHiding, enableMultiRowSelection, enableMultiSort, enablePagination, enablePinning, enableRowSelection, enableSelectAll, enableSorting, enableStickyHeader, enableTableFooter, enableTableHead, enableToolbarInternalActions, enableTopToolbar, filterFns, icons, localization, positionActionsColumn, positionExpandColumn, positionGlobalFilter, positionPagination, positionToolbarAlertBanner, positionToolbarDropZone, rowNumberMode, selectAllMode, sortingFns, ...rest }: MaterialReactTableProps<TData>) => JSX.Element;
 
 interface Props$6<TData extends Record<string, any> = {}> {
     cell: MRT_Cell<TData>;

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "0.40.10",
+  "version": "0.41.0",
   "license": "MIT",
   "name": "material-react-table",
   "description": "A fully featured Material UI V5 implementation of TanStack React Table V8, written from the ground up in TypeScript.",
@@ -53,9 +53,9 @@
     "@babel/preset-react": "^7.18.6",
     "@emotion/react": "^11.10.0",
     "@emotion/styled": "^11.10.0",
-    "@faker-js/faker": "^7.4.0",
-    "@mui/icons-material": "^5.10.2",
-    "@mui/material": "^5.10.2",
+    "@faker-js/faker": "^7.5.0",
+    "@mui/icons-material": "^5.10.3",
+    "@mui/material": "^5.10.3",
     "@rollup/plugin-babel": "^5.3.1",
     "@rollup/plugin-node-resolve": "^13.3.0",
     "@rollup/plugin-typescript": "^8.4.0",

package/src/MaterialReactTable.tsx

@@ -391,8 +391,9 @@ export type MRT_ColumnDef<TData extends Record<string, any> = {}> = Omit<
 
 export type MRT_DefinedColumnDef<TData extends Record<string, any> = {}> = Omit<
   MRT_ColumnDef<TData>,
-  'id'
+  'id' | 'defaultDisplayColumn'
 > & {
+  defaultDisplayColumn: Partial<MRT_ColumnDef<TData>>;
   id: string;
   _filterFn: MRT_FilterOption;
 };
@@ -495,6 +496,7 @@ export type MaterialReactTableProps<TData extends Record<string, any> = {}> =
     columns: MRT_ColumnDef<TData>[];
     data: TData[];
     defaultColumn?: Partial<MRT_ColumnDef<TData>>;
+    defaultDisplayColumn?: Partial<MRT_ColumnDef<TData>>;
     displayColumnDefOptions?: Partial<{
       [key in MRT_DisplayColumnIds]: Partial<MRT_ColumnDef>;
     }>;
@@ -898,6 +900,7 @@ export default <TData extends Record<string, any> = {}>({
   autoResetExpanded = false,
   columnResizeMode = 'onEnd',
   defaultColumn = { minSize: 40, maxSize: 1000, size: 180 },
+  defaultDisplayColumn,
   editingMode = 'modal',
   enableBottomToolbar = true,
   enableColumnActions = true,
@@ -943,6 +946,21 @@ export default <TData extends Record<string, any> = {}>({
     autoResetExpanded={autoResetExpanded}
     columnResizeMode={columnResizeMode}
     defaultColumn={defaultColumn}
+    defaultDisplayColumn={{
+      columnDefType: 'display',
+      enableClickToCopy: false,
+      enableColumnActions: false,
+      enableColumnDragging: false,
+      enableColumnFilter: false,
+      enableColumnOrdering: false,
+      enableEditing: false,
+      enableGlobalFilter: false,
+      enableGrouping: false,
+      enableHiding: false,
+      enableResizing: false,
+      enableSorting: false,
+      ...defaultDisplayColumn,
+    }}
     editingMode={editingMode}
     enableBottomToolbar={enableBottomToolbar}
     enableColumnActions={enableColumnActions}

package/src/column.utils.ts

@@ -10,21 +10,6 @@ import {
 import { MRT_FilterFns } from './filterFns';
 import { MRT_SortingFns } from './sortingFns';
 
-export const defaultDisplayColumnDefOptions = {
-  columnDefType: 'display',
-  enableClickToCopy: false,
-  enableColumnActions: false,
-  enableColumnDragging: false,
-  enableColumnFilter: false,
-  enableColumnOrdering: false,
-  enableEditing: false,
-  enableGlobalFilter: false,
-  enableGrouping: false,
-  enableHiding: false,
-  enableResizing: false,
-  enableSorting: false,
-} as Partial<MRT_ColumnDef>;
-
 export const getColumnId = <TData extends Record<string, any> = {}>(
   columnDef: MRT_ColumnDef<TData>,
 ): string =>
@@ -48,13 +33,20 @@ export const getAllLeafColumnDefs = <TData extends Record<string, any> = {}>(
   return lowestLevelColumns.filter((col) => !col.columns);
 };
 
-export const prepareColumns = <TData extends Record<string, any> = {}>(
-  columnDefs: MRT_ColumnDef<TData>[],
-  columnFilterFns: { [key: string]: MRT_FilterOption },
-  filterFns: typeof MRT_FilterFns & MaterialReactTableProps<TData>['filterFns'],
+export const prepareColumns = <TData extends Record<string, any> = {}>({
+  columnDefs,
+  columnFilterFns,
+  defaultDisplayColumn,
+  filterFns,
+  sortingFns,
+}: {
+  columnDefs: MRT_ColumnDef<TData>[];
+  columnFilterFns: { [key: string]: MRT_FilterOption };
+  defaultDisplayColumn: Partial<MRT_ColumnDef<TData>>;
+  filterFns: typeof MRT_FilterFns & MaterialReactTableProps<TData>['filterFns'];
   sortingFns: typeof MRT_SortingFns &
-    MaterialReactTableProps<TData>['sortingFns'],
-): MRT_DefinedColumnDef<TData>[] =>
+    MaterialReactTableProps<TData>['sortingFns'];
+}): MRT_DefinedColumnDef<TData>[] =>
   columnDefs.map((columnDef) => {
     if (!columnDef.id) columnDef.id = getColumnId(columnDef);
     if (process.env.NODE_ENV !== 'production' && !columnDef.id) {
@@ -65,12 +57,13 @@ export const prepareColumns = <TData extends Record<string, any> = {}>(
     if (!columnDef.columnDefType) columnDef.columnDefType = 'data';
     if (!!columnDef.columns?.length) {
       columnDef.columnDefType = 'group';
-      columnDef.columns = prepareColumns(
-        columnDef.columns,
+      columnDef.columns = prepareColumns({
+        columnDefs: columnDef.columns,
         columnFilterFns,
+        defaultDisplayColumn,
         filterFns,
         sortingFns,
-      );
+      });
     } else if (columnDef.columnDefType === 'data') {
       if (Object.keys(filterFns).includes(columnFilterFns[columnDef.id])) {
         columnDef.filterFn =
@@ -84,7 +77,7 @@ export const prepareColumns = <TData extends Record<string, any> = {}>(
       }
     } else if (columnDef.columnDefType === 'display') {
       columnDef = {
-        ...(defaultDisplayColumnDefOptions as MRT_ColumnDef<TData>),
+        ...(defaultDisplayColumn as MRT_ColumnDef<TData>),
         ...columnDef,
       };
     }

package/src/inputs/MRT_FilterTextField.tsx

@@ -3,6 +3,7 @@ import React, {
   FC,
   MouseEvent,
   useCallback,
+  useEffect,
   useState,
 } from 'react';
 import {
@@ -169,6 +170,10 @@ export const MRT_FilterTextField: FC<Props> = ({
     setAnchorEl(event.currentTarget);
   };
 
+  useEffect(() => {
+    setFilterValue('');
+  }, [columnDef._filterFn]);
+
   if (columnDef.Filter) {
     return <>{columnDef.Filter?.({ column, header, table })}</>;
   }
@@ -241,9 +246,7 @@ export const MRT_FilterTextField: FC<Props> = ({
                 />
               )}
             </InputAdornment>
-          ) : (
-            <FilterListIcon style={{ marginRight: '4px' }} />
-          ),
+          ) : null,
           endAdornment: !filterChipLabel && (
             <InputAdornment position="end">
               <Tooltip

package/src/table/MRT_TableRoot.tsx

@@ -22,7 +22,6 @@ import {
   getAllLeafColumnDefs,
   getDefaultColumnOrderIds,
   getDefaultColumnFilterFn,
-  defaultDisplayColumnDefOptions,
   showExpandColumn,
   getColumnId,
 } from '../column.utils';
@@ -125,7 +124,7 @@ export const MRT_TableRoot = <TData extends Record<string, any> = {}>(
           columnOrder.includes('mrt-row-drag') && {
             header: props.localization?.move,
             size: 60,
-            ...defaultDisplayColumnDefOptions,
+            ...props.defaultDisplayColumn,
             ...props.displayColumnDefOptions?.['mrt-row-drag'],
             id: 'mrt-row-drag',
           },
@@ -139,7 +138,7 @@ export const MRT_TableRoot = <TData extends Record<string, any> = {}>(
             ),
             header: props.localization?.actions,
             size: 70,
-            ...defaultDisplayColumnDefOptions,
+            ...props.defaultDisplayColumn,
             ...props.displayColumnDefOptions?.['mrt-row-actions'],
             id: 'mrt-row-actions',
           },
@@ -154,7 +153,7 @@ export const MRT_TableRoot = <TData extends Record<string, any> = {}>(
                 ) : null,
               header: props.localization?.expand,
               size: 60,
-              ...defaultDisplayColumnDefOptions,
+              ...props.defaultDisplayColumn,
               ...props.displayColumnDefOptions?.['mrt-row-expand'],
               id: 'mrt-row-expand',
             },
@@ -168,7 +167,7 @@ export const MRT_TableRoot = <TData extends Record<string, any> = {}>(
               ) : null,
             header: props.localization?.select,
             size: 60,
-            ...defaultDisplayColumnDefOptions,
+            ...props.defaultDisplayColumn,
             ...props.displayColumnDefOptions?.['mrt-row-select'],
             id: 'mrt-row-select',
           },
@@ -177,7 +176,7 @@ export const MRT_TableRoot = <TData extends Record<string, any> = {}>(
             Header: () => props.localization?.rowNumber,
             header: props.localization?.rowNumbers,
             size: 60,
-            ...defaultDisplayColumnDefOptions,
+            ...props.defaultDisplayColumn,
             ...props.displayColumnDefOptions?.['mrt-row-numbers'],
             id: 'mrt-row-numbers',
           },
@@ -209,13 +208,19 @@ export const MRT_TableRoot = <TData extends Record<string, any> = {}>(
 
   const columnDefs = useMemo(
     () =>
-      prepareColumns(
-        [...displayColumns, ...props.columns],
-        columnFilterFns,
-        props.filterFns as any,
-        props.sortingFns as any,
-      ),
-    [columnFilterFns, displayColumns, props.columns],
+      prepareColumns({
+        columnDefs: [...displayColumns, ...props.columns],
+        columnFilterFns: props.state?.columnFilterFns ?? columnFilterFns,
+        defaultDisplayColumn: props.defaultDisplayColumn ?? {},
+        filterFns: props.filterFns as any,
+        sortingFns: props.sortingFns as any,
+      }),
+    [
+      columnFilterFns,
+      displayColumns,
+      props.columns,
+      props.state?.columnFilterFns,
+    ],
   );
 
   const data: TData[] = useMemo(