Added option to hide header filter based on column meta, style header filter row and custom filter name mapping (#74)

Co-authored-by: Sandro Küng <sk@neolution.ch>
Co-authored-by: Timothy Trowbridge <92933708+neotrow@users.noreply.github.com>

Author: 3 people

CHANGELOG.md

@@ -7,6 +7,12 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [Unreleased]
 
+### Added
+
+- option `hideHeaderFilters` added to the column meta to hide the header filter (needs to be set to true for all columns)
+- option `headerFilterStyle` added to the column meta to be able to style the header filter
+- option `customFilterName` added to the column meta to be able to use different mappings than the `accessor` of the column description
+
 ### Fixed
 
 - `pkg.pr.new` workflow in order to prevent caching issues

src/lib/ReactDataTable/ReactDataTable.tsx

@@ -13,6 +13,7 @@ import { DndContext, KeyboardSensor, MouseSensor, TouchSensor, closestCenter, us
 import { restrictToVerticalAxis } from "@dnd-kit/modifiers";
 import { DraggableRow, InternalTableRow } from "./TableRows";
 import { SortableContext, verticalListSortingStrategy } from "@dnd-kit/sortable";
+import { getFilterValue, setFilterValue } from "../utils/customFilterMethods";
 
 interface TableBodyProps<TData> {
   enableDragAndDrop: boolean;
@@ -158,7 +159,7 @@ const ReactDataTable = <TData, TFilter extends FilterModel = Record<string, neve
                       </th>
                     ))}
                   </tr>
-                  {!withoutHeaderFilters && (
+                  {!withoutHeaderFilters && !headerGroup.headers.every((x) => !!x.column.columnDef.meta?.hideHeaderFilters) && (
                     <tr key={`${headerGroup.id}-col-filters`}>
                       {headerGroup.headers.map((header) => {
                         const {
@@ -168,7 +169,7 @@ const ReactDataTable = <TData, TFilter extends FilterModel = Record<string, neve
                         } = header;
 
                         return (
-                          <th key={`${header.id}-col-filter`}>
+                          <th key={`${header.id}-col-filter`} style={header.column.columnDef.meta?.headerFilterStyle}>
                             {header.index === 0 && (
                               <>
                                 {onEnter && (
@@ -203,12 +204,16 @@ const ReactDataTable = <TData, TFilter extends FilterModel = Record<string, neve
                             {header.column.getCanFilter() && (
                               <>
                                 {meta?.customFilter ? (
-                                  meta?.customFilter(header.column.getFilterValue(), header.column.setFilterValue)
+                                  meta?.customFilter(getFilterValue(header.column, table), (value) =>
+                                    setFilterValue(header.column, table, value),
+                                  )
                                 ) : meta?.dropdownFilter ? (
                                   <Input
                                     type="select"
                                     onChange={(e) => {
-                                      header.column.setFilterValue(
+                                      setFilterValue(
+                                        header.column,
+                                        table,
                                         // eslint-disable-next-line @typescript-eslint/no-explicit-any
                                         meta.dropdownFilter?.options[(e.target as any as HTMLSelectElement).selectedIndex]?.value ??
                                           e.target.value,
@@ -236,9 +241,9 @@ const ReactDataTable = <TData, TFilter extends FilterModel = Record<string, neve
                                 ) : (
                                   <Input
                                     type="text"
-                                    value={(header.column.getFilterValue() as string) ?? ""}
+                                    value={(getFilterValue(header.column, table) as string) ?? ""}
                                     onChange={(e) => {
-                                      header.column.setFilterValue(e.target.value);
+                                      setFilterValue(header.column, table, e.target.value);
                                       if (!onEnter && manualPagination) {
                                         resetPageIndex(true);
                                       }

src/lib/utils/customFilterMethods.ts

@@ -0,0 +1,22 @@
+import { Column, Table } from "@tanstack/react-table";
+
+const setFilterValue = <TData>(column: Column<TData, unknown>, table: Table<TData>, value: unknown) => {
+  const customFilterName = column.columnDef.meta?.customFilterName;
+
+  if (customFilterName) {
+    table.setColumnFilters((prev) => [...prev.filter((x) => x.id !== customFilterName), { id: customFilterName, value }]);
+  } else {
+    column.setFilterValue(value);
+  }
+};
+
+const getFilterValue = <TData>(column: Column<TData, unknown>, table: Table<TData>): unknown => {
+  const customFilterName = column.columnDef.meta?.customFilterName;
+
+  if (customFilterName) {
+    return table.getState().columnFilters.find((x) => x.id === customFilterName)?.value;
+  }
+  return column.getFilterValue();
+};
+
+export { setFilterValue, getFilterValue };

src/react-table.d.ts

@@ -62,6 +62,21 @@ declare module "@tanstack/table-core" {
      * Prevents the column from being drawn
      */
     isHidden?: boolean;
+
+    /**
+     * Set to true to hide the header filters
+     */
+    hideHeaderFilters?: boolean;
+
+    /**
+     * Sets the header filter style
+     */
+    headerFilterStyle?: CSSProperties;
+
+    /**
+     * Custom filter name to use instead of the default used accessor name
+     */
+    customFilterName?: string;
   }
 
   interface RowSelectionOptions<TData extends RowData> {