material-react-table 1.12.0 → 1.13.0

package/locales/zh-Hant.js

@@ -3,95 +3,95 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const MRT_Localization_ZH_HANT = {
-  actions: '動作',
-  and: '與',
-  cancel: '取消',
-  changeFilterMode: '更改過濾模式',
-  changeSearchMode: '更改搜尋模式',
-  clearFilter: '清除過濾',
-  clearSearch: '清除搜尋',
-  clearSort: '清除排序',
-  clickToCopy: '點擊以複製',
-  collapse: '折疊',
-  collapseAll: '全部折疊',
-  columnActions: '欄位動作',
-  copiedToClipboard: '已複製至剪貼簿',
-  dropToGroupBy: '拖放以按 {column} 分組',
-  edit: '編輯',
-  expand: '展開',
-  expandAll: '全部展開',
-  filterArrIncludes: '包括',
-  filterArrIncludesAll: '包括所有',
-  filterArrIncludesSome: '包括',
-  filterBetween: '介於首尾',
-  filterBetweenInclusive: '介於首尾之間',
-  filterByColumn: '以 {column} 過濾',
-  filterContains: '包含',
-  filterEmpty: '是空字串',
-  filterEndsWith: '結尾為',
-  filterEquals: '等於',
-  filterEqualsString: '等於',
-  filterFuzzy: '模糊搜索',
-  filterGreaterThan: '大於',
-  filterGreaterThanOrEqualTo: '大於等於',
-  filterInNumberRange: '介於',
-  filterIncludesString: '包含',
-  filterIncludesStringSensitive: '包含',
-  filterLessThan: '小於',
-  filterLessThanOrEqualTo: '小於等於',
-  filterMode: '過濾模式：{filterType}',
-  filterNotEmpty: '非空字串',
-  filterNotEquals: '不等於',
-  filterStartsWith: '開首為',
-  filterWeakEquals: '等於',
-  filteringByColumn: '正以 {column} 過濾：{filterType} {filterValue}',
-  goToFirstPage: '到第一頁',
-  goToLastPage: '到最後一頁',
-  goToNextPage: '下一頁',
-  goToPreviousPage: '上一頁',
-  grab: '拖曳',
-  groupByColumn: '按 {column} 分組',
-  groupedBy: '分組依據 ',
-  hideAll: '隱藏全部',
-  hideColumn: '隱藏 {column} 欄位',
-  max: '最大',
-  min: '最小',
-  move: '移動',
-  noRecordsToDisplay: '無紀錄可顯示',
-  noResultsFound: '未找到結果',
-  of: '/',
-  or: '或',
-  pinToLeft: '固定至左邊',
-  pinToRight: '固定至右邊',
-  resetColumnSize: '重置欄位大小',
-  resetOrder: '重置排序',
-  rowActions: '橫列動作',
-  rowNumber: '#',
-  rowNumbers: '橫列編號',
-  rowsPerPage: '每頁橫列數量',
-  save: '儲存',
-  search: '搜尋',
-  selectedCountOfRowCountRowsSelected: '已選擇橫列：{selectedCount}/{rowCount}',
-  select: '選擇',
-  showAll: '顯示全部',
-  showAllColumns: '顯示全部欄位',
-  showHideColumns: '顯示/隱藏 欄位',
-  showHideFilters: '顯示/隱藏 過濾條件',
-  showHideSearch: '顯示/隱藏 搜尋條件',
-  sortByColumnAsc: '按 {column} 順序排序',
-  sortByColumnDesc: '按 {column} 倒序排序',
-  sortedByColumnAsc: '已按 {column} 順序排序',
-  sortedByColumnDesc: '已按 {column} 倒序排序',
-  thenBy: '，然後以',
-  toggleDensity: '切換密度',
-  toggleFullScreen: '切換全螢幕',
-  toggleSelectAll: '切換選擇全部',
-  toggleSelectRow: '切換選擇橫列',
-  toggleVisibility: '切換可見度',
-  ungroupByColumn: '取消按 {column} 分組',
-  unpin: '取消固定',
-  unpinAll: '全部取消固定',
-  unsorted: '取消排序',
+    actions: '動作',
+    and: '與',
+    cancel: '取消',
+    changeFilterMode: '更改過濾模式',
+    changeSearchMode: '更改搜尋模式',
+    clearFilter: '清除過濾',
+    clearSearch: '清除搜尋',
+    clearSort: '清除排序',
+    clickToCopy: '點擊以複製',
+    collapse: '折疊',
+    collapseAll: '全部折疊',
+    columnActions: '欄位動作',
+    copiedToClipboard: '已複製至剪貼簿',
+    dropToGroupBy: '拖放以按 {column} 分組',
+    edit: '編輯',
+    expand: '展開',
+    expandAll: '全部展開',
+    filterArrIncludes: '包括',
+    filterArrIncludesAll: '包括所有',
+    filterArrIncludesSome: '包括',
+    filterBetween: '介於首尾',
+    filterBetweenInclusive: '介於首尾之間',
+    filterByColumn: '以 {column} 過濾',
+    filterContains: '包含',
+    filterEmpty: '是空字串',
+    filterEndsWith: '結尾為',
+    filterEquals: '等於',
+    filterEqualsString: '等於',
+    filterFuzzy: '模糊搜索',
+    filterGreaterThan: '大於',
+    filterGreaterThanOrEqualTo: '大於等於',
+    filterInNumberRange: '介於',
+    filterIncludesString: '包含',
+    filterIncludesStringSensitive: '包含',
+    filterLessThan: '小於',
+    filterLessThanOrEqualTo: '小於等於',
+    filterMode: '過濾模式：{filterType}',
+    filterNotEmpty: '非空字串',
+    filterNotEquals: '不等於',
+    filterStartsWith: '開首為',
+    filterWeakEquals: '等於',
+    filteringByColumn: '正以 {column} 過濾：{filterType} {filterValue}',
+    goToFirstPage: '到第一頁',
+    goToLastPage: '到最後一頁',
+    goToNextPage: '下一頁',
+    goToPreviousPage: '上一頁',
+    grab: '拖曳',
+    groupByColumn: '按 {column} 分組',
+    groupedBy: '分組依據 ',
+    hideAll: '隱藏全部',
+    hideColumn: '隱藏 {column} 欄位',
+    max: '最大',
+    min: '最小',
+    move: '移動',
+    noRecordsToDisplay: '無紀錄可顯示',
+    noResultsFound: '未找到結果',
+    of: '/',
+    or: '或',
+    pinToLeft: '固定至左邊',
+    pinToRight: '固定至右邊',
+    resetColumnSize: '重置欄位大小',
+    resetOrder: '重置排序',
+    rowActions: '橫列動作',
+    rowNumber: '#',
+    rowNumbers: '橫列編號',
+    rowsPerPage: '每頁橫列數量',
+    save: '儲存',
+    search: '搜尋',
+    selectedCountOfRowCountRowsSelected: '已選擇橫列：{selectedCount}/{rowCount}',
+    select: '選擇',
+    showAll: '顯示全部',
+    showAllColumns: '顯示全部欄位',
+    showHideColumns: '顯示/隱藏 欄位',
+    showHideFilters: '顯示/隱藏 過濾條件',
+    showHideSearch: '顯示/隱藏 搜尋條件',
+    sortByColumnAsc: '按 {column} 順序排序',
+    sortByColumnDesc: '按 {column} 倒序排序',
+    sortedByColumnAsc: '已按 {column} 順序排序',
+    sortedByColumnDesc: '已按 {column} 倒序排序',
+    thenBy: '，然後以',
+    toggleDensity: '切換密度',
+    toggleFullScreen: '切換全螢幕',
+    toggleSelectAll: '切換選擇全部',
+    toggleSelectRow: '切換選擇橫列',
+    toggleVisibility: '切換可見度',
+    ungroupByColumn: '取消按 {column} 分組',
+    unpin: '取消固定',
+    unpinAll: '全部取消固定',
+    unsorted: '取消排序',
 };
 
 exports.MRT_Localization_ZH_HANT = MRT_Localization_ZH_HANT;

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "1.12.0",
+  "version": "1.13.0",
   "license": "MIT",
   "name": "material-react-table",
   "description": "A fully featured Material UI V5 implementation of TanStack React Table V8, written from the ground up in TypeScript.",
