column vir reorg and time filter variants

KevinVandy · Jan 4, 2024 · 05822e7 · 05822e7 · vercel · Jan 4, 2024
1 parent ffb5172
commit 05822e7
Show file tree

Hide file tree

Showing 29 changed files with 544 additions and 288 deletions.
diff --git a/apps/material-react-table-docs/components/prop-tables/columnOptions.ts b/apps/material-react-table-docs/components/prop-tables/columnOptions.ts
@@ -513,12 +513,22 @@ export const columnOptions: ColumnOption[] = [
     columnOption: 'muiFilterDateTimePickerProps',
     defaultValue: '',
     description: '',
-    link: 'https://mui.com/x/api/date-pickers/datetime-picker/',
+    link: 'https://mui.com/x/api/date-pickers/date-time-picker/',
     linkText: 'MUI X DateTimePicker Props',
     source: 'Material UI',
     required: false,
     type: 'DateTimePickerProps | ({ column, rangeFilterIndex, table }) => DateTimePickerProps',
   },
+  {
+    columnOption: 'muiFilterTimePickerProps',
+    defaultValue: '',
+    description: '',
+    link: 'https://mui.com/x/api/date-pickers/time-picker/',
+    linkText: 'MUI X TimePicker Props',
+    source: 'Material UI',
+    required: false,
+    type: 'TimePickerProps | ({ column, rangeFilterIndex, table }) => TimePickerProps',
+  },
   {
     columnOption: 'muiFilterSliderProps',
     defaultValue: '',
@@ -612,7 +622,8 @@ export const columnOptions: ColumnOption[] = [
   {
     columnOption: 'visibleInShowHideMenu',
     defaultValue: 'true',
-    description: 'Set to false if you want to hide a column from the show/hide menu.',
+    description:
+      'Set to false if you want to hide a column from the show/hide menu.',
     link: '/docs/guides/column-hiding#hide-column-from-show-hide-menu',
     linkText: 'MRT Column Hiding Docs',
     source: 'MRT',

diff --git a/apps/material-react-table-docs/components/prop-tables/tableOptions.ts b/apps/material-react-table-docs/components/prop-tables/tableOptions.ts
@@ -1312,6 +1312,26 @@ export const tableOptions: TableOption[] = [
     required: false,
     type: 'DatePickerProps | ({ column, rangeFilterIndex, table }) => DatePickerProps',
   },
+  {
+    tableOption: 'muiFilterDateTimePickerProps',
+    defaultValue: '',
+    description: '',
+    link: 'https://mui.com/x/api/date-pickers/date-time-picker/',
+    linkText: 'MUI X DateTimePicker Props',
+    source: 'Material UI',
+    required: false,
+    type: 'DateTimePickerProps | ({ column, rangeFilterIndex, table }) => DateTimePickerProps',
+  },
+  {
+    tableOption: 'muiFilterTimePickerProps',
+    defaultValue: '',
+    description: '',
+    link: 'https://mui.com/x/api/date-pickers/time-picker/',
+    linkText: 'MUI X TimePicker Props',
+    source: 'Material UI',
+    required: false,
+    type: 'TimePickerProps | ({ column, rangeFilterIndex, table }) => TimePickerProps',
+  },
   {
     tableOption: 'muiFilterSliderProps',
     defaultValue: '',
@@ -1366,7 +1386,7 @@ export const tableOptions: TableOption[] = [
     tableOption: 'muiPaginationProps',
     defaultValue: '',
     description: '',
-    link: 'https://mui.com/material-ui/api/table-pagination/#props',
+    link: 'https://mui.com/material-ui/api/pagination/#props',
     linkText: 'Material UI TablePagination Props',
     required: false,
     source: 'Material UI',

diff --git a/apps/material-react-table-docs/examples/customize-filter-variants/sandbox/src/JS.js b/apps/material-react-table-docs/examples/customize-filter-variants/sandbox/src/JS.js
@@ -23,20 +23,6 @@ const Example = () => {
         filterVariant: 'text', // default
         size: 200,
       },
-      {
-        accessorFn: (originalRow) => new Date(originalRow.hireDate), //convert to date for sorting and filtering
-        id: 'hireDate',
-        header: 'Hire Date',
-        filterVariant: 'date-range',
-        Cell: ({ cell }) => cell.getValue().toLocaleDateString(), // convert back to string for display
-      },
-      {
-        accessorKey: 'age',
-        header: 'Age',
-        filterVariant: 'range',
-        filterFn: 'between',
-        size: 80,
-      },
       {
         accessorKey: 'salary',
         header: 'Salary',
@@ -59,6 +45,13 @@ const Example = () => {
             }),
         },
       },
+      {
+        accessorKey: 'age',
+        header: 'Age',
+        filterVariant: 'range',
+        filterFn: 'between',
+        size: 80,
+      },
       {
         accessorKey: 'city',
         header: 'City',
@@ -71,6 +64,30 @@ const Example = () => {
         filterVariant: 'multi-select',
         filterSelectOptions: usStateList, //custom options list (as opposed to faceted list)
       },
+      {
+        accessorFn: (originalRow) => new Date(originalRow.hireDate), //convert to date for sorting and filtering
+        id: 'hireDate',
+        header: 'Hire Date',
+        filterVariant: 'date-range',
+        Cell: ({ cell }) => cell.getValue().toLocaleDateString(), // convert back to string for display
+      },
+      {
+        accessorFn: (originalRow) => new Date(originalRow.arrivalTime), //convert to date for sorting and filtering
+        id: 'arrivalTime',
+        header: 'Arrival Time',
+        filterVariant: 'datetime-range',
+        Cell: ({ cell }) =>
+          `${cell.getValue().toLocaleDateString()} ${cell
+            .getValue()
+            .toLocaleTimeString()}`, // convert back to string for display
+      },
+      {
+        accessorFn: (originalRow) => new Date(originalRow.departureTime), //convert to date for sorting and filtering
+        id: 'departureTime',
+        header: 'Departure Time',
+        filterVariant: 'time-range',
+        Cell: ({ cell }) => cell.getValue().toLocaleTimeString(), // convert back to string for display
+      },
     ],
     [],
   );

diff --git a/apps/material-react-table-docs/examples/customize-filter-variants/sandbox/src/TS.tsx b/apps/material-react-table-docs/examples/customize-filter-variants/sandbox/src/TS.tsx
@@ -46,13 +46,6 @@ const Example = () => {
             }),
         },
       },
