material-react-table 2.11.3 → 2.12.1

package/src/components/inputs/MRT_FilterTextField.tsx

@@ -3,7 +3,6 @@ import {
   type MouseEvent,
   useCallback,
   useEffect,
-  useMemo,
   useRef,
   useState,
 } from 'react';
@@ -35,6 +34,10 @@ import {
   type MRT_RowData,
   type MRT_TableInstance,
 } from '../../types';
+import {
+  getColumnFilterInfo,
+  useDropdownOptions,
+} from '../../utils/column.utils';
 import { getValueAndLabel, parseFromValuesOrFunc } from '../../utils/utils';
 import { MRT_FilterOptionMenu } from '../menus/MRT_FilterOptionMenu';
 
@@ -53,7 +56,6 @@ export const MRT_FilterTextField = <TData extends MRT_RowData>({
 }: MRT_FilterTextFieldProps<TData>) => {
   const {
     options: {
-      columnFilterModeOptions,
       enableColumnFilterModes,
       icons: { CloseIcon, FilterListIcon },
       localization,
@@ -71,58 +73,48 @@ export const MRT_FilterTextField = <TData extends MRT_RowData>({
   const { columnDef } = column;
   const { filterVariant } = columnDef;
 
+  const args = { column, rangeFilterIndex, table };
+
   const textFieldProps: TextFieldProps = {
-    ...parseFromValuesOrFunc(muiFilterTextFieldProps, { column, table }),
-    ...parseFromValuesOrFunc(columnDef.muiFilterTextFieldProps, {
-      column,
-      table,
-    }),
+    ...parseFromValuesOrFunc(muiFilterTextFieldProps, args),
+    ...parseFromValuesOrFunc(columnDef.muiFilterTextFieldProps, args),
     ...rest,
   };
 
   const autocompleteProps = {
-    ...parseFromValuesOrFunc(muiFilterAutocompleteProps, { column, table }),
-    ...parseFromValuesOrFunc(columnDef.muiFilterAutocompleteProps, {
-      column,
-      table,
-    }),
+    ...parseFromValuesOrFunc(muiFilterAutocompleteProps, args),
+    ...parseFromValuesOrFunc(columnDef.muiFilterAutocompleteProps, args),
   };
 
   const datePickerProps: DatePickerProps<any> = {
-    ...parseFromValuesOrFunc(muiFilterDatePickerProps, { column, table }),
-    ...parseFromValuesOrFunc(columnDef.muiFilterDatePickerProps, {
-      column,
-      table,
-    }),
+    ...parseFromValuesOrFunc(muiFilterDatePickerProps, args),
+    ...parseFromValuesOrFunc(columnDef.muiFilterDatePickerProps, args),
   };
 
   const dateTimePickerProps: DateTimePickerProps<any> = {
-    ...parseFromValuesOrFunc(muiFilterDateTimePickerProps, { column, table }),
-    ...parseFromValuesOrFunc(columnDef.muiFilterDateTimePickerProps, {
-      column,
-      table,
-    }),
+    ...parseFromValuesOrFunc(muiFilterDateTimePickerProps, args),
+    ...parseFromValuesOrFunc(columnDef.muiFilterDateTimePickerProps, args),
   };
 
   const timePickerProps: TimePickerProps<any> = {
-    ...parseFromValuesOrFunc(muiFilterTimePickerProps, { column, table }),
-    ...parseFromValuesOrFunc(columnDef.muiFilterTimePickerProps, {
-      column,
-      table,
-    }),
+    ...parseFromValuesOrFunc(muiFilterTimePickerProps, args),
+    ...parseFromValuesOrFunc(columnDef.muiFilterTimePickerProps, args),
   };
 
-  const isDateFilter =
-    filterVariant?.startsWith('date') || filterVariant?.startsWith('time');
-  const isAutocompleteFilter = filterVariant === 'autocomplete';
-  const isRangeFilter =
-    filterVariant?.includes('range') || rangeFilterIndex !== undefined;
-  const isSelectFilter = filterVariant === 'select';
-  const isMultiSelectFilter = filterVariant === 'multi-select';
-  const isTextboxFilter =
-    ['autocomplete', 'text'].includes(filterVariant!) ||
-    (!isSelectFilter && !isMultiSelectFilter);
-  const currentFilterOption = columnDef._filterFn;
+  const {
+    allowedColumnFilterOptions,
+    currentFilterOption,
+    facetedUniqueValues,
+    isAutocompleteFilter,
+    isDateFilter,
+    isMultiSelectFilter,
+    isRangeFilter,
+    isSelectFilter,
+    isTextboxFilter,
+  } = getColumnFilterInfo({ header, table });
+
+  const dropdownOptions = useDropdownOptions({ header, table });
+
   const filterChipLabel = ['empty', 'notEmpty'].includes(currentFilterOption)
     ? //@ts-ignore
       localization[
@@ -132,6 +124,7 @@ export const MRT_FilterTextField = <TData extends MRT_RowData>({
         }`
       ]
     : '';
+
   const filterPlaceholder = !isRangeFilter
     ? textFieldProps?.placeholder ??
       localization.filterByColumn?.replace('{column}', String(columnDef.header))
@@ -140,16 +133,14 @@ export const MRT_FilterTextField = <TData extends MRT_RowData>({
       : rangeFilterIndex === 1
         ? localization.max
         : '';
-  const allowedColumnFilterOptions =
-    columnDef?.columnFilterModeOptions ?? columnFilterModeOptions;
-  const showChangeModeButton =
+
+  const showChangeModeButton = !!(
     enableColumnFilterModes &&
     columnDef.enableColumnFilterModes !== false &&
     !rangeFilterIndex &&
     (allowedColumnFilterOptions === undefined ||
-      !!allowedColumnFilterOptions?.length);
-
-  const facetedUniqueValues = column.getFacetedUniqueValues();
+      !!allowedColumnFilterOptions?.length)
+  );
 
   const [anchorEl, setAnchorEl] = useState<HTMLElement | null>(null);
   const [filterValue, setFilterValue] = useState<string | string[]>(() =>
@@ -257,23 +248,6 @@ export const MRT_FilterTextField = <TData extends MRT_RowData>({
     );
   }
 
-  const dropdownOptions = useMemo(
-    () =>
-      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,
-    ],
-  );
-
   const endAdornment =
     !isAutocompleteFilter && !isDateFilter && !filterChipLabel ? (
       <InputAdornment
@@ -447,8 +421,12 @@ export const MRT_FilterTextField = <TData extends MRT_RowData>({
       ) : isAutocompleteFilter ? (
         <Autocomplete
           freeSolo
-          getOptionLabel={(option) => getValueAndLabel(option).label}
-          onChange={(_e, newValue) => handleAutocompleteChange(newValue)}
+          getOptionLabel={(option: DropdownOption) =>
+            getValueAndLabel(option).label
+          }
+          onChange={(_e, newValue: DropdownOption) =>
+            handleAutocompleteChange(newValue)
+          }
           options={
             dropdownOptions?.map((option) => getValueAndLabel(option)) ?? []
           }

package/src/components/menus/MRT_ShowHideColumnsMenuItems.tsx

@@ -56,10 +56,7 @@ export const MRT_ShowHideColumnsMenuItems = <TData extends MRT_RowData>({
   const { columnDef } = column;
   const { columnDefType } = columnDef;
 
-  const switchChecked =
-    (columnDefType !== 'group' && column.getIsVisible()) ||
-    (columnDefType === 'group' &&
-      column.getLeafColumns().some((col) => col.getIsVisible()));
+  const switchChecked = column.getIsVisible();
 
   const handleToggleColumnHidden = (column: MRT_Column<TData>) => {
     if (columnDefType === 'group') {

package/src/components/table/MRT_TablePaper.tsx

@@ -48,16 +48,16 @@ export const MRT_TablePaper = <TData extends MRT_RowData>({
         ...(isFullScreen
           ? {
               bottom: 0,
-              height: '100vh',
+              height: '100dvh',
               left: 0,
               margin: 0,
-              maxHeight: '100vh',
-              maxWidth: '100vw',
+              maxHeight: '100dvh',
+              maxWidth: '100dvw',
               padding: 0,
               position: 'fixed',
               right: 0,
               top: 0,
-              width: '100vw',
+              width: '100dvw',
               zIndex: 999,
             }
           : {}),

package/src/components/toolbar/MRT_TablePagination.tsx

@@ -37,7 +37,6 @@ export const MRT_TablePagination = <TData extends MRT_RowData>({
   const isMobile = useMediaQuery('(max-width: 720px)');
 
   const {
-    getPrePaginationRowModel,
     getState,
     options: {
       enableToolbarInternalActions,
@@ -45,10 +44,7 @@ export const MRT_TablePagination = <TData extends MRT_RowData>({
       localization,
       muiPaginationProps,
       paginationDisplayMode,
-      rowCount,
     },
-    setPageIndex,
-    setPageSize,
   } = table;
   const {
     pagination: { pageIndex = 0, pageSize = 10 },
@@ -62,8 +58,8 @@ export const MRT_TablePagination = <TData extends MRT_RowData>({
     ...rest,
   };
 
-  const totalRowCount = rowCount ?? getPrePaginationRowModel().rows.length;
-  const numberOfPages = Math.ceil(totalRowCount / pageSize);
+  const totalRowCount = table.getRowCount();
+  const numberOfPages = table.getPageCount();
   const showFirstLastPageButtons = numberOfPages > 2;
   const firstRowIndex = pageIndex * pageSize;
   const lastRowIndex = Math.min(pageIndex * pageSize + pageSize, totalRowCount);
@@ -123,7 +119,9 @@ export const MRT_TablePagination = <TData extends MRT_RowData>({
               id: 'mrt-rows-per-page',
             }}
             label={localization.rowsPerPage}
-            onChange={(event) => setPageSize(+(event.target.value as any))}
+            onChange={(event) =>
+              table.setPageSize(+(event.target.value as any))
+            }
             sx={{ mb: 0 }}
             value={pageSize}
             variant="standard"
@@ -153,7 +151,7 @@ export const MRT_TablePagination = <TData extends MRT_RowData>({
         <Pagination
           count={numberOfPages}
           disabled={disabled}
-          onChange={(_e, newPageIndex) => setPageIndex(newPageIndex - 1)}
+          onChange={(_e, newPageIndex) => table.setPageIndex(newPageIndex - 1)}
           page={pageIndex + 1}
           renderItem={(item) => (
             <PaginationItem
@@ -189,7 +187,7 @@ export const MRT_TablePagination = <TData extends MRT_RowData>({
                   <IconButton
                     aria-label={localization.goToFirstPage}
                     disabled={disableBack}
-                    onClick={() => setPageIndex(0)}
+                    onClick={() => table.firstPage()}
                     size="small"
                   >
                     <FirstPageIcon {...flipIconStyles(theme)} />
@@ -202,7 +200,7 @@ export const MRT_TablePagination = <TData extends MRT_RowData>({
                 <IconButton
                   aria-label={localization.goToPreviousPage}
                   disabled={disableBack}
-                  onClick={() => setPageIndex(pageIndex - 1)}
+                  onClick={() => table.previousPage()}
                   size="small"
                 >
                   <ChevronLeftIcon {...flipIconStyles(theme)} />
@@ -214,7 +212,7 @@ export const MRT_TablePagination = <TData extends MRT_RowData>({
                 <IconButton
                   aria-label={localization.goToNextPage}
                   disabled={disableNext}
-                  onClick={() => setPageIndex(pageIndex + 1)}
+                  onClick={() => table.nextPage()}
                   size="small"
                 >
                   <ChevronRightIcon {...flipIconStyles(theme)} />
@@ -227,7 +225,7 @@ export const MRT_TablePagination = <TData extends MRT_RowData>({
                   <IconButton
                     aria-label={localization.goToLastPage}
                     disabled={disableNext}
-                    onClick={() => setPageIndex(numberOfPages - 1)}
+                    onClick={() => table.lastPage()}
                     size="small"
                   >
                     <LastPageIcon {...flipIconStyles(theme)} />

package/src/components/toolbar/MRT_ToolbarDropZone.tsx

@@ -29,6 +29,10 @@ export const MRT_ToolbarDropZone = <TData extends MRT_RowData>({
     setHoveredColumn({ id: 'drop-zone' });
   };
 
+  const handleDragOver = (e: DragEvent) => {
+    e.preventDefault();
+  };
+
   useEffect(() => {
     if (table.options.state?.showToolbarDropZone !== undefined) {
       setShowToolbarDropZone(
@@ -45,6 +49,7 @@ export const MRT_ToolbarDropZone = <TData extends MRT_RowData>({
       <Box
         className="Mui-ToolbarDropZone"
         onDragEnter={handleDragEnter}
+        onDragOver={handleDragOver}
         {...rest}
         sx={(theme) => ({
           alignItems: 'center',

package/src/hooks/display-columns/getMRT_RowActionsColumnDef.tsx

@@ -8,7 +8,7 @@ import { defaultDisplayColumnProps } from '../../utils/displayColumn.utils';
 
 export const getMRT_RowActionsColumnDef = <TData extends MRT_RowData>(
   tableOptions: MRT_StatefulTableOptions<TData>,
-): MRT_ColumnDef<TData> | null => {
+): MRT_ColumnDef<TData> => {
   return {
     Cell: ({ cell, row, staticRowIndex, table }) => (
       <MRT_ToggleRowActionMenuButton

package/src/hooks/display-columns/getMRT_RowDragColumnDef.tsx

@@ -9,7 +9,7 @@ import { defaultDisplayColumnProps } from '../../utils/displayColumn.utils';
 
 export const getMRT_RowDragColumnDef = <TData extends MRT_RowData>(
   tableOptions: MRT_StatefulTableOptions<TData>,
-): MRT_ColumnDef<TData> | null => {
+): MRT_ColumnDef<TData> => {
   return {
     Cell: ({ row, rowRef, table }) => (
       <MRT_TableBodyRowGrabHandle

package/src/hooks/display-columns/getMRT_RowExpandColumnDef.tsx

@@ -13,7 +13,7 @@ import { getCommonTooltipProps } from '../../utils/style.utils';
 
 export const getMRT_RowExpandColumnDef = <TData extends MRT_RowData>(
   tableOptions: MRT_StatefulTableOptions<TData>,
-): MRT_ColumnDef<TData> | null => {
+): MRT_ColumnDef<TData> => {
   const {
     defaultColumn,
     enableExpandAll,

package/src/hooks/display-columns/getMRT_RowNumbersColumnDef.tsx

@@ -7,7 +7,7 @@ import { defaultDisplayColumnProps } from '../../utils/displayColumn.utils';
 
 export const getMRT_RowNumbersColumnDef = <TData extends MRT_RowData>(
   tableOptions: MRT_StatefulTableOptions<TData>,
-): MRT_ColumnDef<TData> | null => {
+): MRT_ColumnDef<TData> => {
   const { localization, rowNumberDisplayMode } = tableOptions;
   const {
     pagination: { pageIndex, pageSize },

package/src/hooks/display-columns/getMRT_RowPinningColumnDef.tsx

@@ -8,7 +8,7 @@ import { defaultDisplayColumnProps } from '../../utils/displayColumn.utils';
 
 export const getMRT_RowPinningColumnDef = <TData extends MRT_RowData>(
   tableOptions: MRT_StatefulTableOptions<TData>,
-): MRT_ColumnDef<TData> | null => {
+): MRT_ColumnDef<TData> => {
   return {
     Cell: ({ row, table }) => (
       <MRT_TableBodyRowPinButton row={row} table={table} />

package/src/hooks/display-columns/getMRT_RowSelectColumnDef.tsx

@@ -8,7 +8,7 @@ import { defaultDisplayColumnProps } from '../../utils/displayColumn.utils';
 
 export const getMRT_RowSelectColumnDef = <TData extends MRT_RowData>(
   tableOptions: MRT_StatefulTableOptions<TData>,
-): MRT_ColumnDef<TData> | null => {
+): MRT_ColumnDef<TData> => {
   const { enableMultiRowSelection, enableSelectAll } = tableOptions;
 
   return {

package/src/hooks/display-columns/getMRT_RowSpacerColumnDef.tsx

@@ -17,7 +17,7 @@ const blankColProps = {
 
 export const getMRT_RowSpacerColumnDef = <TData extends MRT_RowData>(
   tableOptions: MRT_StatefulTableOptions<TData>,
-): MRT_ColumnDef<TData> | null => {
+): MRT_ColumnDef<TData> => {
   return {
     ...defaultDisplayColumnProps({
       id: 'mrt-row-spacer',

package/src/hooks/useMRT_ColumnVirtualizer.ts

@@ -16,10 +16,7 @@ export const useMRT_ColumnVirtualizer = <
   table: MRT_TableInstance<TData>,
 ): MRT_ColumnVirtualizer | undefined => {
   const {
-    getLeftLeafColumns,
-    getRightLeafColumns,
     getState,
-    getVisibleLeafColumns,
     options: {
       columnVirtualizerInstanceRef,
       columnVirtualizerOptions,
@@ -28,7 +25,7 @@ export const useMRT_ColumnVirtualizer = <
     },
     refs: { tableContainerRef },
   } = table;
-  const { columnPinning, draggingColumn } = getState();
+  const { columnPinning, columnVisibility, draggingColumn } = getState();
 
   if (!enableColumnVirtualization) return undefined;
 
@@ -39,21 +36,22 @@ export const useMRT_ColumnVirtualizer = <
     },
   );
 
-  const visibleColumns = getVisibleLeafColumns();
+  const visibleColumns = table.getVisibleLeafColumns();
 
   const [leftPinnedIndexes, rightPinnedIndexes] = useMemo(
     () =>
       enableColumnPinning
         ? [
-            getLeftLeafColumns().map((c) => c.getPinnedIndex()),
-            getRightLeafColumns()
+            table.getLeftVisibleLeafColumns().map((c) => c.getPinnedIndex()),
+            table
+              .getRightVisibleLeafColumns()
               .map(
                 (column) => visibleColumns.length - column.getPinnedIndex() - 1,
               )
               .sort((a, b) => a - b),
           ]
         : [[], []],
-    [columnPinning, enableColumnPinning],
+    [columnPinning, columnVisibility, enableColumnPinning],
   );
 
   const numPinnedLeft = leftPinnedIndexes.length;

package/src/locales/hr.ts

@@ -0,0 +1,96 @@
+import { type MRT_Localization } from '..';
+
+export const MRT_Localization_HR: MRT_Localization = {
+  actions: 'Radnje',
+  and: 'i',
+  cancel: 'Odustani',
+  changeFilterMode: 'Promijeni način filtriranja',
+  changeSearchMode: 'Promijeni način pretraživanja',
+  clearFilter: 'Očisti filtriranje',
+  clearSearch: 'Očisti pretragu',
+  clearSelection: 'Očisti odabir',
+  clearSort: 'Očisti sortiranje',
+  clickToCopy: 'Klikni za kopiranje',
+  copy: 'Kopiraj',
+  collapse: 'Sažmi',
+  collapseAll: 'Sažmi sve',
+  columnActions: 'Radnje s stupcima',
+  copiedToClipboard: 'Kopirano u međuspremnik',
+  dropToGroupBy: 'Ispusti za grupiranje po {column}',
+  edit: 'Uredi',
+  expand: 'Proširi',
+  expandAll: 'Proširi sve',
+  filterArrIncludes: 'Uključuje',
+  filterArrIncludesAll: 'Uključuje sve',
+  filterArrIncludesSome: 'Uključuje',
+  filterBetween: 'Između',
+  filterBetweenInclusive: 'Između uključivo',
+  filterByColumn: 'Filtriraj po {column}',
+  filterContains: 'Sadrži',
+  filterEmpty: 'Prazno',
+  filterEndsWith: 'Završava s',
+  filterEquals: 'Jednako',
+  filterEqualsString: 'Jednako',
+  filterFuzzy: 'Maglovito',
+  filterGreaterThan: 'Veće od',
+  filterGreaterThanOrEqualTo: 'Veće od ili jednako',
+  filterInNumberRange: 'Između',
+  filterIncludesString: 'Sadrži',
+  filterIncludesStringSensitive: 'Sadrži',
+  filterLessThan: 'Manje od',
+  filterLessThanOrEqualTo: 'Manje od ili jednako',
+  filterMode: 'Način filtriranja: {filterType}',
+  filterNotEmpty: 'Nije prazno',
+  filterNotEquals: 'Nije jednako',
+  filterStartsWith: 'Počinje s',
+  filterWeakEquals: 'Jednako',
+  filteringByColumn: 'Filtriranje po {column} - {filterType} {filterValue}',
+  goToFirstPage: 'Idi na prvu stranicu',
+  goToLastPage: 'Idi na zadnju stranicu',
+  goToNextPage: 'Idi na sljedeću stranicu',
+  goToPreviousPage: 'Idi na prethodnu stranicu',
+  grab: 'Uhvati',
+  groupByColumn: 'Grupiraj po {column}',
+  groupedBy: 'Grupirano po ',
+  hideAll: 'Sakrij sve',
+  hideColumn: 'Sakrij stupac {column}',
+  max: 'Maks.',
+  min: 'Min.',
+  move: 'Premjesti',
+  noRecordsToDisplay: 'Nema zapisa za prikaz',
+  noResultsFound: 'Nema pronađenih rezultata',
+  of: 'od',
+  or: 'ili',
+  pin: 'Prikači',
+  pinToLeft: 'Prikači na lijevo',
+  pinToRight: 'Prikači na desno',
+  resetColumnSize: 'Resetiraj veličinu stupca',
+  resetOrder: 'Resetiraj redoslijed',
+  rowActions: 'Radnje retka',
+  rowNumber: '#',
+  rowNumbers: 'Brojevi redaka',
+  rowsPerPage: 'Redaka po stranici',
+  save: 'Spremi',
+  search: 'Pretraži',
+  selectedCountOfRowCountRowsSelected:
+    '{selectedCount} od {rowCount} odabranih redaka',
+  select: 'Odaberi',
+  showAll: 'Prikaži sve',
+  showAllColumns: 'Prikaži sve stupce',
+  showHideColumns: 'Prikaži/sakrij stupce',
+  showHideFilters: 'Prikaži/sakrij filtere',
+  showHideSearch: 'Prikaži/sakrij pretragu',
+  sortByColumnAsc: 'Sortiraj po {column} uzlazno',
+  sortByColumnDesc: 'Sortiraj po {column} silazno',
+  sortedByColumnAsc: 'Sortirano po {column} uzlazno',
+  sortedByColumnDesc: 'Sortirano po {column} silazno',
+  thenBy: ', zatim po ',
+  toggleDensity: 'Promijeni gustoću',
+  toggleFullScreen: 'Prebaci u puni zaslon',
+  toggleSelectAll: 'Prebaci odabir svih',
+  toggleSelectRow: 'Prebaci odabir retka',
+  toggleVisibility: 'Prebaci vidljivost',
+  ungroupByColumn: 'Razgrupiraj po {column}',
+  unpin: 'Odkači',
+  unpinAll: 'Odkači sve',
+};

package/src/types.ts

@@ -1267,7 +1267,6 @@ export type MRT_TableOptions<TData extends MRT_RowData> = Omit<
   renderTopToolbarCustomActions?: (props: {
     table: MRT_TableInstance<TData>;
   }) => ReactNode;
-  rowCount?: number;
   rowNumberDisplayMode?: 'original' | 'static';
   rowPinningDisplayMode?:
     | 'bottom'

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 = '';