@@ -60,33 +60,33 @@
     "storybook:dev": "storybook dev -p 6006"
   },
   "devDependencies": {
-    "@babel/core": "^7.22.1",
-    "@babel/preset-react": "^7.22.3",
-    "@emotion/react": "^11.11.0",
+    "@babel/core": "^7.22.5",
+    "@babel/preset-react": "^7.22.5",
+    "@emotion/react": "^11.11.1",
     "@emotion/styled": "^11.11.0",
     "@faker-js/faker": "^8.0.2",
     "@mui/icons-material": "^5.11.16",
-    "@mui/material": "^5.13.2",
+    "@mui/material": "^5.13.4",
     "@rollup/plugin-babel": "^6.0.3",
-    "@rollup/plugin-node-resolve": "^15.0.2",
+    "@rollup/plugin-node-resolve": "^15.1.0",
     "@rollup/plugin-typescript": "^11.1.1",
     "@size-limit/preset-small-lib": "^8.2.4",
-    "@storybook/addon-a11y": "^7.0.18",
-    "@storybook/addon-essentials": "^7.0.18",
-    "@storybook/addon-interactions": "^7.0.18",
-    "@storybook/addon-links": "^7.0.18",
-    "@storybook/addon-storysource": "^7.0.18",
-    "@storybook/blocks": "^7.0.18",
-    "@storybook/react": "^7.0.18",
-    "@storybook/react-vite": "^7.0.18",
+    "@storybook/addon-a11y": "^7.0.20",
+    "@storybook/addon-essentials": "^7.0.20",
+    "@storybook/addon-interactions": "^7.0.20",
+    "@storybook/addon-links": "^7.0.20",
+    "@storybook/addon-storysource": "^7.0.20",
+    "@storybook/blocks": "^7.0.20",
+    "@storybook/react": "^7.0.20",
+    "@storybook/react-vite": "^7.0.20",
     "@storybook/testing-library": "^0.1.0",
-    "@types/node": "^20.2.5",
-    "@types/react": "^18.2.7",
+    "@types/node": "^20.3.0",
+    "@types/react": "^18.2.11",
     "@types/react-dom": "^18.2.4",
-    "@typescript-eslint/eslint-plugin": "^5.59.7",
-    "@typescript-eslint/parser": "^5.59.7",
+    "@typescript-eslint/eslint-plugin": "^5.59.9",
+    "@typescript-eslint/parser": "^5.59.9",
     "@vitejs/plugin-react": "^4.0.0",
-    "eslint": "^8.41.0",
+    "eslint": "^8.42.0",
     "eslint-plugin-mui-path-imports": "^0.0.15",
     "prop-types": "^15.8.1",
     "react": "^18.2.0",
@@ -97,10 +97,10 @@
     "rollup-plugin-dts": "^5.3.0",
     "rollup-plugin-peer-deps-external": "^2.2.4",
     "size-limit": "^8.2.4",
-    "storybook": "^7.0.18",
+    "storybook": "^7.0.20",
     "storybook-dark-mode": "^3.0.0",
-    "tslib": "^2.5.2",
-    "typescript": "^5.0.4",
+    "tslib": "^2.5.3",
+    "typescript": "^5.1.3",
     "vite": "^4.3.9"
   },
   "peerDependencies": {
@@ -113,7 +113,7 @@
   },
   "dependencies": {
     "@tanstack/match-sorter-utils": "8.8.4",
-    "@tanstack/react-table": "8.9.1",
+    "@tanstack/react-table": "8.9.2",
     "@tanstack/react-virtual": "3.0.0-beta.54",
     "highlight-words": "1.2.2"
   }