-      {
-        accessorFn: (originalRow) => new Date(originalRow.hireDate), //convert to date for sorting and filtering
-        id: 'hireDate',
-        header: 'Hire Date',
-        filterVariant: 'date-range',
-        Cell: ({ cell }) => cell.getValue<Date>().toLocaleDateString(), // convert back to string for display
-      },
       {
         accessorKey: 'age',
         header: 'Age',
@@ -72,6 +65,30 @@ const Example = () => {
         filterVariant: 'multi-select',
         filterSelectOptions: usStateList, //custom options list (as opposed to faceted list)
       },
+      {
+        accessorFn: (originalRow) => new Date(originalRow.hireDate), //convert to date for sorting and filtering
+        id: 'hireDate',
+        header: 'Hire Date',
+        filterVariant: 'date-range',
+        Cell: ({ cell }) => cell.getValue<Date>().toLocaleDateString(), // convert back to string for display
+      },
+      {
+        accessorFn: (originalRow) => new Date(originalRow.arrivalTime), //convert to date for sorting and filtering
+        id: 'arrivalTime',
+        header: 'Arrival Time',
+        filterVariant: 'datetime-range',
+        Cell: ({ cell }) =>
+          `${cell.getValue<Date>().toLocaleDateString()} ${cell
+            .getValue<Date>()
+            .toLocaleTimeString()}`, // convert back to string for display
+      },
+      {
+        accessorFn: (originalRow) => new Date(originalRow.departureTime), //convert to date for sorting and filtering
+        id: 'departureTime',
+        header: 'Departure Time',
+        filterVariant: 'time-range',
+        Cell: ({ cell }) => cell.getValue<Date>().toLocaleTimeString(), // convert back to string for display
+      },
     ],
     [],
   );

diff --git a/apps/material-react-table-docs/examples/customize-filter-variants/sandbox/src/makeData.ts b/apps/material-react-table-docs/examples/customize-filter-variants/sandbox/src/makeData.ts
@@ -2,17 +2,30 @@ export type Person = {
   isActive: boolean;
   name: string;
   hireDate: string;
+  arrivalTime: string;
+  departureTime: Date;
   age: number;
   salary: number;
   city: string;
   state: string;
 };
 
