@cutting/material-react-table 5.0.0-beta.2 → 5.1.0

package/src/utils/row.utils.ts

@@ -1,11 +1,7 @@
-import { type ChangeEvent, type MouseEvent } from 'react';
+import { type ChangeEvent, type KeyboardEvent, type MouseEvent } from 'react';
 
 import { rankGlobalFuzzy } from '../fns/sortingFns';
-import {
-  type MRT_Row,
-  type MRT_RowData,
-  type MRT_TableInstance,
-} from '../types';
+import { type MRT_Row, type MRT_RowData, type MRT_TableInstance } from '../types';
 import { parseFromValuesOrFunc } from './utils';
 
 export const getMRT_Rows = <TData extends MRT_RowData>(
@@ -40,9 +36,7 @@ export const getMRT_Rows = <TData extends MRT_RowData>(
         : getCenterRows();
   } else {
     // fuzzy ranking adjustments
-    rows = getPrePaginatedRowModel().rows.sort((a, b) =>
-      rankGlobalFuzzy(a, b),
-    );
+    rows = getPrePaginatedRowModel().rows.sort((a, b) => rankGlobalFuzzy(a, b));
     if (enablePagination && !manualPagination && !all) {
       const start = pagination.pageIndex * pagination.pageSize;
       rows = rows.slice(start, start + pagination.pageSize);
@@ -54,47 +48,26 @@ export const getMRT_Rows = <TData extends MRT_RowData>(
   }
   // row pinning adjustments
   if (enableRowPinning && rowPinningDisplayMode?.includes('sticky')) {
-    const centerPinnedRowIds = rows
-      .filter((row) => row.getIsPinned())
-      .map((r) => r.id);
+    const centerPinnedRowIds = rows.filter((row) => row.getIsPinned()).map((r) => r.id);
 
-    rows = [
-      ...getTopRows().filter((row) => !centerPinnedRowIds.includes(row.id)),
-      ...rows,
-    ];
+    rows = [...getTopRows().filter((row) => !centerPinnedRowIds.includes(row.id)), ...rows];
   }
   // blank inserted creating row adjustments
-  if (
-    positionCreatingRow !== undefined &&
-    creatingRow &&
-    createDisplayMode === 'row'
-  ) {
+  if (positionCreatingRow !== undefined && creatingRow && createDisplayMode === 'row') {
     const creatingRowIndex = !isNaN(+positionCreatingRow)
       ? +positionCreatingRow
       : positionCreatingRow === 'top'
         ? 0
         : rows.length;
-    rows = [
-      ...rows.slice(0, creatingRowIndex),
-      creatingRow,
-      ...rows.slice(creatingRowIndex),
-    ];
+    rows = [...rows.slice(0, creatingRowIndex), creatingRow, ...rows.slice(creatingRowIndex)];
   }
 
   return rows;
 };
 
-export const getCanRankRows = <TData extends MRT_RowData>(
-  table: MRT_TableInstance<TData>,
-) => {
+export const getCanRankRows = <TData extends MRT_RowData>(table: MRT_TableInstance<TData>): boolean | undefined => {
   const {
-    options: {
-      enableGlobalFilterRankedResults,
-      manualExpanding,
-      manualFiltering,
-      manualGrouping,
-      manualSorting,
-    },
+    options: { enableGlobalFilterRankedResults, manualExpanding, manualFiltering, manualGrouping, manualSorting },
   } = table;
   const { expanded, globalFilterFn } = table.state;
 
@@ -110,16 +83,10 @@ export const getCanRankRows = <TData extends MRT_RowData>(
   );
 };
 
-export const getIsRankingRows = <TData extends MRT_RowData>(
-  table: MRT_TableInstance<TData>,
-) => {
+export const getIsRankingRows = <TData extends MRT_RowData>(table: MRT_TableInstance<TData>): boolean => {
   const { globalFilter, sorting } = table.state;
 
-  return (
-    getCanRankRows(table) &&
-    globalFilter &&
-    !Object.values(sorting).some(Boolean)
-  );
+  return Boolean(getCanRankRows(table) && globalFilter && !Object.values(sorting).some(Boolean));
 };
 
 export const getIsRowSelected = <TData extends MRT_RowData>({
@@ -128,16 +95,14 @@ export const getIsRowSelected = <TData extends MRT_RowData>({
 }: {
   row: MRT_Row<TData>;
   table: MRT_TableInstance<TData>;
-}) => {
+}): boolean | undefined => {
   const {
     options: { enableRowSelection },
   } = table;
 
   return (
     row.getIsSelected() ||
-    (parseFromValuesOrFunc(enableRowSelection, row) &&
-      row.getCanSelectSubRows() &&
-      row.getIsAllSubRowsSelected())
+    (parseFromValuesOrFunc(enableRowSelection, row) && row.getCanSelectSubRows() && row.getIsAllSubRowsSelected())
   );
 };
 
@@ -150,11 +115,14 @@ export const getMRT_RowSelectionHandler =
     row: MRT_Row<TData>;
     staticRowIndex?: number;
     table: MRT_TableInstance<TData>;
-  }) =>
+  }): ((
+    event: ChangeEvent<HTMLInputElement> | KeyboardEvent<HTMLTableCellElement> | MouseEvent<HTMLTableRowElement>,
+    value?: boolean,
+  ) => void) =>
   (
-    event: ChangeEvent<HTMLInputElement> | MouseEvent<HTMLTableRowElement>,
+    event: ChangeEvent<HTMLInputElement> | KeyboardEvent<HTMLTableCellElement> | MouseEvent<HTMLTableRowElement>,
     value?: boolean,
-  ) => {
+  ): void => {
     const {
       options: {
         enableBatchRowSelection,
@@ -182,14 +150,13 @@ export const getMRT_RowSelectionHandler =
     if (
       enableBatchRowSelection &&
       enableMultiRowSelection &&
-      (event as any).nativeEvent.shiftKey &&
+      'shiftKey' in event.nativeEvent &&
+      event.nativeEvent.shiftKey &&
       lastSelectedRowId.current !== null
     ) {
       const rows = getMRT_Rows(table, true);
 
-      const lastIndex = rows.findIndex(
-        (r) => r.id === lastSelectedRowId.current,
-      );
+      const lastIndex = rows.findIndex((r) => r.id === lastSelectedRowId.current);
 
       if (lastIndex !== -1) {
         const isLastIndexChecked = getIsRowSelected({
@@ -198,10 +165,7 @@ export const getMRT_RowSelectionHandler =
         });
 
         const currentIndex = staticRowIndex + paginationOffset;
-        const [start, end] =
-          lastIndex < currentIndex
-            ? [lastIndex, currentIndex]
-            : [currentIndex, lastIndex];
+        const [start, end] = lastIndex < currentIndex ? [lastIndex, currentIndex] : [currentIndex, lastIndex];
 
         // toggle selection of all rows between last selected and this one
         // but only if the last selected row is not the same as the current one
@@ -237,20 +201,31 @@ export const getMRT_RowSelectionHandler =
   };
 
 export const getMRT_SelectAllHandler =
-  <TData extends MRT_RowData>({ table }: { table: MRT_TableInstance<TData> }) =>
+  <TData extends MRT_RowData>({
+    table,
+  }: {
+    table: MRT_TableInstance<TData>;
+  }): ((
+    event: ChangeEvent<HTMLInputElement> | KeyboardEvent<HTMLTableCellElement> | MouseEvent<HTMLButtonElement>,
+    value?: boolean,
+    forceAll?: boolean,
+  ) => void) =>
   (
-    event: ChangeEvent<HTMLInputElement> | MouseEvent<HTMLButtonElement>,
+    event: ChangeEvent<HTMLInputElement> | KeyboardEvent<HTMLTableCellElement> | MouseEvent<HTMLButtonElement>,
     value?: boolean,
     forceAll?: boolean,
-  ) => {
+  ): void => {
     const {
       options: { enableRowPinning, rowPinningDisplayMode, selectAllMode },
       refs: { lastSelectedRowId },
     } = table;
 
-    selectAllMode === 'all' || forceAll
-      ? table.toggleAllRowsSelected(value ?? (event as any).target.checked)
-      : table.toggleAllPageRowsSelected(value ?? (event as any).target.checked);
+    const checked = value ?? (event.target as HTMLInputElement).checked;
+    if (selectAllMode === 'all' || forceAll) {
+      table.toggleAllRowsSelected(checked);
+    } else {
+      table.toggleAllPageRowsSelected(checked);
+    }
     if (enableRowPinning && rowPinningDisplayMode?.includes('select')) {
       table.setRowPinning({ bottom: [], top: [] });
     }

package/src/utils/slotProps.utils.ts

@@ -13,13 +13,10 @@ export type TextFieldSlotProps = {
   select?: Partial<SelectProps>;
 };
 
-export const getTextFieldSlotProps = (
-  slotProps: TextFieldProps['slotProps'],
-): TextFieldSlotProps => ({
+export const getTextFieldSlotProps = (slotProps: TextFieldProps['slotProps']): TextFieldSlotProps => ({
   formHelperText: slotProps?.formHelperText as Partial<FormHelperTextProps>,
   htmlInput: slotProps?.htmlInput as InputBaseComponentProps,
   input: slotProps?.input as Partial<InputProps>,
   inputLabel: slotProps?.inputLabel as Partial<InputLabelProps>,
   select: slotProps?.select as Partial<SelectProps>,
 });
-

package/src/utils/style.utils.ts

@@ -1,4 +1,4 @@
-import { alpha, darken, lighten, type Theme } from '@mui/material/styles';
+import { alpha, type CSSObject, darken, lighten, type Theme } from '@mui/material/styles';
 import { type TableCellProps } from '@mui/material/TableCell';
 import { type TooltipProps } from '@mui/material/Tooltip';
 import { type CSSProperties } from 'react';
@@ -13,7 +13,7 @@ import {
 } from '../types';
 import { parseFromValuesOrFunc } from './utils';
 
-export const parseCSSVarId = (id: string) => id.replace(/[^a-zA-Z0-9]/g, '_');
+export const parseCSSVarId = (id: string): string => id.replace(/[^a-zA-Z0-9]/g, '_');
 
 export const getMRTTheme = <TData extends MRT_RowData>(
   mrtTheme: MRT_TableOptions<TData>['mrtTheme'],
@@ -58,17 +58,14 @@ export const getCommonPinnedCellStyles = <TData extends MRT_RowData>({
   column?: MRT_Column<TData>;
   table: MRT_TableInstance<TData>;
   theme: Theme;
-}) => {
+}): CSSObject => {
   const { baseBackgroundColor } = table.options.mrtTheme;
   const isPinned = column?.getIsPinned();
 
   return {
     '&[data-pinned="true"]': {
       '&:before': {
-        backgroundColor: alpha(
-          darken(baseBackgroundColor, theme.palette.mode === 'dark' ? 0.05 : 0.01),
-          0.97
-        ),
+        backgroundColor: alpha(darken(baseBackgroundColor, theme.palette.mode === 'dark' ? 0.05 : 0.01), 0.97),
         boxShadow: column
           ? isPinned === 'start' && column.getIsLastColumn(isPinned)
             ? `-4px 0 4px -4px ${alpha(theme.palette.grey[700], 0.5)} inset`
@@ -94,7 +91,7 @@ export const getCommonMRTCellStyles = <TData extends MRT_RowData>({
   table: MRT_TableInstance<TData>;
   tableCellProps: TableCellProps;
   theme: Theme;
-}) => {
+}): CSSObject => {
   const {
     options: { enableColumnVirtualization, layoutMode },
   } = table;
@@ -102,25 +99,20 @@ export const getCommonMRTCellStyles = <TData extends MRT_RowData>({
   const { columnDef } = column;
   const { columnDefType } = columnDef;
 
-  const isColumnPinned =
-    columnDef.columnDefType !== 'group' && column.getIsPinned();
+  const isColumnPinned = columnDef.columnDefType !== 'group' && column.getIsPinned();
 
   const widthStyles: CSSProperties = {
     minWidth: `max(calc(var(--${header ? 'header' : 'col'}-${parseCSSVarId(
       header?.id ?? column.id,
     )}-size) * 1px), ${columnDef.minSize ?? 30}px)`,
-    width: `calc(var(--${header ? 'header' : 'col'}-${parseCSSVarId(
-      header?.id ?? column.id,
-    )}-size) * 1px)`,
+    width: `calc(var(--${header ? 'header' : 'col'}-${parseCSSVarId(header?.id ?? column.id)}-size) * 1px)`,
   };
 
   if (layoutMode === 'grid') {
     widthStyles.flex = `${
       [0, false].includes(columnDef.grow!)
         ? 0
-        : `var(--${header ? 'header' : 'col'}-${parseCSSVarId(
-            header?.id ?? column.id,
-          )}-size)`
+        : `var(--${header ? 'header' : 'col'}-${parseCSSVarId(header?.id ?? column.id)}-size)`
     } 0 auto`;
   } else if (layoutMode === 'grid-no-grow') {
     widthStyles.flex = `${+(columnDef.grow || 0)} 0 auto`;
@@ -129,16 +121,10 @@ export const getCommonMRTCellStyles = <TData extends MRT_RowData>({
   const pinnedStyles = isColumnPinned
     ? {
         ...getCommonPinnedCellStyles({ column, table, theme }),
-        left:
-          isColumnPinned === 'start'
-            ? `${column.getStart('start')}px`
-            : undefined,
+        left: isColumnPinned === 'start' ? `${column.getStart('start')}px` : undefined,
         opacity: 0.97,
         position: 'sticky',
-        right:
-          isColumnPinned === 'end'
-            ? `${column.getAfter('end')}px`
-            : undefined,
+        right: isColumnPinned === 'end' ? `${column.getAfter('end')}px` : undefined,
       }
     : {};
 
@@ -151,20 +137,10 @@ export const getCommonMRTCellStyles = <TData extends MRT_RowData>({
     backgroundImage: 'inherit',
     display: layoutMode?.startsWith('grid') ? 'flex' : undefined,
     justifyContent:
-      columnDefType === 'group'
-        ? 'center'
-        : layoutMode?.startsWith('grid')
-          ? tableCellProps.align
-          : undefined,
-    opacity:
-      table.state.draggingColumn?.id === column.id ||
-      table.state.hoveredColumn?.id === column.id
-        ? 0.5
-        : 1,
+      columnDefType === 'group' ? 'center' : layoutMode?.startsWith('grid') ? tableCellProps.align : undefined,
+    opacity: table.state.draggingColumn?.id === column.id || table.state.hoveredColumn?.id === column.id ? 0.5 : 1,
     position: 'relative',
-    transition: enableColumnVirtualization
-      ? 'none'
-      : `padding 150ms ease-in-out`,
+    transition: enableColumnVirtualization ? 'none' : `padding 150ms ease-in-out`,
     zIndex:
       column.getIsResizing() || draggingColumn?.id === column.id
         ? 2
@@ -173,7 +149,7 @@ export const getCommonMRTCellStyles = <TData extends MRT_RowData>({
           : 0,
     ...pinnedStyles,
     ...widthStyles,
-    ...(parseFromValuesOrFunc(tableCellProps?.sx, theme) as any),
+    ...(parseFromValuesOrFunc(tableCellProps?.sx, theme) as CSSObject),
   };
 };
 
@@ -182,7 +158,7 @@ export const getCommonToolbarStyles = <TData extends MRT_RowData>({
 }: {
   table: MRT_TableInstance<TData>;
   theme: Theme;
-}) => ({
+}): CSSObject => ({
   alignItems: 'flex-start',
   backgroundColor: table.options.mrtTheme.baseBackgroundColor,
   display: 'grid',
@@ -194,14 +170,10 @@ export const getCommonToolbarStyles = <TData extends MRT_RowData>({
   zIndex: 1,
 });
 
-export const flipIconStyles = (theme: Theme) =>
-  theme.direction === 'rtl'
-    ? { style: { transform: 'scaleX(-1)' } }
-    : undefined;
+export const flipIconStyles = (theme: Theme): { style: CSSProperties } | undefined =>
+  theme.direction === 'rtl' ? { style: { transform: 'scaleX(-1)' } } : undefined;
 
-export const getCommonTooltipProps = (
-  placement?: TooltipProps['placement'],
-): Partial<TooltipProps> => ({
+export const getCommonTooltipProps = (placement?: TooltipProps['placement']): Partial<TooltipProps> => ({
   disableInteractive: true,
   enterDelay: 1000,
   enterNextDelay: 1000,

package/src/utils/tanstack.helpers.ts

@@ -1,9 +1,5 @@
-import {
-  constructRow as _constructRow,
-  flexRender as _flexRender,
-  type Renderable,
-} from '@tanstack/react-table';
-import { type JSX, type ReactNode } from 'react';
+import { constructRow as _constructRow, flexRender as _flexRender, type Renderable } from '@tanstack/react-table';
+import { type ReactNode } from 'react';
 
 import {
   type MRT_ColumnHelper,
@@ -15,21 +11,17 @@ import {
 } from '../types';
 import { getAllLeafColumnDefs, getColumnId } from './column.utils';
 
-export const flexRender = _flexRender as (
-  Comp: Renderable<any>,
-  props: any,
-) => JSX.Element | ReactNode;
+export const flexRender = <TProps extends object>(Comp: Renderable<TProps>, props: TProps): ReactNode =>
+  _flexRender(Comp, props);
 
-export function createMRTColumnHelper<
-  TData extends MRT_RowData,
->(): MRT_ColumnHelper<TData> {
+export function createMRTColumnHelper<TData extends MRT_RowData>(): MRT_ColumnHelper<TData> {
   return {
     accessor: (accessor, column) => {
       return typeof accessor === 'function'
-        ? ({
+        ? {
             ...column,
             accessorFn: accessor,
-          } as any)
+          }
         : {
             ...column,
             accessorKey: accessor,
@@ -49,7 +41,8 @@ export const createRow = <TData extends MRT_RowData>(
   parentId?: string,
 ): MRT_Row<TData> =>
   _constructRow(
-    table as any,
+    // @ts-expect-error: MRT_TableInstance omits `options.features`, which the runtime table instance has
+    table,
     'mrt-row-create',
     originalRow ??
       Object.assign(
@@ -60,6 +53,6 @@ export const createRow = <TData extends MRT_RowData>(
       ),
     rowIndex,
     depth,
-    subRows as any,
+    subRows,
     parentId,
   ) as MRT_Row<TData>;

package/src/utils/utils.ts

@@ -1,22 +1,18 @@
 import { type DropdownOption } from '../types';
 
-export const parseFromValuesOrFunc = <T, U>(
-  fn: ((arg: U) => T) | T | undefined,
-  arg: U,
-): T | undefined => (fn instanceof Function ? fn(arg) : fn);
+export const parseFromValuesOrFunc = <T, U>(fn: ((arg: U) => T) | T | undefined, arg: U): T | undefined =>
+  fn instanceof Function ? fn(arg) : fn;
 
-export const getValueAndLabel = (
-  option?: DropdownOption | null,
-): { label: string; value: string } => {
+export const getValueAndLabel = (option?: DropdownOption | null): { label: string; value: number | string } => {
   let label: string = '';
-  let value: string = '';
+  let value: number | string = '';
   if (option) {
     if (typeof option !== 'object') {
       label = option;
       value = option;
     } else {
-      label = option.label ?? option.value;
-      value = option.value ?? label;
+      label = option.label ?? String(option.value);
+      value = option.value;
     }
   }
   return { label, value };

package/src/utils/virtualization.utils.ts

@@ -5,16 +5,12 @@ import { defaultRangeExtractor, type Range } from '@tanstack/react-virtual';
  * then, the `dragEnd` event on `MRT_TableBodyRowGrabHandle` or `MRT_TableHeadCellGrabHandle` will not fire.
  * We should keep the `draggingRow` or `draggingColumn` in `getVirtualItems()` to avoid this thing.
  */
-export const extraIndexRangeExtractor = (
-  range: Range,
-  draggingIndex?: number,
-) => {
+export const extraIndexRangeExtractor = (range: Range, draggingIndex?: number): number[] => {
   const newIndexes = defaultRangeExtractor(range);
-  if (draggingIndex === undefined) return newIndexes;
-  if (
-    draggingIndex >= 0 &&
-    draggingIndex < Math.max(range.startIndex - range.overscan, 0)
-  ) {
+  if (draggingIndex === undefined) {
+    return newIndexes;
+  }
+  if (draggingIndex >= 0 && draggingIndex < Math.max(range.startIndex - range.overscan, 0)) {
     newIndexes.unshift(draggingIndex);
   }
   if (draggingIndex >= 0 && draggingIndex > range.endIndex + range.overscan) {