package/src/MaterialReactTable.tsx

@@ -24,6 +24,7 @@ export const MaterialReactTable = <TData extends Record<string, any> = {}>({
   enableColumnResizing = false,
   enableDensityToggle = true,
   enableExpandAll = true,
+  enableExpanding,
   enableFilterMatchHighlighting = true,
   enableFilters = true,
   enableFullScreenToggle = true,
@@ -122,6 +123,7 @@ export const MaterialReactTable = <TData extends Record<string, any> = {}>({
       enableColumnResizing={enableColumnResizing}
       enableDensityToggle={enableDensityToggle}
       enableExpandAll={enableExpandAll}
+      enableExpanding={enableExpanding}
       enableFilterMatchHighlighting={enableFilterMatchHighlighting}
       enableFilters={enableFilters}
       enableFullScreenToggle={enableFullScreenToggle}

package/src/body/MRT_TableBody.tsx

@@ -200,7 +200,6 @@ export const MRT_TableBody = ({
                 : (rowOrVirtualRow as MRT_Row);
               const props = {
                 columnVirtualizer,
-                key: row.id,
                 measureElement: rowVirtualizer?.measureElement,
                 numRows: rows.length,
                 row,
@@ -214,9 +213,9 @@ export const MRT_TableBody = ({
                   : undefined,
               };
               return memoMode === 'rows' ? (
-                <Memo_MRT_TableBodyRow {...props} />
+                <Memo_MRT_TableBodyRow key={row.id} {...props} />
               ) : (
-                <MRT_TableBodyRow {...props} />
+                <MRT_TableBodyRow key={row.id} {...props} />
               );
             })}
           </>

package/src/body/MRT_TableBodyRow.tsx

@@ -111,7 +111,6 @@ export const MRT_TableBodyRow = ({
             : (cellOrVirtualCell as MRT_Cell);
           const props = {
             cell,
-            key: cell.id,
             measureElement: columnVirtualizer?.measureElement,
             numRows,
             rowIndex,
@@ -127,9 +126,9 @@ export const MRT_TableBodyRow = ({
             !draggingRow &&
             editingCell?.id !== cell.id &&
             editingRow?.id !== row.id ? (
-            <Memo_MRT_TableBodyCell {...props} />
+            <Memo_MRT_TableBodyCell key={cell.id} {...props} />
           ) : (
-            <MRT_TableBodyCell {...props} />
+            <MRT_TableBodyCell key={cell.id} {...props} />
           );
         })}
         {virtualPaddingRight ? (

package/src/column.utils.ts

@@ -200,7 +200,11 @@ export const getDefaultColumnFilterFn = <
   columnDef: MRT_ColumnDef<TData>,
 ): MRT_FilterOption => {
   if (columnDef.filterVariant === 'multi-select') return 'arrIncludesSome';
-  if (columnDef.filterVariant === 'range') return 'betweenInclusive';
+  if (
+    columnDef.filterVariant === 'range' ||
+    columnDef.filterVariant === 'range-slider'
+  )
+    return 'betweenInclusive';
   if (
     columnDef.filterVariant === 'select' ||
     columnDef.filterVariant === 'checkbox'

package/src/head/MRT_TableHeadCellFilterContainer.tsx

@@ -1,8 +1,9 @@
 import Collapse from '@mui/material/Collapse';
 import { MRT_FilterRangeFields } from '../inputs/MRT_FilterRangeFields';
 import { MRT_FilterTextField } from '../inputs/MRT_FilterTextField';
-import { type MRT_Header, type MRT_TableInstance } from '../types';
 import { MRT_FilterCheckbox } from '../inputs/MRT_FilterCheckbox';
+import { MRT_FilterRangeSlider } from '../inputs/MRT_FilterRangeSlider';
+import { type MRT_Header, type MRT_TableInstance } from '../types';
 
 interface Props {
   header: MRT_Header;
@@ -19,6 +20,8 @@ export const MRT_TableHeadCellFilterContainer = ({ header, table }: Props) => {
     <Collapse in={showColumnFilters} mountOnEnter unmountOnExit>
       {columnDef.filterVariant === 'checkbox' ? (
         <MRT_FilterCheckbox column={column} table={table} />
+      ) : columnDef.filterVariant === 'range-slider' ? (
+        <MRT_FilterRangeSlider header={header} table={table} />
       ) : columnDef.filterVariant === 'range' ||
         ['between', 'betweenInclusive', 'inNumberRange'].includes(
           columnDef._filterFn,

package/src/inputs/MRT_FilterRangeFields.tsx

@@ -9,7 +9,7 @@ interface Props {
 
 export const MRT_FilterRangeFields = ({ header, table }: Props) => {
   return (
-    <Box sx={{ display: 'grid', gridTemplateColumns: '6fr 6fr', gap: '1rem' }}>
+    <Box sx={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '1rem' }}>
       <MRT_FilterTextField header={header} rangeFilterIndex={0} table={table} />
       <MRT_FilterTextField header={header} rangeFilterIndex={1} table={table} />
     </Box>

package/src/inputs/MRT_FilterRangeSlider.tsx

@@ -0,0 +1,134 @@
+import { FormHelperText, Slider, SliderProps, Stack } from '@mui/material';
+import { type MRT_TableInstance, type MRT_Header } from '../types';
+import { useEffect, useRef, useState } from 'react';
+
+interface Props {
+  header: MRT_Header;
+  table: MRT_TableInstance;
+}
+
+export const MRT_FilterRangeSlider = ({ header, table }: Props) => {
+  const {
+    options: {
+      localization,
+      muiTableHeadCellFilterSliderProps,
+      enableColumnFilterModes,
+    },
+    refs: { filterInputRefs },
+  } = table;
+  const { column } = header;
+  const { columnDef } = column;
+
+  const currentFilterOption = columnDef._filterFn;
+
+  const showChangeModeButton =
+    enableColumnFilterModes && columnDef.enableColumnFilterModes !== false;
+
+  const mTableHeadCellFilterTextFieldProps =
+    muiTableHeadCellFilterSliderProps instanceof Function
+      ? muiTableHeadCellFilterSliderProps({
+          column,
+          table,
+        })
+      : muiTableHeadCellFilterSliderProps;
+
+  const mcTableHeadCellFilterTextFieldProps =
+    columnDef.muiTableHeadCellFilterSliderProps instanceof Function
+      ? columnDef.muiTableHeadCellFilterSliderProps({
+          column,
+          table,
+        })
+      : columnDef.muiTableHeadCellFilterSliderProps;
+
+  const sliderProps = {
+    ...mTableHeadCellFilterTextFieldProps,
+    ...mcTableHeadCellFilterTextFieldProps,
+  } as SliderProps;
+
+  const [min, max] =
+    sliderProps.min !== undefined && sliderProps.max !== undefined
+      ? [sliderProps.min, sliderProps.max]
+      : column.getFacetedMinMaxValues() ?? [0, 0];
+  const [filterValues, setFilterValues] = useState([min, max]);
+  const columnFilterValue = column.getFilterValue();
+
+  const isMounted = useRef(false);
+
+  useEffect(() => {
+    if (isMounted.current) {
+      if (columnFilterValue === undefined) {
+        setFilterValues([min, max]);
+      } else if (Array.isArray(columnFilterValue)) {
+        if (columnFilterValue[0] <= min && columnFilterValue[1] >= max) {
+          column.setFilterValue(undefined);
+        } else {
+          setFilterValues(columnFilterValue);
+        }
+      }
+    }
+    isMounted.current = true;
+  }, [column.getFilterValue()]);
+
+  return (
+    <Stack>
+      <Slider
+        disableSwap
+        min={min}
+        max={max}
+        onChange={(_event, value) => {
+          setFilterValues(value as [number, number]);
+        }}
+        onChangeCommitted={(_event, value) => {
+          column.setFilterValue(value as [number, number]);
+        }}
+        value={filterValues}
+        valueLabelDisplay="auto"
+        {...sliderProps}
+        slotProps={{
+          input: {
+            ref: (node) => {
+              if (node) {
+                filterInputRefs.current[`${column.id}-0`] = node;
+                // @ts-ignore
+                if (sliderProps?.slotProps?.input?.ref) {
+                  //@ts-ignore
+                  sliderProps.slotProps.input.ref = node;
+                }
+              }
+            },
+          },
+        }}
+        sx={(theme) => ({
+          m: 'auto',
+          mt: !showChangeModeButton ? '10px' : '6px',
+          px: '4px',
+          width: 'calc(100% - 8px)',
+          ...(sliderProps?.sx instanceof Function
+            ? sliderProps.sx(theme)
+            : (sliderProps?.sx as any)),
+        })}
+      />
+      {showChangeModeButton ? (
+        <FormHelperText
+          sx={{
+            m: '-3px -6px',
+            fontSize: '0.75rem',
+            lineHeight: '0.8rem',
+            whiteSpace: 'nowrap',
+          }}
+        >
+          {localization.filterMode.replace(
+            '{filterType}',
+            // @ts-ignore
+            localization[
+              `filter${
+                currentFilterOption?.charAt(0)?.toUpperCase() +
+                currentFilterOption?.slice(1)
+              }`
+            ],
+          )}
+        </FormHelperText>
+      ) : null}
+    </Stack>
+  );
+};

package/src/inputs/MRT_FilterTextField.tsx

@@ -5,6 +5,7 @@ import {
   useEffect,
   useRef,
   useState,
+  useMemo,
 } from 'react';
 import Box from '@mui/material/Box';
 import Checkbox from '@mui/material/Checkbox';
@@ -102,6 +103,24 @@ export const MRT_FilterTextField = ({
     (allowedColumnFilterOptions === undefined ||
       !!allowedColumnFilterOptions?.length);
 
+  const facetedUniqueValues = column.getFacetedUniqueValues();
+
+  const filterSelectOptions = useMemo(
+    () =>
+      columnDef.filterSelectOptions ??
+      ((isSelectFilter || isMultiSelectFilter) && facetedUniqueValues
+        ? Array.from(facetedUniqueValues.keys()).sort((a, b) =>
+            a.localeCompare(b),
+          )
+        : undefined),
+    [
+      columnDef.filterSelectOptions,
+      facetedUniqueValues,
+      isMultiSelectFilter,
+      isSelectFilter,
+    ],
+  );
+
   const [anchorEl, setAnchorEl] = useState<null | HTMLElement>(null);
   const [filterValue, setFilterValue] = useState<string | string[]>(() =>
     isMultiSelectFilter
@@ -298,7 +317,7 @@ export const MRT_FilterTextField = ({
                 ) : (
                   <Box sx={{ display: 'flex', flexWrap: 'wrap', gap: '2px' }}>
                     {(selected as string[])?.map((value) => {
-                      const selectedValue = columnDef.filterSelectOptions?.find(
+                      const selectedValue = filterSelectOptions?.find(
                         (option) =>
                           option instanceof Object
                             ? option.value === value
@@ -350,7 +369,7 @@ export const MRT_FilterTextField = ({
           </MenuItem>
         )}
         {textFieldProps.children ??
-          columnDef?.filterSelectOptions?.map(
+          filterSelectOptions?.map(
             (option: string | { text: string; value: string }) => {
               let value: string;
               let text: string;
@@ -380,7 +399,9 @@ export const MRT_FilterTextField = ({
                       sx={{ mr: '0.5rem' }}
                     />
                   )}
-                  {text}
+                  {text}{' '}
+                  {!columnDef.filterSelectOptions &&
+                    `(${facetedUniqueValues.get(value)})`}
                 </MenuItem>
               );
             },

package/src/menus/MRT_FilterOptionMenu.tsx

@@ -137,9 +137,16 @@ export const MRT_FilterOptionMenu = <TData extends Record<string, any> = {}>({
   const { columnDef } = column ?? {};
   const currentFilterValue = column?.getFilterValue();
 
-  const allowedColumnFilterOptions =
+  let allowedColumnFilterOptions =
     columnDef?.columnFilterModeOptions ?? columnFilterModeOptions;
 
+  if (columnDef?.filterVariant === 'range-slider') {
+    allowedColumnFilterOptions = [
+      ...rangeModes,
+      ...(allowedColumnFilterOptions ?? []),
+    ].filter((option) => rangeModes.includes(option));
+  }
+
   const internalFilterOptions = useMemo(
     () =>
       mrtFilterOptions(localization).filter((filterOption) =>

package/src/table/MRT_TableRoot.tsx

@@ -2,7 +2,9 @@ import { useEffect, useMemo, useRef, useState } from 'react';
 import {
   getCoreRowModel,
   getExpandedRowModel,
+  getFacetedMinMaxValues,
   getFacetedRowModel,
+  getFacetedUniqueValues,
   getFilteredRowModel,
   getGroupedRowModel,
   getPaginationRowModel,
@@ -271,12 +273,32 @@ export const MRT_TableRoot: any = <TData extends Record<string, any> = {}>(
   const table = {
     ...useReactTable({
       getCoreRowModel: getCoreRowModel(),
-      getExpandedRowModel: getExpandedRowModel(),
-      getFacetedRowModel: getFacetedRowModel(),
-      getFilteredRowModel: getFilteredRowModel(),
-      getGroupedRowModel: getGroupedRowModel(),
-      getPaginationRowModel: getPaginationRowModel(),
-      getSortedRowModel: getSortedRowModel(),
+      getExpandedRowModel:
+        props.enableExpanding || props.enableGrouping
+          ? getExpandedRowModel()
+          : undefined,
+      getFacetedMinMaxValues: props.enableFacetedValues
+        ? getFacetedMinMaxValues()
+        : undefined,
+      getFacetedRowModel: props.enableFacetedValues
+        ? getFacetedRowModel()
+        : undefined,
+      getFacetedUniqueValues: props.enableFacetedValues
+        ? getFacetedUniqueValues()
+        : undefined,
+      getFilteredRowModel:
+        props.enableColumnFilters ||
+        props.enableGlobalFilter ||
+        props.enableFilters
+          ? getFilteredRowModel()
+          : undefined,
+      getGroupedRowModel: props.enableGrouping
+        ? getGroupedRowModel()
+        : undefined,
+      getPaginationRowModel: props.enablePagination
+        ? getPaginationRowModel()
+        : undefined,
+      getSortedRowModel: props.enableSorting ? getSortedRowModel() : undefined,
       onColumnOrderChange: setColumnOrder,
       onGroupingChange: setGrouping,
       getSubRows: (row) => row?.subRows,