material-react-table 2.11.3 → 2.12.0

package/src/utils/column.utils.ts

@@ -1,12 +1,16 @@
+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';
 
 export const getColumnId = <TData extends MRT_RowData>(
@@ -121,3 +125,85 @@ export const getDefaultColumnFilterFn = <TData extends MRT_RowData>(
     return 'equals';
   return 'fuzzy';
 };
+
+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;
+
+  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;
+
+  const allowedColumnFilterOptions =
+    columnDef?.columnFilterModeOptions ?? columnFilterModeOptions;
+
+  const facetedUniqueValues = column.getFacetedUniqueValues();
+
+  return {
+    allowedColumnFilterOptions,
+    currentFilterOption,
+    facetedUniqueValues,
+    isAutocompleteFilter,
+    isDateFilter,
+    isMultiSelectFilter,
+    isRangeFilter,
+    isSelectFilter,
+    isTextboxFilter,
+  } as const;
+};
+
+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/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 = '';