date filters feature

apps/material-react-table-docs/package.json

@@ -22,31 +22,31 @@
     "@fortawesome/react-fontawesome": "^0.2.0",
     "@mdx-js/loader": "^2.3.0",
     "@mdx-js/react": "^2.3.0",
-    "@mui/icons-material": "^5.14.11",
-    "@mui/material": "^5.14.11",
-    "@mui/x-date-pickers": "^6.15.0",
-    "@next/mdx": "^13.5.3",
-    "@tanstack/react-query": "^4.35.3",
+    "@mui/icons-material": "^5.14.12",
+    "@mui/material": "^5.14.12",
+    "@mui/x-date-pickers": "^6.16.1",
+    "@next/mdx": "^13.5.4",
+    "@tanstack/react-query": "^4.35.7",
     "@types/mdx": "^2.0.8",
     "dayjs": "^1.11.10",
-    "export-to-csv": "^1.0.0",
+    "export-to-csv": "^1.1.0",
     "jspdf": "^2.5.1",
     "jspdf-autotable": "^3.6.0",
     "material-react-table": "workspace:*",
-    "next": "13.5.3",
+    "next": "13.5.4",
     "next-sitemap": "^4.2.3",
     "prism-react-renderer": "^2.1.0",
     "react": "18.2.0",
     "react-dom": "18.2.0"
   },
   "devDependencies": {
-    "@types/node": "^20.7.1",
-    "@types/react": "^18.2.23",
-    "@types/react-dom": "^18.2.8",
-    "@typescript-eslint/eslint-plugin": "^6.7.3",
-    "@typescript-eslint/parser": "^6.7.3",
+    "@types/node": "^20.8.2",
+    "@types/react": "^18.2.25",
+    "@types/react-dom": "^18.2.10",
+    "@typescript-eslint/eslint-plugin": "^6.7.4",
+    "@typescript-eslint/parser": "^6.7.4",
     "eslint": "8.50.0",
-    "eslint-config-next": "13.5.3",
+    "eslint-config-next": "13.5.4",
     "next-plausible": "^3.11.1",
     "raw-loader": "^4.0.2",
     "typescript": "5.2.2"

package.json

@@ -26,7 +26,7 @@
   },
   "devDependencies": {
     "prettier": "^3.0.3",
-    "turbo": "^1.10.14"
+    "turbo": "^1.10.15"
   },
   "engines": {
     "node": ">=14.0.0"

packages/material-react-table/.storybook/preview.tsx

@@ -2,6 +2,8 @@ import React, { useEffect } from 'react';
 import { Preview } from '@storybook/react';
 import { useDarkMode } from 'storybook-dark-mode';
 import { createTheme, Link, ThemeProvider, Typography } from '@mui/material';
+import { LocalizationProvider } from '@mui/x-date-pickers';
+import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
 
 const lightTheme = createTheme({
   palette: { mode: 'light' },
@@ -37,38 +39,40 @@ const preview: Preview = {
 
       return (
         <ThemeProvider theme={defaultTheme}>
-          <Typography
-            sx={{
-              pb: '0.5rem',
-              color: useDarkMode() ? '#fff' : '#666',
-            }}
-            variant="subtitle2"
-          >
-            Looking for the main docs site? Click{' '}
-            <Link
-              href="https://www.material-react-table.com"
-              target="_blank"
-              rel="noopener"
+          <LocalizationProvider dateAdapter={AdapterDayjs}>
+            <Typography
+              sx={{
+                pb: '0.5rem',
+                color: useDarkMode() ? '#fff' : '#666',
+              }}
+              variant="subtitle2"
             >
-              here.
-            </Link>
-          </Typography>
-          <Typography
-            variant="subtitle2"
-            sx={{
-              pb: '1rem',
-              color: useDarkMode() ? '#fff' : '#666',
-            }}
-          >
-            View Source code for these examples in the code tab below or{' '}
-            <Link
-              href="https://github.com/KevinVandy/material-react-table/tree/v2/packages/material-react-table/stories/features"
-              target="_blank"
+              Looking for the main docs site? Click{' '}
+              <Link
+                href="https://www.material-react-table.com"
+                target="_blank"
+                rel="noopener"
+              >
+                here.
+              </Link>
+            </Typography>
+            <Typography
+              variant="subtitle2"
+              sx={{
+                pb: '1rem',
+                color: useDarkMode() ? '#fff' : '#666',
+              }}
             >
-              here on GitHub.
-            </Link>
-          </Typography>
-          <Story {...context} />
+              View Source code for these examples in the code tab below or{' '}
+              <Link
+                href="https://github.com/KevinVandy/material-react-table/tree/v2/packages/material-react-table/stories/features"
+                target="_blank"
+              >
+                here on GitHub.
+              </Link>
+            </Typography>
+            <Story {...context} />
+          </LocalizationProvider>
         </ThemeProvider>
       );
     },

packages/material-react-table/package.json

@@ -65,27 +65,27 @@
     "@emotion/react": "^11.11.1",
     "@emotion/styled": "^11.11.0",
     "@faker-js/faker": "^8.1.0",
-    "@mui/icons-material": "^5.14.11",
-    "@mui/material": "^5.14.11",
-    "@mui/x-date-pickers": "^6.15.0",
-    "@rollup/plugin-babel": "^6.0.3",
-    "@rollup/plugin-node-resolve": "^15.2.1",
-    "@rollup/plugin-typescript": "^11.1.4",
+    "@mui/icons-material": "^5.14.12",
+    "@mui/material": "^5.14.12",
+    "@mui/x-date-pickers": "^6.16.1",
+    "@rollup/plugin-babel": "^6.0.4",
+    "@rollup/plugin-node-resolve": "^15.2.2",
+    "@rollup/plugin-typescript": "^11.1.5",
     "@size-limit/preset-small-lib": "^9.0.0",
-    "@storybook/addon-a11y": "^7.4.5",
-    "@storybook/addon-essentials": "^7.4.5",
-    "@storybook/addon-interactions": "^7.4.5",
-    "@storybook/addon-links": "^7.4.5",
-    "@storybook/addon-storysource": "^7.4.5",
-    "@storybook/blocks": "^7.4.5",
-    "@storybook/react": "^7.4.5",
-    "@storybook/react-vite": "^7.4.5",
-    "@storybook/testing-library": "^0.2.1",
-    "@types/node": "^20.7.1",
-    "@types/react": "^18.2.23",
-    "@types/react-dom": "^18.2.8",
-    "@typescript-eslint/eslint-plugin": "^6.7.3",
-    "@typescript-eslint/parser": "^6.7.3",
+    "@storybook/addon-a11y": "^7.4.6",
+    "@storybook/addon-essentials": "^7.4.6",
+    "@storybook/addon-interactions": "^7.4.6",
+    "@storybook/addon-links": "^7.4.6",
+    "@storybook/addon-storysource": "^7.4.6",
+    "@storybook/blocks": "^7.4.6",
+    "@storybook/react": "^7.4.6",
+    "@storybook/react-vite": "^7.4.6",
+    "@storybook/testing-library": "^0.2.2",
+    "@types/node": "^20.8.2",
+    "@types/react": "^18.2.25",
+    "@types/react-dom": "^18.2.10",
+    "@typescript-eslint/eslint-plugin": "^6.7.4",
+    "@typescript-eslint/parser": "^6.7.4",
     "@vitejs/plugin-react": "^4.1.0",
     "eslint": "^8.50.0",
     "eslint-plugin-mui-path-imports": "^0.0.15",
@@ -99,25 +99,25 @@
     "rollup-plugin-dts": "^6.0.2",
     "rollup-plugin-peer-deps-external": "^2.2.4",
     "size-limit": "^9.0.0",
-    "storybook": "^7.4.5",
+    "storybook": "^7.4.6",
     "storybook-dark-mode": "^3.0.1",
     "tslib": "^2.6.2",
     "typescript": "^5.2.2",
-    "vite": "^4.4.9"
+    "vite": "^4.4.11"
   },
   "peerDependencies": {
     "@emotion/react": ">=11.11",
     "@emotion/styled": ">=11.11",
     "@mui/icons-material": ">=5.11",
     "@mui/material": ">=5.13",
-    "@mui/x-date-pickers": ">=6.8.0",
+    "@mui/x-date-pickers": ">=6.15.0",
     "react": ">=18.0",
     "react-dom": ">=18.0"
   },
   "dependencies": {
     "@tanstack/match-sorter-utils": "8.8.4",
-    "@tanstack/react-table": "8.10.3",
-    "@tanstack/react-virtual": "3.0.0-beta.61",
+    "@tanstack/react-table": "8.10.4",
+    "@tanstack/react-virtual": "3.0.0-beta.63",
     "highlight-words": "1.2.2"
   }
 }

packages/material-react-table/src/column.utils.ts

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

packages/material-react-table/src/head/MRT_TableHeadCellFilterContainer.tsx

@@ -34,7 +34,7 @@ export const MRT_TableHeadCellFilterContainer = <
         <MRT_FilterCheckbox column={column} table={table} />
       ) : columnDef.filterVariant === 'range-slider' ? (
         <MRT_FilterRangeSlider header={header} table={table} />
-      ) : columnDef.filterVariant === 'range' ||
+      ) : columnDef.filterVariant?.includes('range') ||
         ['between', 'betweenInclusive', 'inNumberRange'].includes(
           columnDef._filterFn,
         ) ? (

packages/material-react-table/src/head/MRT_TableHeadCellFilterLabel.tsx

@@ -39,7 +39,7 @@ export const MRT_TableHeadCellFilterLabel = <
     (!!filterValue && !Array.isArray(filterValue));
 
   const isRangeFilter =
-    columnDef.filterVariant === 'range' ||
+    columnDef.filterVariant?.includes('range') ||
     ['between', 'betweenInclusive', 'inNumberRange'].includes(
       columnDef._filterFn,
     );
@@ -67,11 +67,11 @@ export const MRT_TableHeadCellFilterLabel = <
           .replace(
             '{filterValue}',
             `"${
-              Array.isArray(column.getFilterValue())
-                ? (column.getFilterValue() as [string, string]).join(
+              Array.isArray(filterValue)
+                ? (filterValue as [string, string]).join(
                     `" ${isRangeFilter ? localization.and : localization.or} "`,
                   )
-                : (column.getFilterValue() as string)
+                : (filterValue as string)
             }"`,
           )
           .replace('" "', '');
@@ -81,9 +81,9 @@ export const MRT_TableHeadCellFilterLabel = <
       <Grow
         in={
           columnFilterDisplayMode === 'popover' ||
-          (!!column.getFilterValue() && !isRangeFilter) ||
+          (!!filterValue && !isRangeFilter) ||
           (isRangeFilter && // @ts-ignore
-            (!!column.getFilterValue()?.[0] || !!column.getFilterValue()?.[1]))
+            (!!filterValue?.[0] || !!filterValue?.[1]))
         }
         unmountOnExit
       >