material-react-table 0.22.0 → 0.23.0

package/src/buttons/MRT_CopyButton.tsx

@@ -50,7 +50,6 @@ export const MRT_CopyButton: FC<Props> = ({ cell, children, table }) => {
       title={copied ? localization.copiedToClipboard : localization.clickToCopy}
     >
       <Button
-        aria-label={localization.clickToCopy}
         onClick={() => handleCopy(cell.getValue())}
         size="small"
         type="button"

package/src/buttons/MRT_ToggleFiltersButton.tsx

@@ -15,10 +15,10 @@ export const MRT_ToggleFiltersButton: FC<Props> = ({ table, ...rest }) => {
     },
     setShowFilters,
   } = table;
-  const { showFilters } = getState();
+  const { showColumnFilters } = getState();
 
   const handleToggleShowFilters = () => {
-    setShowFilters(!showFilters);
+    setShowFilters(!showColumnFilters);
   };
 
   return (
@@ -28,7 +28,7 @@ export const MRT_ToggleFiltersButton: FC<Props> = ({ table, ...rest }) => {
         onClick={handleToggleShowFilters}
         {...rest}
       >
-        {showFilters ? <FilterListOffIcon /> : <FilterListIcon />}
+        {showColumnFilters ? <FilterListOffIcon /> : <FilterListIcon />}
       </IconButton>
     </Tooltip>
   );

package/src/filtersFns.ts

@@ -1,13 +1,13 @@
 import { rankItem, rankings, RankingInfo } from '@tanstack/match-sorter-utils';
 import { filterFns, Row } from '@tanstack/react-table';
 
-export const fuzzy = <D extends Record<string, any> = {}>(
-  row: Row<D>,
+export const fuzzy = <TData extends Record<string, any> = {}>(
+  row: Row<TData>,
   columnId: string,
-  filterValue: string,
+  filterValue: string | number,
   addMeta: (item: RankingInfo) => void,
 ) => {
-  const itemRank = rankItem(row.getValue(columnId), filterValue, {
+  const itemRank = rankItem(row.getValue(columnId), filterValue as string, {
     threshold: rankings.MATCHES,
   });
   addMeta(itemRank);
@@ -16,13 +16,13 @@ export const fuzzy = <D extends Record<string, any> = {}>(
 
 fuzzy.autoRemove = (val: any) => !val;
 
-export const contains = <D extends Record<string, any> = {}>(
-  row: Row<D>,
+export const contains = <TData extends Record<string, any> = {}>(
+  row: Row<TData>,
   id: string,
   filterValue: string | number,
 ) =>
   row
-    .getValue(id)
+    .getValue<string | number>(id)
     .toString()
     .toLowerCase()
     .trim()
@@ -30,13 +30,13 @@ export const contains = <D extends Record<string, any> = {}>(
 
 contains.autoRemove = (val: any) => !val;
 
-export const startsWith = <D extends Record<string, any> = {}>(
-  row: Row<D>,
+export const startsWith = <TData extends Record<string, any> = {}>(
+  row: Row<TData>,
   id: string,
   filterValue: string | number,
 ) =>
   row
-    .getValue(id)
+    .getValue<string | number>(id)
     .toString()
     .toLowerCase()
     .trim()
@@ -44,13 +44,13 @@ export const startsWith = <D extends Record<string, any> = {}>(
 
 startsWith.autoRemove = (val: any) => !val;
 
-export const endsWith = <D extends Record<string, any> = {}>(
-  row: Row<D>,
+export const endsWith = <TData extends Record<string, any> = {}>(
+  row: Row<TData>,
   id: string,
   filterValue: string | number,
 ) =>
   row
-    .getValue(id)
+    .getValue<string | number>(id)
     .toString()
     .toLowerCase()
     .trim()
@@ -58,52 +58,52 @@ export const endsWith = <D extends Record<string, any> = {}>(
 
 endsWith.autoRemove = (val: any) => !val;
 
-export const equals = <D extends Record<string, any> = {}>(
-  row: Row<D>,
+export const equals = <TData extends Record<string, any> = {}>(
+  row: Row<TData>,
   id: string,
   filterValue: string | number,
 ) =>
-  row.getValue(id).toString().toLowerCase().trim() ===
+  row.getValue<string | number>(id).toString().toLowerCase().trim() ===
   filterValue.toString().toLowerCase().trim();
 
 equals.autoRemove = (val: any) => !val;
 
-export const notEquals = <D extends Record<string, any> = {}>(
-  row: Row<D>,
+export const notEquals = <TData extends Record<string, any> = {}>(
+  row: Row<TData>,
   id: string,
   filterValue: string | number,
 ) =>
-  row.getValue(id).toString().toLowerCase().trim() !==
+  row.getValue<string | number>(id).toString().toLowerCase().trim() !==
   filterValue.toString().toLowerCase().trim();
 
 notEquals.autoRemove = (val: any) => !val;
 
-export const greaterThan = <D extends Record<string, any> = {}>(
-  row: Row<D>,
+export const greaterThan = <TData extends Record<string, any> = {}>(
+  row: Row<TData>,
   id: string,
   filterValue: string | number,
 ) =>
-  !isNaN(+filterValue) && !isNaN(+row.getValue(id))
-    ? +row.getValue(id) >= +filterValue
-    : row.getValue(id).toString().toLowerCase().trim() >
+  !isNaN(+filterValue) && !isNaN(+row.getValue<string | number>(id))
+    ? +row.getValue<string | number>(id) >= +filterValue
+    : row.getValue<string | number>(id).toString().toLowerCase().trim() >
       filterValue.toString().toLowerCase().trim();
 
 greaterThan.autoRemove = (val: any) => !val;
 
-export const lessThan = <D extends Record<string, any> = {}>(
-  row: Row<D>,
+export const lessThan = <TData extends Record<string, any> = {}>(
+  row: Row<TData>,
   id: string,
   filterValue: string | number,
 ) =>
-  !isNaN(+filterValue) && !isNaN(+row.getValue(id))
-    ? +row.getValue(id) <= +filterValue
-    : row.getValue(id).toString().toLowerCase().trim() <
+  !isNaN(+filterValue) && !isNaN(+row.getValue<string | number>(id))
+    ? +row.getValue<string | number>(id) <= +filterValue
+    : row.getValue<string | number>(id).toString().toLowerCase().trim() <
       filterValue.toString().toLowerCase().trim();
 
 lessThan.autoRemove = (val: any) => !val;
 
-export const between = <D extends Record<string, any> = {}>(
-  row: Row<D>,
+export const between = <TData extends Record<string, any> = {}>(
+  row: Row<TData>,
   id: string,
   filterValues: [string | number, string | number],
 ) =>
@@ -117,19 +117,19 @@ export const between = <D extends Record<string, any> = {}>(
 
 between.autoRemove = (val: any) => !val;
 
-export const empty = <D extends Record<string, any> = {}>(
-  row: Row<D>,
+export const empty = <TData extends Record<string, any> = {}>(
+  row: Row<TData>,
   id: string,
   _filterValue: string | number,
-) => !row.getValue(id).toString().trim();
+) => !row.getValue<string | number>(id).toString().trim();
 
 empty.autoRemove = (val: any) => !val;
 
-export const notEmpty = <D extends Record<string, any> = {}>(
-  row: Row<D>,
+export const notEmpty = <TData extends Record<string, any> = {}>(
+  row: Row<TData>,
   id: string,
   _filterValue: string | number,
-) => !!row.getValue(id).toString().trim();
+) => !!row.getValue<string | number>(id).toString().trim();
 
 notEmpty.autoRemove = (val: any) => !val;
 

package/src/head/MRT_TableHeadCellFilterContainer.tsx

@@ -14,11 +14,11 @@ export const MRT_TableHeadCellFilterContainer: FC<Props> = ({
   table,
 }) => {
   const { getState } = table;
-  const { currentFilterFns, showFilters } = getState();
+  const { currentFilterFns, showColumnFilters } = getState();
   const { column } = header;
 
   return (
-    <Collapse in={showFilters} mountOnEnter unmountOnExit>
+    <Collapse in={showColumnFilters} mountOnEnter unmountOnExit>
       {currentFilterFns[column.id] === 'between' ? (
         <MRT_FilterRangeFields header={header} table={table} />
       ) : (

package/src/head/MRT_TableHeadCellResizeHandle.tsx

@@ -12,7 +12,7 @@ export const MRT_TableHeadCellResizeHandle: FC<Props> = ({ header, table }) => {
     getState,
     options: { columnResizeMode },
   } = table;
-  const { density, showFilters } = getState();
+  const { density, showColumnFilters } = getState();
   const { column } = header;
   const { columnDef } = column;
   const { columnDefType } = columnDef;
@@ -26,7 +26,7 @@ export const MRT_TableHeadCellResizeHandle: FC<Props> = ({ header, table }) => {
         borderRadius: '2px',
         borderRightWidth: '2px',
         cursor: 'col-resize',
-        height: showFilters && columnDefType === 'data' ? '4rem' : '2rem',
+        height: showColumnFilters && columnDefType === 'data' ? '4rem' : '2rem',
         mr: density === 'compact' ? '-0.5rem' : '-1rem',
         opacity: 0.8,
         position: 'absolute',

package/src/inputs/MRT_EditCellTextField.tsx

@@ -29,7 +29,7 @@ export const MRT_EditCellTextField: FC<Props> = ({ cell, table }) => {
   const { column, row } = cell;
   const { columnDef } = column;
 
-  const [value, setValue] = useState(cell.getValue());
+  const [value, setValue] = useState(cell.getValue<string>());
 
   const handleChange = (event: ChangeEvent<HTMLInputElement>) => {
     setValue(event.target.value);

package/src/sortingFns.ts

@@ -2,9 +2,9 @@ import { compareItems, RankingInfo } from '@tanstack/match-sorter-utils';
 import { Row, sortingFns } from '@tanstack/react-table';
 import { MRT_Row } from '.';
 
-const fuzzy = <D extends Record<string, any> = {}>(
-  rowA: Row<D>,
-  rowB: Row<D>,
+const fuzzy = <TData extends Record<string, any> = {}>(
+  rowA: Row<TData>,
+  rowB: Row<TData>,
   columnId: string,
 ) => {
   let dir = 0;
@@ -25,9 +25,9 @@ export const MRT_SortingFns = {
   fuzzy,
 };
 
-export const rankGlobalFuzzy = <D extends Record<string, any> = {}>(
-  rowA: MRT_Row<D>,
-  rowB: MRT_Row<D>,
+export const rankGlobalFuzzy = <TData extends Record<string, any> = {}>(
+  rowA: MRT_Row<TData>,
+  rowB: MRT_Row<TData>,
 ) =>
   Math.max(...Object.values(rowB.columnFiltersMeta).map((v: any) => v.rank)) -
   Math.max(...Object.values(rowA.columnFiltersMeta).map((v: any) => v.rank));

package/src/table/MRT_TableRoot.tsx

@@ -32,8 +32,8 @@ import {
 } from '../utils';
 import { MRT_FilterFns } from '../filtersFns';
 
-export const MRT_TableRoot = <D extends Record<string, any> = {}>(
-  props: MaterialReactTableProps<D>,
+export const MRT_TableRoot = <TData extends Record<string, any> = {}>(
+  props: MaterialReactTableProps<TData>,
 ) => {
   const [tableId, setIdPrefix] = useState(props.tableId);
   useEffect(
@@ -42,7 +42,7 @@ export const MRT_TableRoot = <D extends Record<string, any> = {}>(
     [props.tableId],
   );
 
-  const initialState: Partial<MRT_TableState<D>> = useMemo(() => {
+  const initialState: Partial<MRT_TableState<TData>> = useMemo(() => {
     const initState = props.initialState ?? {};
     initState.columnOrder =
       initState.columnOrder ?? getDefaultColumnOrderIds(props);
@@ -53,10 +53,9 @@ export const MRT_TableRoot = <D extends Record<string, any> = {}>(
     initialState.columnOrder ?? [],
   );
   const [currentEditingCell, setCurrentEditingCell] =
-    useState<MRT_Cell<D> | null>(initialState?.currentEditingCell ?? null);
-  const [currentEditingRow, setCurrentEditingRow] = useState<MRT_Row<D> | null>(
-    initialState?.currentEditingRow ?? null,
-  );
+    useState<MRT_Cell<TData> | null>(initialState?.currentEditingCell ?? null);
+  const [currentEditingRow, setCurrentEditingRow] =
+    useState<MRT_Row<TData> | null>(initialState?.currentEditingRow ?? null);
   const [density, setDensity] = useState(
     initialState?.density ?? 'comfortable',
   );
@@ -66,8 +65,8 @@ export const MRT_TableRoot = <D extends Record<string, any> = {}>(
   const [showAlertBanner, setShowAlertBanner] = useState(
     props.initialState?.showAlertBanner ?? false,
   );
-  const [showFilters, setShowFilters] = useState(
-    initialState?.showFilters ?? false,
+  const [showColumnFilters, setShowFilters] = useState(
+    initialState?.showColumnFilters ?? false,
   );
   const [showGlobalFilter, setShowGlobalFilter] = useState(
     initialState?.showGlobalFilter ?? false,
@@ -78,7 +77,7 @@ export const MRT_TableRoot = <D extends Record<string, any> = {}>(
   }>(() =>
     Object.assign(
       {},
-      ...getAllLeafColumnDefs(props.columns as MRT_ColumnDef<D>[]).map(
+      ...getAllLeafColumnDefs(props.columns as MRT_ColumnDef<TData>[]).map(
         (col) => ({
           [col.id?.toString() ?? col.accessorKey?.toString() ?? '']:
             col.filterFn instanceof Function
@@ -158,7 +157,7 @@ export const MRT_TableRoot = <D extends Record<string, any> = {}>(
             muiTableHeadCellProps: props.muiTableHeadCellProps,
             size: 60,
           },
-        ] as MRT_ColumnDef<D>[]
+        ] as MRT_ColumnDef<TData>[]
       ).filter(Boolean),
     [
       columnOrder,
@@ -184,7 +183,7 @@ export const MRT_TableRoot = <D extends Record<string, any> = {}>(
     [currentFilterFns, displayColumns, props.columns],
   );
 
-  const data: D[] = useMemo(
+  const data: TData[] = useMemo(
     () =>
       (props.state?.isLoading || props.state?.showSkeletons) &&
       !props.data.length
@@ -231,7 +230,7 @@ export const MRT_TableRoot = <D extends Record<string, any> = {}>(
         density,
         isFullScreen,
         showAlertBanner,
-        showFilters,
+        showColumnFilters,
         showGlobalFilter,
         ...props.state,
       } as TableState,

package/src/utils.ts

@@ -9,21 +9,21 @@ import {
 import { MRT_FilterFns } from './filtersFns';
 import { MRT_SortingFns } from './sortingFns';
 
-const getColumnId = <D extends Record<string, any> = {}>(
-  columnDef: MRT_ColumnDef<D>,
+const getColumnId = <TData extends Record<string, any> = {}>(
+  columnDef: MRT_ColumnDef<TData>,
 ): string =>
   columnDef.id ?? columnDef.accessorKey?.toString?.() ?? columnDef.header;
 
-export const getAllLeafColumnDefs = <D extends Record<string, any> = {}>(
-  columns: MRT_ColumnDef<D>[],
-): MRT_ColumnDef<D>[] => {
-  let lowestLevelColumns: MRT_ColumnDef<D>[] = columns;
-  let currentCols: MRT_ColumnDef<D>[] | undefined = columns;
+export const getAllLeafColumnDefs = <TData extends Record<string, any> = {}>(
+  columns: MRT_ColumnDef<TData>[],
+): MRT_ColumnDef<TData>[] => {
+  let lowestLevelColumns: MRT_ColumnDef<TData>[] = columns;
+  let currentCols: MRT_ColumnDef<TData>[] | undefined = columns;
   while (!!currentCols?.length && currentCols.some((col) => col.columns)) {
-    const nextCols: MRT_ColumnDef<D>[] = currentCols
+    const nextCols: MRT_ColumnDef<TData>[] = currentCols
       .filter((col) => !!col.columns)
       .map((col) => col.columns)
-      .flat() as MRT_ColumnDef<D>[];
+      .flat() as MRT_ColumnDef<TData>[];
     if (nextCols.every((col) => !col?.columns)) {
       lowestLevelColumns = [...lowestLevelColumns, ...nextCols];
     }
@@ -32,10 +32,10 @@ export const getAllLeafColumnDefs = <D extends Record<string, any> = {}>(
   return lowestLevelColumns.filter((col) => !col.columns);
 };
 
-export const prepareColumns = <D extends Record<string, any> = {}>(
-  columnDefs: MRT_ColumnDef<D>[],
+export const prepareColumns = <TData extends Record<string, any> = {}>(
+  columnDefs: MRT_ColumnDef<TData>[],
   currentFilterFns: { [key: string]: MRT_FilterOption },
-): MRT_DefinedColumnDef<D>[] =>
+): MRT_DefinedColumnDef<TData>[] =>
   columnDefs.map((columnDef) => {
     if (!columnDef.id) columnDef.id = getColumnId(columnDef);
     if (process.env.NODE_ENV !== 'production' && !columnDef.id) {
@@ -58,11 +58,11 @@ export const prepareColumns = <D extends Record<string, any> = {}>(
       }
     }
     return columnDef;
-  }) as MRT_DefinedColumnDef<D>[];
+  }) as MRT_DefinedColumnDef<TData>[];
 
-export const reorderColumn = <D extends Record<string, any> = {}>(
-  movingColumn: MRT_Column<D>,
-  receivingColumn: MRT_Column<D>,
+export const reorderColumn = <TData extends Record<string, any> = {}>(
+  movingColumn: MRT_Column<TData>,
+  receivingColumn: MRT_Column<TData>,
   columnOrder: ColumnOrderState,
 ): ColumnOrderState => {
   if (movingColumn.getCanPin()) {
@@ -76,8 +76,10 @@ export const reorderColumn = <D extends Record<string, any> = {}>(
   return [...columnOrder];
 };
 
-export const getLeadingDisplayColumnIds = <D extends Record<string, any> = {}>(
-  props: MaterialReactTableProps<D>,
+export const getLeadingDisplayColumnIds = <
+  TData extends Record<string, any> = {},
+>(
+  props: MaterialReactTableProps<TData>,
 ) =>
   [
     ((props.positionActionsColumn === 'first' && props.enableRowActions) ||
@@ -88,16 +90,20 @@ export const getLeadingDisplayColumnIds = <D extends Record<string, any> = {}>(
     props.enableRowNumbers && 'mrt-row-numbers',
   ].filter(Boolean) as string[];
 
-export const getTrailingDisplayColumnIds = <D extends Record<string, any> = {}>(
-  props: MaterialReactTableProps<D>,
+export const getTrailingDisplayColumnIds = <
+  TData extends Record<string, any> = {},
+>(
+  props: MaterialReactTableProps<TData>,
 ) => [
   ((props.positionActionsColumn === 'last' && props.enableRowActions) ||
     (props.enableEditing && props.editingMode === 'row')) &&
     'mrt-row-actions',
 ];
 
-export const getDefaultColumnOrderIds = <D extends Record<string, any> = {}>(
-  props: MaterialReactTableProps<D>,
+export const getDefaultColumnOrderIds = <
+  TData extends Record<string, any> = {},
+>(
+  props: MaterialReactTableProps<TData>,
 ) =>
   [
     ...getLeadingDisplayColumnIds(props),