@cutting/material-react-table 5.0.0 → 5.1.0

package/src/utils/cell.utils.ts

@@ -1,13 +1,5 @@
-import {
-  type MRT_Cell,
-  type MRT_Header,
-  type MRT_RowData,
-  type MRT_TableInstance,
-} from '../types';
-import {
-  getMRT_RowSelectionHandler,
-  getMRT_SelectAllHandler,
-} from './row.utils';
+import { type MRT_Cell, type MRT_Header, type MRT_RowData, type MRT_TableInstance } from '../types';
+import { getMRT_RowSelectionHandler, getMRT_SelectAllHandler } from './row.utils';
 import { parseFromValuesOrFunc } from './utils';
 
 const isWinCtrlMacMeta = (event: React.KeyboardEvent<HTMLTableCellElement>) => {
@@ -23,7 +15,7 @@ export const isCellEditable = <TData extends MRT_RowData>({
 }: {
   cell: MRT_Cell<TData>;
   table: MRT_TableInstance<TData>;
-}) => {
+}): boolean | undefined => {
   const { enableEditing } = table.options;
   const {
     column: { columnDef },
@@ -42,7 +34,7 @@ export const openEditingCell = <TData extends MRT_RowData>({
 }: {
   cell: MRT_Cell<TData>;
   table: MRT_TableInstance<TData>;
-}) => {
+}): void => {
   const {
     options: { editDisplayMode },
     refs: { editInputRefs },
@@ -79,9 +71,13 @@ export const cellKeyboardShortcuts = <TData extends MRT_RowData = MRT_RowData>({
   header?: MRT_Header<TData>;
   parentElement?: HTMLTableRowElement;
   table: MRT_TableInstance<TData>;
-}) => {
-  if (!table.options.enableKeyboardShortcuts) return;
-  if (event.isPropagationStopped()) return;
+}): void => {
+  if (!table.options.enableKeyboardShortcuts) {
+    return;
+  }
+  if (event.isPropagationStopped()) {
+    return;
+  }
   const currentCell = event.currentTarget;
 
   if (cellValue && isWinCtrlMacMeta(event) && event.key === 'c') {
@@ -91,40 +87,30 @@ export const cellKeyboardShortcuts = <TData extends MRT_RowData = MRT_RowData>({
       event.preventDefault();
       getMRT_RowSelectionHandler({
         row: cell.row,
-        //@ts-expect-error
-        staticRowIndex: +event.target.getAttribute('data-index'),
+        staticRowIndex: Number((event.target as HTMLElement).getAttribute('data-index')),
         table,
-      })(event as any);
-    } else if (
-      header?.column?.id === 'mrt-row-select' &&
-      table.options.enableSelectAll
-    ) {
+      })(event);
+    } else if (header?.column?.id === 'mrt-row-select' && table.options.enableSelectAll) {
       event.preventDefault();
       getMRT_SelectAllHandler({
         table,
-      })(event as any);
+      })(event);
     } else if (
       cell?.column?.id === 'mrt-row-expand' &&
-      (cell.row.getCanExpand() ||
-        table.options.renderDetailPanel?.({ row: cell.row, table }))
+      (cell.row.getCanExpand() || table.options.renderDetailPanel?.({ row: cell.row, table }))
     ) {
       event.preventDefault();
       cell.row.toggleExpanded();
-    } else if (
-      header?.column?.id === 'mrt-row-expand' &&
-      table.options.enableExpandAll
-    ) {
+    } else if (header?.column?.id === 'mrt-row-expand' && table.options.enableExpandAll) {
       event.preventDefault();
       table.toggleAllRowsExpanded();
     } else if (cell?.column.id === 'mrt-row-pin') {
       event.preventDefault();
-      cell.row.getIsPinned()
-        ? cell.row.pin(false)
-        : cell.row.pin(
-            table.options.rowPinningDisplayMode?.includes('bottom')
-              ? 'bottom'
-              : 'top',
-          );
+      if (cell.row.getIsPinned()) {
+        cell.row.pin(false);
+      } else {
+        cell.row.pin(table.options.rowPinningDisplayMode?.includes('bottom') ? 'bottom' : 'top');
+      }
     } else if (header && isWinCtrlMacMeta(event)) {
       const actionsButton = currentCell.querySelector(
         `button[aria-label="${table.options.localization.columnActions}"]`,
@@ -137,29 +123,16 @@ export const cellKeyboardShortcuts = <TData extends MRT_RowData = MRT_RowData>({
       header.column.toggleSorting();
     }
   } else if (
-    [
-      'ArrowDown',
-      'ArrowLeft',
-      'ArrowRight',
-      'ArrowUp',
-      'End',
-      'Home',
-      'PageDown',
-      'PageUp',
-    ].includes(event.key)
+    ['ArrowDown', 'ArrowLeft', 'ArrowRight', 'ArrowUp', 'End', 'Home', 'PageDown', 'PageUp'].includes(event.key)
   ) {
     event.preventDefault();
 
     const currentRow = parentElement || currentCell.closest('tr');
     const tableElement = containerElement || currentCell.closest('table');
-    const allCells =
-      cellElements ||
-      Array.from(tableElement?.querySelectorAll('th, td') || []);
+    const allCells = cellElements || Array.from(tableElement?.querySelectorAll('th, td') || []);
     const currentCellIndex = allCells.indexOf(currentCell);
 
-    const currentIndex = parseInt(
-      currentCell.getAttribute('data-index') || '0',
-    );
+    const currentIndex = parseInt(currentCell.getAttribute('data-index') || '0');
     let nextCell: HTMLElement | undefined = undefined;
 
     //home/end first or last cell in row
@@ -171,33 +144,22 @@ export const cellKeyboardShortcuts = <TData extends MRT_RowData = MRT_RowData>({
             ? tableElement?.querySelector('tr')
             : tableElement?.lastElementChild?.lastElementChild;
       const rowCells = Array.from(row?.children || []);
-      const targetCell =
-        edge === 'f' ? rowCells[0] : rowCells[rowCells.length - 1];
+      const targetCell = edge === 'f' ? rowCells[0] : rowCells[rowCells.length - 1];
       return targetCell as HTMLElement;
     };
 
     //page up/down first or last cell in column
     const findBottomTopCell = (columnIndex: number, edge: 'b' | 't') => {
-      const row =
-        edge === 't'
-          ? tableElement?.querySelector('tr')
-          : tableElement?.lastElementChild?.lastElementChild;
+      const row = edge === 't' ? tableElement?.querySelector('tr') : tableElement?.lastElementChild?.lastElementChild;
       const rowCells = Array.from(row?.children || []);
       const targetCell = rowCells[columnIndex];
       return targetCell as HTMLElement;
     };
 
-    const findAdjacentCell = (
-      columnIndex: number,
-      searchDirection: 'b' | 'f',
-    ) => {
+    const findAdjacentCell = (columnIndex: number, searchDirection: 'b' | 'f') => {
       const searchArray =
-        searchDirection === 'f'
-          ? allCells.slice(currentCellIndex + 1)
-          : allCells.slice(0, currentCellIndex).reverse();
-      return searchArray.find((cell) =>
-        cell.matches(`[data-index="${columnIndex}"]`),
-      ) as HTMLElement | undefined;
+        searchDirection === 'f' ? allCells.slice(currentCellIndex + 1) : allCells.slice(0, currentCellIndex).reverse();
+      return searchArray.find((cell) => cell.matches(`[data-index="${columnIndex}"]`)) as HTMLElement | undefined;
     };
 
     switch (event.key) {

package/src/utils/column.utils.ts

@@ -9,23 +9,17 @@ import {
   type MRT_DefinedTableOptions,
   type MRT_FilterOption,
   type MRT_Header,
+  type MRT_Localization,
   type MRT_RowData,
   type MRT_TableInstance,
 } from '../types';
 
 export const getSubColumnDefs = <TData extends MRT_RowData>(
   columnDef: MRT_ColumnDef<TData>,
-): ReadonlyArray<MRT_ColumnDef<TData>> | undefined =>
-  'columns' in columnDef ? columnDef.columns : undefined;
+): ReadonlyArray<MRT_ColumnDef<TData>> | undefined => ('columns' in columnDef ? columnDef.columns : undefined);
 
-export const getColumnId = <TData extends MRT_RowData>(
-  columnDef: MRT_ColumnDef<TData>,
-): string =>
-  columnDef.id ??
-  ('accessorKey' in columnDef
-    ? columnDef.accessorKey?.toString?.()
-    : undefined) ??
-  columnDef.header;
+export const getColumnId = <TData extends MRT_RowData>(columnDef: MRT_ColumnDef<TData>): string =>
+  columnDef.id ?? ('accessorKey' in columnDef ? columnDef.accessorKey?.toString?.() : undefined) ?? columnDef.header;
 
 export const getAllLeafColumnDefs = <TData extends MRT_RowData>(
   columns: ReadonlyArray<MRT_ColumnDef<TData>>,
@@ -61,9 +55,13 @@ export const prepareColumns = <TData extends MRT_RowData>({
   } = tableOptions;
   return columnDefs.map((columnDef) => {
     //assign columnId
-    if (!columnDef.id) columnDef.id = getColumnId(columnDef);
+    if (!columnDef.id) {
+      columnDef.id = getColumnId(columnDef);
+    }
     //assign columnDefType
-    if (!columnDef.columnDefType) columnDef.columnDefType = 'data';
+    if (!columnDef.columnDefType) {
+      columnDef.columnDefType = 'data';
+    }
     const subColumnDefs = getSubColumnDefs(columnDef);
     if (subColumnDefs?.length && 'columns' in columnDef) {
       columnDef.columnDefType = 'group';
@@ -77,17 +75,14 @@ export const prepareColumns = <TData extends MRT_RowData>({
       if (Array.isArray(columnDef.aggregationFn)) {
         const aggFns = columnDef.aggregationFn as string[];
         columnDef.aggregationFn = {
-          aggregate: (context) =>
-            aggFns.map((fn) => aggregationFns[fn]?.aggregate(context)),
+          aggregate: (context) => aggFns.map((fn) => aggregationFns[fn]?.aggregate(context)),
         };
       }
 
       //assign filterFns
       if (Object.keys(filterFns).includes(columnFilterFns[columnDef.id])) {
-        columnDef.filterFn =
-          filterFns[columnFilterFns[columnDef.id]] ?? filterFns.fuzzy;
-        (columnDef as MRT_DefinedColumnDef<TData>)._filterFn =
-          columnFilterFns[columnDef.id];
+        columnDef.filterFn = filterFns[columnFilterFns[columnDef.id]] ?? filterFns.fuzzy;
+        (columnDef as MRT_DefinedColumnDef<TData>)._filterFn = columnFilterFns[columnDef.id];
       }
 
       //assign sortFns
@@ -121,24 +116,57 @@ export const reorderColumn = <TData extends MRT_RowData>(
   return newColumnOrder;
 };
 
+export const moveColumn = <TData extends MRT_RowData>(
+  table: MRT_TableInstance<TData>,
+  draggedColumn: MRT_Column<TData>,
+  targetColumn: MRT_Column<TData>,
+): void => {
+  const reorderedColumns = reorderColumn(draggedColumn, targetColumn, table.state.columnOrder);
+  table.setColumnOrder(reorderedColumns);
+  table.setColumnPinning(({ end = [], start = [] }) => ({
+    end: reorderedColumns.filter((header) => end.includes(header)),
+    start: reorderedColumns.filter((header) => start.includes(header)),
+  }));
+};
+
 export const getDefaultColumnFilterFn = <TData extends MRT_RowData>(
   columnDef: Pick<MRT_ColumnDef<TData>, 'filterVariant'>,
 ): MRT_FilterOption => {
   const { filterVariant } = columnDef;
-  if (filterVariant === 'multi-select') return 'arrIncludesSome';
-  if (filterVariant?.includes('range')) return 'betweenInclusive';
-  if (filterVariant === 'select' || filterVariant === 'checkbox')
+  if (filterVariant === 'multi-select') {
+    return 'arrIncludesSome';
+  }
+  if (filterVariant?.includes('range')) {
+    return 'betweenInclusive';
+  }
+  if (filterVariant === 'select' || filterVariant === 'checkbox') {
     return 'equals';
+  }
   return 'fuzzy';
 };
 
+export interface MRT_ColumnFilterInfo<TData extends MRT_RowData> {
+  allowedColumnFilterOptions: MRT_ColumnDef<TData>['columnFilterModeOptions'];
+  currentFilterOption: MRT_FilterOption;
+  facetedUniqueValues: ReturnType<MRT_Column<TData>['getFacetedUniqueValues']>;
+  isAutocompleteFilter: boolean;
+  isDateFilter: boolean;
+  isMultiSelectFilter: boolean;
+  isRangeFilter: boolean;
+  isSelectFilter: boolean;
+  isTextboxFilter: boolean;
+}
+
+export const getFilterOptionLabel = (localization: MRT_Localization, filterOption: MRT_FilterOption): string =>
+  localization[`filter${filterOption.charAt(0).toUpperCase() + filterOption.slice(1)}` as keyof MRT_Localization];
+
 export const getColumnFilterInfo = <TData extends MRT_RowData>({
   header,
   table,
 }: {
   header: MRT_Header<TData>;
   table: MRT_TableInstance<TData>;
-}) => {
+}): MRT_ColumnFilterInfo<TData> => {
   const {
     options: { columnFilterModeOptions },
   } = table;
@@ -146,26 +174,18 @@ export const getColumnFilterInfo = <TData extends MRT_RowData>({
   const { columnDef } = column;
   const { filterVariant } = columnDef;
 
-  const isDateFilter = !!(
-    filterVariant?.startsWith('date') || filterVariant?.startsWith('time')
-  );
+  const isDateFilter = !!(filterVariant?.startsWith('date') || filterVariant?.startsWith('time'));
   const isAutocompleteFilter = filterVariant === 'autocomplete';
-  const currentFilterOption =
-    columnDef._filterFn ?? getDefaultColumnFilterFn(columnDef);
+  const currentFilterOption = columnDef._filterFn ?? getDefaultColumnFilterFn(columnDef);
 
   const isRangeFilter =
-    filterVariant?.includes('range') ||
-    ['between', 'betweenInclusive', 'inNumberRange'].includes(
-      currentFilterOption,
-    );
+    filterVariant?.includes('range') || ['between', 'betweenInclusive', 'inNumberRange'].includes(currentFilterOption);
   const isSelectFilter = filterVariant === 'select';
   const isMultiSelectFilter = filterVariant === 'multi-select';
   const isTextboxFilter =
-    ['autocomplete', 'text'].includes(filterVariant!) ||
-    (!isSelectFilter && !isMultiSelectFilter);
+    ['autocomplete', 'text'].includes(filterVariant!) || (!isSelectFilter && !isMultiSelectFilter);
 
-  const allowedColumnFilterOptions =
-    columnDef?.columnFilterModeOptions ?? columnFilterModeOptions;
+  const allowedColumnFilterOptions = columnDef?.columnFilterModeOptions ?? columnFilterModeOptions;
 
   const facetedUniqueValues = column.getFacetedUniqueValues();
 
@@ -191,27 +211,19 @@ export const useDropdownOptions = <TData extends MRT_RowData>({
 }): DropdownOption[] | undefined => {
   const { column } = header;
   const { columnDef } = column;
-  const {
-    facetedUniqueValues,
-    isAutocompleteFilter,
-    isMultiSelectFilter,
-    isSelectFilter,
-  } = getColumnFilterInfo({ header, table });
+  const { facetedUniqueValues, isAutocompleteFilter, isMultiSelectFilter, isSelectFilter } = getColumnFilterInfo({
+    header,
+    table,
+  });
 
   return useMemo<DropdownOption[] | undefined>(
     () =>
       columnDef.filterSelectOptions ??
-      ((isSelectFilter || isMultiSelectFilter || isAutocompleteFilter) &&
-      facetedUniqueValues
+      ((isSelectFilter || isMultiSelectFilter || isAutocompleteFilter) && facetedUniqueValues
         ? Array.from(facetedUniqueValues.keys())
             .filter((value) => value !== null && value !== undefined)
             .sort((a, b) => a.localeCompare(b))
         : undefined),
-    [
-      columnDef.filterSelectOptions,
-      facetedUniqueValues,
-      isMultiSelectFilter,
-      isSelectFilter,
-    ],
+    [columnDef.filterSelectOptions, facetedUniqueValues, isAutocompleteFilter, isMultiSelectFilter, isSelectFilter],
   );
 };

package/src/utils/displayColumn.utils.ts

@@ -1,5 +1,6 @@
 import {
   type MRT_DefinedTableOptions,
+  type MRT_DisplayColumnDef,
   type MRT_DisplayColumnIds,
   type MRT_Localization,
   type MRT_RowData,
@@ -17,9 +18,8 @@ export function defaultDisplayColumnProps<TData extends MRT_RowData>({
   id: MRT_DisplayColumnIds;
   size: number;
   tableOptions: MRT_DefinedTableOptions<TData>;
-}) {
-  const { defaultDisplayColumn, displayColumnDefOptions, localization } =
-    tableOptions;
+}): Partial<MRT_DisplayColumnDef<TData>> & { header: string; id: MRT_DisplayColumnIds; size: number } {
+  const { defaultDisplayColumn, displayColumnDefOptions, localization } = tableOptions;
   return {
     ...defaultDisplayColumn,
     header: header ? localization[header]! : '',
@@ -52,11 +52,7 @@ export const showRowExpandColumn = <TData extends MRT_RowData>(
     renderDetailPanel,
     state: { grouping },
   } = tableOptions;
-  return !!(
-    enableExpanding ||
-    (enableGrouping && grouping?.length) ||
-    renderDetailPanel
-  );
+  return !!(enableExpanding || (enableGrouping && grouping?.length) || renderDetailPanel);
 };
 
 export const showRowActionsColumn = <TData extends MRT_RowData>(
@@ -90,63 +86,45 @@ export const showRowSpacerColumn = <TData extends MRT_RowData>(
 
 export const getLeadingDisplayColumnIds = <TData extends MRT_RowData>(
   tableOptions: MRT_StatefulTableOptions<TData>,
-) =>
+): MRT_DisplayColumnIds[] =>
   [
     showRowPinningColumn(tableOptions) && 'mrt-row-pin',
     showRowDragColumn(tableOptions) && 'mrt-row-drag',
-    tableOptions.positionActionsColumn === 'first' &&
-      showRowActionsColumn(tableOptions) &&
-      'mrt-row-actions',
-    tableOptions.positionExpandColumn === 'first' &&
-      showRowExpandColumn(tableOptions) &&
-      'mrt-row-expand',
+    tableOptions.positionActionsColumn === 'first' && showRowActionsColumn(tableOptions) && 'mrt-row-actions',
+    tableOptions.positionExpandColumn === 'first' && showRowExpandColumn(tableOptions) && 'mrt-row-expand',
     showRowSelectionColumn(tableOptions) && 'mrt-row-select',
     showRowNumbersColumn(tableOptions) && 'mrt-row-numbers',
   ].filter(Boolean) as MRT_DisplayColumnIds[];
 
 export const getTrailingDisplayColumnIds = <TData extends MRT_RowData>(
   tableOptions: MRT_StatefulTableOptions<TData>,
-) =>
+): MRT_DisplayColumnIds[] =>
   [
-    tableOptions.positionActionsColumn === 'last' &&
-      showRowActionsColumn(tableOptions) &&
-      'mrt-row-actions',
-    tableOptions.positionExpandColumn === 'last' &&
-      showRowExpandColumn(tableOptions) &&
-      'mrt-row-expand',
+    tableOptions.positionActionsColumn === 'last' && showRowActionsColumn(tableOptions) && 'mrt-row-actions',
+    tableOptions.positionExpandColumn === 'last' && showRowExpandColumn(tableOptions) && 'mrt-row-expand',
     showRowSpacerColumn(tableOptions) && 'mrt-row-spacer',
   ].filter(Boolean) as MRT_DisplayColumnIds[];
 
 export const getDefaultColumnOrderIds = <TData extends MRT_RowData>(
   tableOptions: MRT_StatefulTableOptions<TData>,
   reset = false,
-) => {
+): string[] => {
   const {
     state: { columnOrder: currentColumnOrderIds = [] },
   } = tableOptions;
 
-  const leadingDisplayColIds: string[] =
-    getLeadingDisplayColumnIds(tableOptions);
-  const trailingDisplayColIds: string[] =
-    getTrailingDisplayColumnIds(tableOptions);
+  const leadingDisplayColIds: string[] = getLeadingDisplayColumnIds(tableOptions);
+  const trailingDisplayColIds: string[] = getTrailingDisplayColumnIds(tableOptions);
 
-  const defaultColumnDefIds = getAllLeafColumnDefs(tableOptions.columns).map(
-    (columnDef) => getColumnId(columnDef),
-  );
+  const defaultColumnDefIds = getAllLeafColumnDefs(tableOptions.columns).map((columnDef) => getColumnId(columnDef));
 
   let allLeafColumnDefIds = reset
     ? defaultColumnDefIds
     : Array.from(new Set([...currentColumnOrderIds, ...defaultColumnDefIds]));
 
   allLeafColumnDefIds = allLeafColumnDefIds.filter(
-    (colId) =>
-      !leadingDisplayColIds.includes(colId) &&
-      !trailingDisplayColIds.includes(colId),
+    (colId) => !leadingDisplayColIds.includes(colId) && !trailingDisplayColIds.includes(colId),
   );
 
-  return [
-    ...leadingDisplayColIds,
-    ...allLeafColumnDefIds,
-    ...trailingDisplayColIds,
-  ];
+  return [...leadingDisplayColIds, ...allLeafColumnDefIds, ...trailingDisplayColIds];
 };

package/src/utils/highlight.utils.ts

@@ -10,11 +10,13 @@ interface HighlightWordsArgs {
   text: string;
 }
 
-const escapeRegExp = (term: string): string =>
-  term.replace(/[|\\{}()[\]^$+*?.-]/g, (char) => `\\${char}`);
+const escapeRegExp = (term: string): string => term.replace(/[|\\{}()[\]^$+*?.-]/g, (char) => `\\${char}`);
 
 const termsToRegExpString = (terms: string): string =>
-  terms.replace(/\s{2,}/g, ' ').split(' ').join('|');
+  terms
+    .replace(/\s{2,}/g, ' ')
+    .split(' ')
+    .join('|');
 
 const buildRegExp = (terms: string, matchExactly: boolean): RegExp => {
   const fromString = /^([/~@;%#'])(.*?)\1([gimsuy]*)$/.exec(terms);
@@ -29,11 +31,7 @@ const buildRegExp = (terms: string, matchExactly: boolean): RegExp => {
 let uidCounter = 0;
 const uid = (): string => `mrt-hl-${(uidCounter += 1).toString(36)}`;
 
-export const highlightWords = ({
-  matchExactly = false,
-  query,
-  text,
-}: HighlightWordsArgs): HighlightChunk[] => {
+export const highlightWords = ({ matchExactly = false, query, text }: HighlightWordsArgs): HighlightChunk[] => {
   const safeQuery = typeof query === 'string' ? query.trim() : query;
   if (safeQuery === '') {
     return [{ key: uid(), match: false, text }];
@@ -44,9 +42,7 @@ export const highlightWords = ({
     .filter((str) => str.length > 0)
     .map((str) => ({
       key: uid(),
-      match: matchExactly
-        ? str.toLowerCase() === safeQuery.toLowerCase()
-        : searchRegexp.test(str),
+      match: matchExactly ? str.toLowerCase() === safeQuery.toLowerCase() : searchRegexp.test(str),
       text: str,
     }));
 };