Search table nested params (#5444)

* Clean-up, add table "filterFromLeafRows" option Signed-off-by: Antonio Gamez Diaz <agamez@vmware.com> * Add workaround in the column search function Signed-off-by: Antonio Gamez Diaz <agamez@vmware.com> Signed-off-by: Antonio Gamez Diaz <agamez@vmware.com>
vmware-tanzu · Oct 10, 2022 · 3ac3814 · 3ac3814
1 parent 073ffe9
commit 3ac3814
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 5 deletions.
diff --git a/...loymentFormBody/BasicDeploymentForm/TabularSchemaEditorTable/TabularSchemaEditorTable.tsx b/...loymentFormBody/BasicDeploymentForm/TabularSchemaEditorTable/TabularSchemaEditorTable.tsx
@@ -21,10 +21,10 @@ import Column from "components/js/Column";
 import Row from "components/js/Row";
 import LoadingWrapper from "components/LoadingWrapper";
 import { useState } from "react";
+import { IBasicFormParam } from "shared/types";
 import DebouncedInput from "./DebouncedInput";
-import { fuzzyFilter } from "./TabularSchemaEditorTableHelpers";
 import "./TabularSchemaEditorTable.css";
-import { IBasicFormParam } from "shared/types";
+import { fuzzyFilter } from "./TabularSchemaEditorTableHelpers";
 
 export interface TabularSchemaEditorTableProps {
   columns: any;
@@ -45,9 +45,6 @@ export default function TabularSchemaEditorTable(props: TabularSchemaEditorTable
   const table = useReactTable({
     data,
     columns,
-    filterFns: {
-      fuzzy: fuzzyFilter,
-    },
     state: {
       columnFilters,
       globalFilter,
@@ -64,6 +61,7 @@ export default function TabularSchemaEditorTable(props: TabularSchemaEditorTable
     getSortedRowModel: getSortedRowModel(),
     getSubRows: (row: IBasicFormParam) => row.params,
     globalFilterFn: fuzzyFilter,
+    filterFromLeafRows: true,
     onColumnFiltersChange: setColumnFilters,
     onExpandedChange: setGlobalExpanded,
     onGlobalFilterChange: setGlobalFilter,

diff --git a/...tFormBody/BasicDeploymentForm/TabularSchemaEditorTable/TabularSchemaEditorTableHelpers.ts b/...tFormBody/BasicDeploymentForm/TabularSchemaEditorTable/TabularSchemaEditorTableHelpers.ts
@@ -7,6 +7,15 @@ import { FilterFn, SortingFn, sortingFns } from "@tanstack/react-table";
 export const fuzzyFilter: FilterFn<any> = (row, columnId, value, addMeta) => {
   // Rank the item
   const itemRank = rankItem(row.getValue(columnId), value);
+
+  // The search in nested rows should be supported by the library, but it's not yet
+  // We will mark a parent row as a match if any of its children match
+  // https://github.com/vmware-tanzu/kubeapps/issues/5437
+  row.subRows?.forEach((subRow: any) => {
+    const subRowRank = rankItem(subRow.getValue(columnId), value);
+    itemRank.passed = subRowRank.passed || itemRank.passed;
+  });
+
   // Store the itemRank info
   addMeta({ itemRank });
   // Return if the item should be filtered in/out