material-react-table 2.11.2 → 2.12.0

package/src/utils/column.utils.ts

@@ -1,11 +1,14 @@
+import { useMemo } from 'react';
 import { type Row } from '@tanstack/react-table';
 import {
+  type DropdownOption,
   type MRT_Column,
   type MRT_ColumnDef,
   type MRT_ColumnOrderState,
   type MRT_DefinedColumnDef,
   type MRT_DefinedTableOptions,
   type MRT_FilterOption,
+  type MRT_Header,
   type MRT_RowData,
   type MRT_TableInstance,
 } from '../types';
@@ -123,49 +126,84 @@ export const getDefaultColumnFilterFn = <TData extends MRT_RowData>(
   return 'fuzzy';
 };
 
-export const getIsFirstColumn = <TData extends MRT_RowData>(
-  column: MRT_Column<TData>,
-  table: MRT_TableInstance<TData>,
-) => {
-  const leftColumns = table.getLeftVisibleLeafColumns();
-  return leftColumns.length
-    ? leftColumns[0].id === column.id
-    : table.getVisibleLeafColumns()[0].id === column.id;
-};
-
-export const getIsLastColumn = <TData extends MRT_RowData>(
-  column: MRT_Column<TData>,
-  table: MRT_TableInstance<TData>,
-) => {
-  const rightColumns = table.getRightVisibleLeafColumns();
-  const columns = table.getVisibleLeafColumns();
-  return rightColumns.length
-    ? rightColumns[rightColumns.length - 1].id === column.id
-    : columns[columns.length - 1].id === column.id;
-};
+export const getColumnFilterInfo = <TData extends MRT_RowData>({
+  header,
+  table,
+}: {
+  header: MRT_Header<TData>;
+  table: MRT_TableInstance<TData>;
+}) => {
+  const {
+    options: { columnFilterModeOptions },
+  } = table;
+  const { column } = header;
+  const { columnDef } = column;
+  const { filterVariant } = columnDef;
 
-export const getIsLastLeftPinnedColumn = <TData extends MRT_RowData>(
-  table: MRT_TableInstance<TData>,
-  column: MRT_Column<TData>,
-) => {
-  return (
-    column.getIsPinned() === 'left' &&
-    table.getLeftLeafHeaders().length - 1 === column.getPinnedIndex()
+  const isDateFilter = !!(
+    filterVariant?.startsWith('date') || filterVariant?.startsWith('time')
   );
-};
+  const isAutocompleteFilter = filterVariant === 'autocomplete';
+  const isRangeFilter =
+    filterVariant?.includes('range') ||
+    ['between', 'betweenInclusive', 'inNumberRange'].includes(
+      columnDef._filterFn,
+    );
+  const isSelectFilter = filterVariant === 'select';
+  const isMultiSelectFilter = filterVariant === 'multi-select';
+  const isTextboxFilter =
+    ['autocomplete', 'text'].includes(filterVariant!) ||
+    (!isSelectFilter && !isMultiSelectFilter);
+  const currentFilterOption = columnDef._filterFn;
 
-export const getIsFirstRightPinnedColumn = <TData extends MRT_RowData>(
-  column: MRT_Column<TData>,
-) => {
-  return column.getIsPinned() === 'right' && column.getPinnedIndex() === 0;
+  const allowedColumnFilterOptions =
+    columnDef?.columnFilterModeOptions ?? columnFilterModeOptions;
+
+  const facetedUniqueValues = column.getFacetedUniqueValues();
+
+  return {
+    allowedColumnFilterOptions,
+    currentFilterOption,
+    facetedUniqueValues,
+    isAutocompleteFilter,
+    isDateFilter,
+    isMultiSelectFilter,
+    isRangeFilter,
+    isSelectFilter,
+    isTextboxFilter,
+  } as const;
 };
 
-export const getTotalRight = <TData extends MRT_RowData>(
-  table: MRT_TableInstance<TData>,
-  column: MRT_Column<TData>,
-) => {
-  return table
-    .getRightLeafHeaders()
-    .slice(column.getPinnedIndex() + 1)
-    .reduce((acc, col) => acc + col.getSize(), 0);
+export const useDropdownOptions = <TData extends MRT_RowData>({
+  header,
+  table,
+}: {
+  header: MRT_Header<TData>;
+  table: MRT_TableInstance<TData>;
+}): DropdownOption[] | undefined => {
+  const { column } = header;
+  const { columnDef } = column;
+  const {
+    facetedUniqueValues,
+    isAutocompleteFilter,
+    isMultiSelectFilter,
+    isSelectFilter,
+  } = getColumnFilterInfo({ header, table });
+
+  return useMemo<DropdownOption[] | undefined>(
+    () =>
+      columnDef.filterSelectOptions ??
+      ((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,
+    ],
+  );
 };

package/src/utils/row.utils.ts

@@ -243,13 +243,14 @@ export const getMRT_SelectAllHandler =
   (
     event: ChangeEvent<HTMLInputElement> | MouseEvent<HTMLButtonElement>,
     value?: boolean,
+    forceAll?: boolean,
   ) => {
     const {
       options: { enableRowPinning, rowPinningDisplayMode, selectAllMode },
       refs: { lastSelectedRowId },
     } = table;
 
-    selectAllMode === 'all'
+    selectAllMode === 'all' || forceAll
       ? table.toggleAllRowsSelected(value ?? (event as any).target.checked)
       : table.toggleAllPageRowsSelected(value ?? (event as any).target.checked);
     if (enableRowPinning && rowPinningDisplayMode?.includes('select')) {

package/src/utils/style.utils.ts

@@ -8,37 +8,34 @@ import {
   type MRT_Header,
   type MRT_RowData,
   type MRT_TableInstance,
+  type MRT_TableOptions,
+  type MRT_Theme,
 } from '../types';
-import {
-  getIsFirstRightPinnedColumn,
-  getIsLastLeftPinnedColumn,
-  getTotalRight,
-} from '../utils/column.utils';
 import { parseFromValuesOrFunc } from './utils';
 
 export const parseCSSVarId = (id: string) => id.replace(/[^a-zA-Z0-9]/g, '_');
 
 export const getMRTTheme = <TData extends MRT_RowData>(
-  table: MRT_TableInstance<TData>,
-  theme: Theme,
-) => {
-  const themeOverrides = parseFromValuesOrFunc(table.options.mrtTheme, theme);
+  mrtTheme: MRT_TableOptions<TData>['mrtTheme'],
+  muiTheme: Theme,
+): MRT_Theme => {
+  const mrtThemeOverrides = parseFromValuesOrFunc(mrtTheme, muiTheme);
   const baseBackgroundColor =
-    themeOverrides?.baseBackgroundColor ??
-    (theme.palette.mode === 'dark'
-      ? lighten(theme.palette.background.default, 0.05)
-      : theme.palette.background.default);
+    mrtThemeOverrides?.baseBackgroundColor ??
+    (muiTheme.palette.mode === 'dark'
+      ? lighten(muiTheme.palette.background.default, 0.05)
+      : muiTheme.palette.background.default);
   return {
     baseBackgroundColor,
-    draggingBorderColor: theme.palette.primary.main,
+    draggingBorderColor: muiTheme.palette.primary.main,
     matchHighlightColor:
-      theme.palette.mode === 'dark'
-        ? darken(theme.palette.warning.dark, 0.25)
-        : lighten(theme.palette.warning.light, 0.5),
+      muiTheme.palette.mode === 'dark'
+        ? darken(muiTheme.palette.warning.dark, 0.25)
+        : lighten(muiTheme.palette.warning.light, 0.5),
     menuBackgroundColor: lighten(baseBackgroundColor, 0.07),
-    pinnedRowBackgroundColor: alpha(theme.palette.primary.main, 0.1),
-    selectedRowBackgroundColor: alpha(theme.palette.primary.main, 0.2),
-    ...themeOverrides,
+    pinnedRowBackgroundColor: alpha(muiTheme.palette.primary.main, 0.1),
+    selectedRowBackgroundColor: alpha(muiTheme.palette.primary.main, 0.2),
+    ...mrtThemeOverrides,
   };
 };
 
@@ -61,7 +58,9 @@ export const getCommonPinnedCellStyles = <TData extends MRT_RowData>({
   table: MRT_TableInstance<TData>;
   theme: Theme;
 }) => {
-  const { baseBackgroundColor } = getMRTTheme(table, theme);
+  const { baseBackgroundColor } = table.options.mrtTheme;
+  const isPinned = column?.getIsPinned();
+
   return {
     '&[data-pinned="true"]': {
       '&:before': {
@@ -73,9 +72,9 @@ export const getCommonPinnedCellStyles = <TData extends MRT_RowData>({
           0.97,
         ),
         boxShadow: column
-          ? getIsLastLeftPinnedColumn(table, column)
+          ? isPinned === 'left' && column.getIsLastColumn(isPinned)
             ? `-4px 0 4px -4px ${alpha(theme.palette.grey[700], 0.5)} inset`
-            : getIsFirstRightPinnedColumn(column)
+            : isPinned === 'right' && column.getIsFirstColumn(isPinned)
               ? `4px 0 4px -4px ${alpha(theme.palette.grey[700], 0.5)} inset`
               : undefined
           : undefined,
@@ -141,7 +140,7 @@ export const getCommonMRTCellStyles = <TData extends MRT_RowData>({
         position: 'sticky',
         right:
           isColumnPinned === 'right'
-            ? `${getTotalRight(table, column)}px`
+            ? `${column.getAfter('right')}px`
             : undefined,
       }
     : {};
@@ -179,13 +178,12 @@ export const getCommonMRTCellStyles = <TData extends MRT_RowData>({
 
 export const getCommonToolbarStyles = <TData extends MRT_RowData>({
   table,
-  theme,
 }: {
   table: MRT_TableInstance<TData>;
   theme: Theme;
 }) => ({
   alignItems: 'flex-start',
-  backgroundColor: getMRTTheme(table, theme).baseBackgroundColor,
+  backgroundColor: table.options.mrtTheme.baseBackgroundColor,
   display: 'grid',
   flexWrap: 'wrap-reverse',
   minHeight: '3.5rem',

package/src/utils/utils.ts

@@ -6,7 +6,7 @@ export const parseFromValuesOrFunc = <T, U>(
 ): T | undefined => (fn instanceof Function ? fn(arg) : fn);
 
 export const getValueAndLabel = (
-  option: DropdownOption,
+  option?: DropdownOption,
 ): { label: string; value: string } => {
   let label: string = '';
   let value: string = '';