+//random time today
+const today = () => {
+  const today = new Date();
+  today.setHours(Math.floor(Math.random() * 24));
+  today.setMinutes(Math.floor(Math.random() * 60));
+  today.setSeconds(Math.floor(Math.random() * 60));
+  return today;
+};
+
 export const data = [
   {
     isActive: true,
     name: 'Tanner Linsley',
     hireDate: '2016-02-23T18:25:43.511Z',
+    arrivalTime: '2016-02-23T18:25:43.511Z',
+    departureTime: today(),
     age: 42,
     salary: 100_000,
     city: 'San Francisco',
@@ -22,6 +35,8 @@ export const data = [
     isActive: true,
     name: 'Kevin Vandy',
     hireDate: '2019-02-23T18:21:43.335',
+    arrivalTime: '2019-02-23T18:21:43.335',
+    departureTime: today(),
     age: 51,
     salary: 80_000,
     city: 'Richmond',
@@ -31,6 +46,8 @@ export const data = [
     isActive: false,
     name: 'John Doe',
     hireDate: '2014-02-23T18:25:43.511Z',
+    arrivalTime: '2014-02-23T18:25:43.511Z',
+    departureTime: today(),
     age: 27,
     salary: 120_000,
     city: 'Riverside',
@@ -40,6 +57,8 @@ export const data = [
     isActive: true,
     name: 'Jane Doe',
     hireDate: '2015-02-25T18:25:43.511Z',
+    arrivalTime: '2015-02-25T18:25:43.511Z',
+    departureTime: today(),
     age: 32,
     salary: 150_000,
     city: 'San Francisco',
@@ -49,6 +68,8 @@ export const data = [
     isActive: false,
     name: 'John Smith',
     hireDate: '2023-06-11T18:25:43.511Z',
+    arrivalTime: '2023-06-11T18:25:43.511Z',
+    departureTime: today(),
     age: 42,
     salary: 75_000,
     city: 'Los Angeles',
@@ -58,6 +79,8 @@ export const data = [
     isActive: true,
     name: 'Jane Smith',
     hireDate: '2019-02-23T18:21:43.335',
+    arrivalTime: '2019-02-23T18:21:43.335',
+    departureTime: today(),
     age: 51,
     salary: 56_000,
     city: 'Blacksburg',
@@ -67,6 +90,8 @@ export const data = [
     isActive: false,
     name: 'Samuel Jackson',
     hireDate: '2010-02-23T18:25:43.511Z',
+    arrivalTime: '2010-02-23T18:25:43.511Z',
+    departureTime: today(),
     age: 27,
     salary: 90_000,
     city: 'New York',

diff --git a/apps/material-react-table-docs/package.json b/apps/material-react-table-docs/package.json
@@ -22,11 +22,11 @@
     "@fortawesome/react-fontawesome": "^0.2.0",
     "@mdx-js/loader": "^3.0.0",
     "@mdx-js/react": "^3.0.0",
-    "@mui/icons-material": "^5.15.2",
-    "@mui/material": "^5.15.2",
+    "@mui/icons-material": "^5.15.3",
+    "@mui/material": "^5.15.3",
     "@mui/x-date-pickers": "^6.18.6",
     "@next/mdx": "^14.0.4",
-    "@tanstack/react-query": "^5.17.0",
+    "@tanstack/react-query": "^5.17.1",
     "@types/mdx": "^2.0.10",
     "dayjs": "^1.11.10",
     "export-to-csv": "^1.2.2",
@@ -40,7 +40,7 @@
     "react-dom": "18.2.0"
   },
   "devDependencies": {
-    "@tanstack/eslint-plugin-query": "^5.14.6",
+    "@tanstack/eslint-plugin-query": "^5.17.1",
     "@types/node": "^20.10.6",
     "@types/react": "^18.2.46",
     "@types/react-dom": "^18.2.18",

diff --git a/apps/material-react-table-docs/pages/changelog.mdx b/apps/material-react-table-docs/pages/changelog.mdx
@@ -12,6 +12,16 @@ import Head from 'next/head';
 
 ### Version 2
 
+#### Version 2.4.0 - 2024-01-04
+
+- Upgraded to TanStack Table `v8.11.3` for bug fixes with expanding and row selection
+- Added `'datetime'`, `'datetime-range'`, `'time'`, and `'time-range'` filter variants
+- Added Tooltips to pagination buttons
+- Added new `MRT_ColumnVirtualizer` and `MRT_RowVirtualizer` types
+- Added behavior to not render Save Row button unless either `onCreatingRowSave` or `onEditingRowSave` is provided
+- Allowed `muiColumnActionsButtonProps.children` to be overridden with a custom icon
+- Fixed issue with Sticky Row Pinning and Row Virtualization
+
 #### Version 2.3.1 - 2024-01-02
 
 - disable row selection for creating row

diff --git a/apps/material-react-table-docs/pages/docs/guides/column-filtering.mdx b/apps/material-react-table-docs/pages/docs/guides/column-filtering.mdx
@@ -44,8 +44,10 @@ Filtering is one of the most powerful features of Material React Table and is en
       'muiFilterAutocompleteProps',
       'muiFilterCheckboxProps',
       'muiFilterDatePickerProps',
+      'muiFilterDateTimePickerProps',
       'muiFilterSliderProps',
       'muiFilterTextFieldProps',
+      'muiFilterTimePickerProps',
       'onColumnFilterFnsChange',
       'onColumnFiltersChange',
       'onShowColumnFiltersChange',
@@ -70,8 +72,10 @@ Filtering is one of the most powerful features of Material React Table and is en
       'muiFilterAutocompleteProps',
       'muiFilterCheckboxProps',
       'muiFilterDatePickerProps',
+      'muiFilterDateTimePickerProps',
       'muiFilterSliderProps',
       'muiFilterTextFieldProps',
+      'muiFilterTimePickerProps',
       'renderColumnFilterModeMenuItems',
     ])
   }
@@ -102,10 +106,16 @@ Material React Table has several built-in filter variants for advanced filtering
 - `'range'` - shows min and max text fields for filtering a range of values
 - `'range-slider'` - shows a slider for filtering a range of values
 - `'date'` - shows a date picker for filtering by date values
+- `'datetime'` - shows a date and time picker for filtering by date and time values
 - `'date-range'` - shows a date range picker for filtering by date ranges
+- `'datetime-range'` - shows a date and time range picker for filtering by date and time ranges
+- `'time'` - shows a time picker for filtering by time values
+- `'time-range'` - shows a time range picker for filtering by time ranges
 - `'checkbox'` - shows a checkbox for filtering by `'true'` or `'false'` values
 
-> `'autocomplete'`, `'date'`, `'datetime'`, `'date-range'`, and `'datetime-range'` variants are new in v2
+> `'autocomplete'`, `'date'`, and `'date-range'`, variants are new in v2.0.0
+>
+> `datetime`, `datetime-range`, `time`, and `time-range` variants are new in v2.4.0
 
 <CustomizeFilterVariantsExample />
 

diff --git a/apps/test-cra/package.json b/apps/test-cra/package.json
@@ -5,10 +5,10 @@
   "dependencies": {
     "@emotion/react": "^11.11.3",
     "@emotion/styled": "^11.11.0",
-    "@mui/icons-material": "^5.15.2",
-    "@mui/material": "^5.15.2",
+    "@mui/icons-material": "^5.15.3",
+    "@mui/material": "^5.15.3",
     "@mui/x-date-pickers": "^6.18.6",
-    "@testing-library/jest-dom": "^6.1.6",
+    "@testing-library/jest-dom": "^6.2.0",
     "@testing-library/react": "^14.1.2",
     "@testing-library/user-event": "^14.5.2",
     "material-react-table": "workspace:*",

diff --git a/apps/test-remix/package.json b/apps/test-remix/package.json
@@ -12,14 +12,14 @@
   "dependencies": {
     "@emotion/react": "^11.11.3",
     "@emotion/styled": "^11.11.0",
-    "@mui/icons-material": "^5.15.2",
-    "@mui/material": "^5.15.2",
+    "@mui/icons-material": "^5.15.3",
+    "@mui/material": "^5.15.3",
     "@mui/x-date-pickers": "^6.18.6",
     "@remix-run/css-bundle": "^2.4.1",
     "@remix-run/node": "^2.4.1",
     "@remix-run/react": "^2.4.1",
     "@remix-run/serve": "^2.4.1",
-    "isbot": "^4.1.0",
+    "isbot": "^4.3.0",
     "material-react-table": "workspace:*",
     "react": "^18.2.0",
     "react-dom": "^18.2.0"

diff --git a/apps/test-vite/package.json b/apps/test-vite/package.json
@@ -12,8 +12,8 @@
   "dependencies": {
     "@emotion/react": "^11.11.3",
     "@emotion/styled": "^11.11.0",
-    "@mui/icons-material": "^5.15.2",
-    "@mui/material": "^5.15.2",
+    "@mui/icons-material": "^5.15.3",
+    "@mui/material": "^5.15.3",
     "@mui/x-date-pickers": "^6.18.6",
     "material-react-table": "workspace:*",
     "react": "^18.2.0",