rework filter tooltip label logic

KevinVandy · Feb 26, 2024 · f705a2d · f705a2d
1 parent d573ef7
commit f705a2d
Show file tree

Hide file tree

Showing 17 changed files with 246 additions and 142 deletions.
diff --git a/README.md b/README.md
@@ -16,9 +16,6 @@ View [Documentation](https://www.material-react-table.com/)
 </a>
 <a href="https://github.com/KevinVandy/material-react-table/blob/v2/LICENSE" target="_blank">
   <img alt="" src="https://badgen.net/github/license/KevinVandy/material-react-table?color=blue" />
-</a>
-<a href="http://makeapullrequest.com" target="_blank">
-  <img alt="" src="https://img.shields.io/badge/PRs-welcome-brightgreen.svg?style=flat-square" />
 </a>
  <a
   href="https://github.com/sponsors/kevinvandy"
@@ -27,14 +24,21 @@ View [Documentation](https://www.material-react-table.com/)
 >
   <img alt="" src="https://img.shields.io/badge/sponsor-violet" />
 </a>
+<a
+  href="https://discord.gg/5wqyRx6fnm"
+  target="_blank"
+  rel="noopener"
+>
+  <img alt="" src="https://dcbadge.vercel.app/api/server/5wqyRx6fnm?style=flat">
+</a>
 
 ## About
 
 ### _Quickly Create React Data Tables with Material Design_
 
-### __Built with [Material UI <sup>V5</sup>](https://mui.com) and [TanStack Table <sup>V8</sup>](https://tanstack.com/table/v8)__
+### **Built with [Material UI <sup>V5</sup>](https://mui.com) and [TanStack Table <sup>V8</sup>](https://tanstack.com/table/v8)**
 
-<img src="https://material-react-table.com/banner.png" alt="MRT" height="50"/>
+<img src="https://material-react-table.com/banner.png" alt="MRT" height="50" />
 
 > Want to use Mantine instead of Material UI? Check out [Mantine React Table](https://www.mantine-react-table.com)
 
@@ -46,19 +50,19 @@ View [Documentation](https://www.material-react-table.com/)
 
 ### Quick Examples
 
- - [Basic Table](https://www.material-react-table.com/docs/examples/basic/) (See Default Features)
- - [Minimal Table](https://www.material-react-table.com/docs/examples/minimal/) (Turn off Features like Pagination, Sorting, Filtering, and Toolbars)
- - [Advanced Table](https://www.material-react-table.com/docs/examples/advanced/) (See some of the Advanced Features)
- - [Custom Headless Table](https://www.material-react-table.com/docs/examples/custom-headless/) (Build your own table markup)
- - [Dragging / Ordering Examples](https://www.material-react-table.com/docs/examples/column-ordering/) (Drag and Drop)
- - [Editing (CRUD) Examples](https://www.material-react-table.com/docs/examples/editing-crud/) (Create, Edit, and Delete Rows)
- - [Expanding / Grouping Examples](https://www.material-react-table.com/docs/examples/aggregation-and-grouping/) (Sum, Average, Count, etc.)
- - [Filtering Examples](https://www.material-react-table.com/docs/examples/filter-variants/) (Faceted Values, Switching Filters, etc.)
- - [Sticky Pinning Examples](https://www.material-react-table.com/docs/examples/sticky-header/) (Sticky Headers, Sticky Columns, Sticky Rows, etc.)
- - [Remote Data Fetching Examples](https://www.material-react-table.com/docs/examples/react-query/) (Server-side Pagination, Sorting, and Filtering)
- - [Virtualized Examples](https://www.material-react-table.com/docs/examples/virtualized/) (10,000 rows at once!)
- - [Infinite Scrolling](https://www.material-react-table.com/docs/examples/infinite-scrolling/) (Fetch data as you scroll)
- - [Localization (i18n)](https://www.material-react-table.com/docs/guides/localization#built-in-locale-examples) (Over a dozen languages built-in)
+- [Basic Table](https://www.material-react-table.com/docs/examples/basic/) (See Default Features)
+- [Minimal Table](https://www.material-react-table.com/docs/examples/minimal/) (Turn off Features like Pagination, Sorting, Filtering, and Toolbars)
+- [Advanced Table](https://www.material-react-table.com/docs/examples/advanced/) (See some of the Advanced Features)
+- [Custom Headless Table](https://www.material-react-table.com/docs/examples/custom-headless/) (Build your own table markup)
+- [Dragging / Ordering Examples](https://www.material-react-table.com/docs/examples/column-ordering/) (Drag and Drop)
+- [Editing (CRUD) Examples](https://www.material-react-table.com/docs/examples/editing-crud/) (Create, Edit, and Delete Rows)
+- [Expanding / Grouping Examples](https://www.material-react-table.com/docs/examples/aggregation-and-grouping/) (Sum, Average, Count, etc.)
+- [Filtering Examples](https://www.material-react-table.com/docs/examples/filter-variants/) (Faceted Values, Switching Filters, etc.)
+- [Sticky Pinning Examples](https://www.material-react-table.com/docs/examples/sticky-header/) (Sticky Headers, Sticky Columns, Sticky Rows, etc.)
+- [Remote Data Fetching Examples](https://www.material-react-table.com/docs/examples/react-query/) (Server-side Pagination, Sorting, and Filtering)
+- [Virtualized Examples](https://www.material-react-table.com/docs/examples/virtualized/) (10,000 rows at once!)
+- [Infinite Scrolling](https://www.material-react-table.com/docs/examples/infinite-scrolling/) (Fetch data as you scroll)
+- [Localization (i18n)](https://www.material-react-table.com/docs/guides/localization#built-in-locale-examples) (Over a dozen languages built-in)
 
 View additional [storybook examples](https://www.material-react-table.dev/)
 
@@ -68,7 +72,7 @@ _All features can easily be enabled/disabled_
 
 _**Fully Fleshed out [Docs](https://www.material-react-table.com/docs/guides#guides) are available for all features**_
 
-- [x] 30-54kb gzipped - [Bundlephobia](https://bundlephobia.com/package/material-react-table)
+- [x] 30-56kb gzipped - [Bundlephobia](https://bundlephobia.com/package/material-react-table)
 - [x] Advanced TypeScript Generics Support (TypeScript Optional)
 - [x] Aggregation and Grouping (Sum, Average, Count, etc.)
 - [x] Cell Actions (Right-click Context Menu)
@@ -132,7 +136,10 @@ npm install material-react-table
 
 ```jsx
 import { useMemo, useState, useEffect } from 'react';
-import { MaterialReactTable, useMaterialReactTable } from 'material-react-table';
+import {
+  MaterialReactTable,
+  useMaterialReactTable,
+} from 'material-react-table';
 
 //data must be stable reference (useState, useMemo, useQuery, defined outside of component, etc.)
 const data = [
@@ -144,7 +151,7 @@ const data = [
     name: 'Sara',
     age: 25,
   },
-]
+];
 
 export default function App() {
   const columns = useMemo(
@@ -185,7 +192,7 @@ export default function App() {
   const someEventHandler = () => {
     //read the table state during an event from the table instance
     console.log(table.getState().sorting);
-  }
+  };
 
   return (
     <MaterialReactTable table={table} /> //other more lightweight MRT sub components also available

diff --git a/packages/material-react-table/.eslintrc b/packages/material-react-table/.eslintrc
@@ -2,7 +2,7 @@
   "extends": [
     "eslint:recommended",
     "plugin:@typescript-eslint/recommended",
-    "plugin:perfectionist/recommended-natural"
+    "plugin:perfectionist/recommended-natural",
   ],
   "parser": "@typescript-eslint/parser",
   "plugins": ["@typescript-eslint", "mui-path-imports", "perfectionist"],
@@ -16,12 +16,12 @@
       {
         "prefer": "type-imports",
         "disallowTypeAnnotations": true,
-        "fixStyle": "inline-type-imports"
-      }
+        "fixStyle": "inline-type-imports",
+      },
     ],
     "mui-path-imports/mui-path-imports": "warn",
     "perfectionist/sort-imports": [
-      "error",
+      "warn",
       {
         "type": "natural",
         "order": "asc",
@@ -34,7 +34,7 @@
           "sibling-type",
           "parent",
           "parent-type",
-          "style"
+          "style",
         ],
         "custom-groups": {
           "value": {
@@ -43,16 +43,16 @@
             "tanstack": "@tanstack/**",
             "mui": "@mui/**",
             "mrt": ["./MRT_**", "../**MRT_**", "../../src"],
-            "faker": "@faker/**"
+            "faker": "@faker/**",
           },
           "type": {
-            "react": "react"
-          }
+            "react": "react",
+          },
         },
-        "newlines-between": "never"
-      }
-    ]
+        "newlines-between": "never",
+      },
+    ],
   },
   "root": true,
-  "ignorePatterns": ["dist/", "locales/", "node_modules/"]
+  "ignorePatterns": ["dist/", "locales/", "node_modules/"],
 }
diff --git a/packages/material-react-table/src/components/head/MRT_TableHeadCell.tsx b/packages/material-react-table/src/components/head/MRT_TableHeadCell.tsx
@@ -15,6 +15,7 @@ import {
   type MRT_RowData,
   type MRT_TableInstance,
 } from '../../types';
+import { useColumnFilterInfo } from '../../utils/column.utils';
 import { getCommonMRTCellStyles } from '../../utils/style.utils';
 import { parseFromValuesOrFunc } from '../../utils/utils';
 
@@ -74,6 +75,11 @@ export const MRT_TableHeadCell = <TData extends MRT_RowData>({
     ...rest,
   };
 
+  const columnFilterInfo = useColumnFilterInfo({
+    header,
+    table,
+  });
+
   const isColumnPinned =
     enableColumnPinning &&
     columnDef.columnDefType !== 'group' &&
@@ -276,7 +282,11 @@ export const MRT_TableHeadCell = <TData extends MRT_RowData>({
                   {HeaderElement}
                 </Box>
                 {column.getCanFilter() && (
-                  <MRT_TableHeadCellFilterLabel header={header} table={table} />
+                  <MRT_TableHeadCellFilterLabel
+                    columnFilterInfo={columnFilterInfo}
+                    header={header}
+                    table={table}
+                  />
                 )}
                 {column.getCanSort() && (
                   <MRT_TableHeadCellSortLabel header={header} table={table} />
@@ -312,7 +322,11 @@ export const MRT_TableHeadCell = <TData extends MRT_RowData>({
             </Box>
           )}
       {columnFilterDisplayMode === 'subheader' && column.getCanFilter() && (
-        <MRT_TableHeadCellFilterContainer header={header} table={table} />
+        <MRT_TableHeadCellFilterContainer
+          columnFilterInfo={columnFilterInfo}
+          header={header}
+          table={table}
+        />
       )}
     </TableCell>
   );

diff --git a/packages/material-react-table/src/components/head/MRT_TableHeadCellFilterContainer.tsx b/packages/material-react-table/src/components/head/MRT_TableHeadCellFilterContainer.tsx
@@ -4,6 +4,7 @@ import {
   type MRT_RowData,
   type MRT_TableInstance,
 } from '../../types';
+import { type ColumnFilterInfo } from '../../utils/column.utils';
 import { MRT_FilterCheckbox } from '../inputs/MRT_FilterCheckbox';
 import { MRT_FilterRangeFields } from '../inputs/MRT_FilterRangeFields';
 import { MRT_FilterRangeSlider } from '../inputs/MRT_FilterRangeSlider';
@@ -12,11 +13,13 @@ import { MRT_FilterTextField } from '../inputs/MRT_FilterTextField';
 export interface MRT_TableHeadCellFilterContainerProps<
   TData extends MRT_RowData,
 > extends CollapseProps {
+  columnFilterInfo: ColumnFilterInfo;
   header: MRT_Header<TData>;
   table: MRT_TableInstance<TData>;
 }
 
 export const MRT_TableHeadCellFilterContainer = <TData extends MRT_RowData>({
+  columnFilterInfo,
   header,
   table,
   ...rest
@@ -28,6 +31,7 @@ export const MRT_TableHeadCellFilterContainer = <TData extends MRT_RowData>({
   const { showColumnFilters } = getState();
   const { column } = header;
   const { columnDef } = column;
+  const { isRangeFilter } = columnFilterInfo;
 
   return (
     <Collapse
@@ -40,13 +44,18 @@ export const MRT_TableHeadCellFilterContainer = <TData extends MRT_RowData>({
         <MRT_FilterCheckbox column={column} table={table} />
       ) : columnDef.filterVariant === 'range-slider' ? (
         <MRT_FilterRangeSlider header={header} table={table} />
-      ) : columnDef.filterVariant?.includes('range') ||
-        ['between', 'betweenInclusive', 'inNumberRange'].includes(
-          columnDef._filterFn,
-        ) ? (
-        <MRT_FilterRangeFields header={header} table={table} />
+      ) : isRangeFilter ? (
+        <MRT_FilterRangeFields
+          columnFilterInfo={columnFilterInfo}
+          header={header}
+          table={table}
+        />
       ) : (
-        <MRT_FilterTextField header={header} table={table} />
+        <MRT_FilterTextField
+          columnFilterInfo={columnFilterInfo}
+          header={header}
+          table={table}
+        />
       )}
     </Collapse>
   );