display predefined filter (#39)

Author: neotob

CHANGELOG.md

@@ -7,6 +7,10 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [Unreleased]
 
+### Fixed
+
+- Display predefined filter in filter row
+
 ## [2.5.0] - 2023-05-25
 
 ### dependabot: \#33 Bump loader-utils from 1.4.0 to 1.4.2

src/lib/DataTable/DataTableInterfaces.ts

@@ -1,4 +1,4 @@
-/* eslint max-lines: ["error", 260]  */ // Increased max-lines due to the addition of definitions going above the predefined limit.
+/* eslint max-lines: ["error", 270]  */ // Increased max-lines due to the addition of definitions going above the predefined limit.
 import { CSSProperties } from "react";
 import { ActionsPosition, CellFunction, ColumnFilterType, ListSortDirection, QueryFunction, RouteParams } from "./DataTableTypes";
 import { IconProp } from "@fortawesome/fontawesome-svg-core";
@@ -150,6 +150,7 @@ export interface DataTablePredefinedActionLink<T, TRouteNames> {
 interface LinkProps {
   route: any;
   params?: RouteParams;
+  children: JSX.Element;
 }
 
 export interface DataTablePredefinedActionLinkGetParamsParams<T> {

src/lib/DataTable/DataTableRouted.tsx

@@ -155,7 +155,7 @@ export function DataTableRouted<T, TFilter, TRouteNames>({
             )}
             {actionsPosition == ActionsPosition.Right && <ActionsHeaderTitleCell<T, TRouteNames> actions={actions} />}
           </tr>
-          <DataTableFilterRow
+          <DataTableFilterRow<T, TFilter>
             actions={actions}
             columns={columns}
             onSearch={onSearch}
@@ -164,6 +164,7 @@ export function DataTableRouted<T, TFilter, TRouteNames>({
             setFilterRef={setFilterRef}
             translations={dataTableTranslations}
             actionsPosition={actionsPosition}
+            predefinedFilter={predefinedFilter}
           />
         </thead>
         <tbody>

src/lib/DataTableFilterRow/DataTableFilterRow.tsx

@@ -3,65 +3,73 @@ import { Input } from "reactstrap";
 import { DataTableColumnDescription, DataTableActions, Filters, FilterTranslations } from "../DataTable/DataTableInterfaces";
 import { ColumnFilterType, ActionsPosition } from "../DataTable/DataTableTypes";
 import { ActionsHeaderFilterCell } from "../DataTable/Actions/ActionsHeaderFilterCell";
+import { getDeepValue } from "../Utils/DeepValue";
 
-interface DataTableFilterRowProps<T> {
+interface DataTableFilterRowProps<T, TFilter> {
   columns: DataTableColumnDescription<T>[];
   actions?: DataTableActions<T>;
   actionsPosition?: ActionsPosition;
   translations: FilterTranslations;
   filterPossible: boolean;
+  predefinedFilter?: TFilter;
   getFilterRefs(): Filters;
   setFilterRef(filterName: string, ref: HTMLInputElement): void;
   onSearch(): void;
 }
 
-export function DataTableFilterRow<T>({
+export function DataTableFilterRow<T, TFilter>({
   columns,
   actions,
   actionsPosition,
   filterPossible = true,
   translations,
+  predefinedFilter,
   getFilterRefs,
   setFilterRef,
   onSearch,
-}: DataTableFilterRowProps<T>) {
+}: DataTableFilterRowProps<T, TFilter>) {
   if (!filterPossible || columns.filter((column) => column.filter).length <= 0) return <React.Fragment />;
   return (
     <tr>
       {actionsPosition == ActionsPosition.Left && (
         <ActionsHeaderFilterCell<T> onSearch={onSearch} translations={translations} actions={actions} getFilterRefs={getFilterRefs} />
       )}
-      {columns.map((column) => (
-        <th key={column.dataField}>
-          {column.filter && column.filter.filterType === ColumnFilterType.String && (
-            <Input
-              bsSize="sm"
-              id={`filter-${column.dataField}`}
-              innerRef={(ref) => ref && ref instanceof HTMLInputElement && setFilterRef(column.dataField, ref)}
-              onKeyDown={(e) => {
-                if (e.key === "Enter") onSearch();
-              }}
-            />
-          )}
-          {column.filter && column.filter.filterType === ColumnFilterType.Enum && column.enumValues && (
-            <Input
-              bsSize="sm"
-              innerRef={(ref) => ref && ref instanceof HTMLSelectElement && setFilterRef(column.dataField, ref as HTMLInputElement)}
-              type="select"
-              onKeyDown={(e) => {
-                if (e.key === "Enter") onSearch();
-              }}
-              onChange={() => onSearch()}
-            >
-              {column.enumValues.map((item) => (
-                <option value={item.value ?? "null"} key={`${column.dataField}_filter_${item.value}`}>
-                  {item.text}
-                </option>
-              ))}
-            </Input>
-          )}
-        </th>
-      ))}
+      {columns.map((column) => {
+        var defaultValue = predefinedFilter ? getDeepValue(predefinedFilter, column.dataField) : undefined;
+        return (
+          <th key={column.dataField}>
+            {column.filter && column.filter.filterType === ColumnFilterType.String && (
+              <Input
+                bsSize="sm"
+                id={`filter-${column.dataField}`}
+                innerRef={(ref) => ref && ref instanceof HTMLInputElement && setFilterRef(column.dataField, ref)}
+                defaultValue={defaultValue}
+                onKeyDown={(e) => {
+                  if (e.key === "Enter") onSearch();
+                }}
+              />
+            )}
+            {column.filter && column.filter.filterType === ColumnFilterType.Enum && column.enumValues && (
+              <Input
+                bsSize="sm"
+                innerRef={(ref) => ref && ref instanceof HTMLSelectElement && setFilterRef(column.dataField, ref as HTMLInputElement)}
+                type="select"
+                defaultValue={defaultValue}
+                onKeyDown={(e) => {
+                  if (e.key === "Enter") onSearch();
+                }}
+                onChange={() => onSearch()}
+              >
+                {column.enumValues.map((item) => (
+                  <option value={item.value ?? "null"} key={`${column.dataField}_filter_${item.value}`}>
+                    {item.text}
+                  </option>
+                ))}
+              </Input>
+            )}
+          </th>
+        );
+      })}
       {actionsPosition == ActionsPosition.Right && (
         <ActionsHeaderFilterCell<T> onSearch={onSearch} translations={translations} actions={actions} getFilterRefs={getFilterRefs} />
       )}

test/DataTable/DataTable.test.tsx

@@ -189,6 +189,7 @@ describe("DataTable", () => {
         predefinedItemsPerPage={20}
         tableClassName={tableClassName}
         tableStyle={tableStyle}
+        predefinedFilter={{ name: "Name 001" }}
       />,
     );
 

test/DataTable/__snapshots__/DataTable.test.tsx.snap

@@ -73,13 +73,15 @@ exports[`DataTable renders dynamic correctly 1`] = `
           class="form-control-sm form-control"
           id="filter-name"
           type="text"
+          value="Name 001"
         />
       </th>
       <th>
         <input
           class="form-control-sm form-control"
           id="filter-count"
           type="text"
+          value=""
         />
       </th>
       <th>
@@ -108,6 +110,7 @@ exports[`DataTable renders dynamic correctly 1`] = `
           class="form-control-sm form-control"
           id="filter-dateCreated"
           type="text"
+          value=""
         />
       </th>
     </tr>