Add global fuzzy search and columns visibility to RichTable

src/common/RichTable/RichTable.js

@@ -7,18 +7,22 @@
 
 import React, { useMemo, useState } from "react";
 
+import { rankItem } from "@tanstack/match-sorter-utils";
 import {
     flexRender,
     getCoreRowModel,
     getSortedRowModel,
+    getFilteredRowModel,
     getPaginationRowModel,
     useReactTable,
 } from "@tanstack/react-table";
 import PropTypes from "prop-types";
 
 import RichTableBody from "./RichTableBody";
+import RichTableColumnsDropdown from "./RichTableColumnsDropdown";
 import RichTableHeader from "./RichTableHeader";
 import RichTablePagination from "./RichTablePagination";
+import Input from "../../bootstrap/Input";
 
 RichTable.propTypes = {
     /** Columns to be displayed in the table */
@@ -46,36 +50,69 @@ export default function RichTable({
         pageIndex,
         pageSize,
     });
+    const [globalFilter, setGlobalFilter] = useState("");
+    const [columnVisibility, setColumnVisibility] = useState({});
 
     const table = useReactTable({
         data,
         columns: tableColumns,
+        filterFns: {
+            fuzzy: fuzzyFilter,
+        },
+        globalFilterFn: "fuzzy",
         getCoreRowModel: getCoreRowModel(),
         getSortedRowModel: getSortedRowModel(),
         getPaginationRowModel: getPaginationRowModel(),
-        onPaginationChange: setPagination,
+        getFilteredRowModel: getFilteredRowModel(),
         onSortingChange: setSorting,
+        onPaginationChange: setPagination,
+        onGlobalFilterChange: setGlobalFilter,
+        onColumnVisibilityChange: setColumnVisibility,
         state: {
             sorting,
             pagination,
+            globalFilter,
+            columnVisibility,
         },
     });
 
     const paginationIsNeeded = data.length > pageSize && withPagination;
 
     return (
-        <div className="table-responsive">
-            <table className="table table-hover text-nowrap">
-                <RichTableHeader table={table} flexRender={flexRender} />
-                <RichTableBody table={table} flexRender={flexRender} />
-            </table>
-            {paginationIsNeeded && (
-                <RichTablePagination
-                    table={table}
-                    tablePageSize={pageSize}
-                    allRows={data.length}
+        <div>
+            <div className="d-flex justify-content-between align-items-center">
+                <Input
+                    className="me-3"
+                    type="text"
+                    placeholder={_("Search…")}
+                    value={globalFilter ?? ""}
+                    onChange={(e) => setGlobalFilter(String(e.target.value))}
                 />
-            )}
+                <RichTableColumnsDropdown columns={table.getAllLeafColumns()} />
+            </div>
+            <div className="table-responsive">
+                <table className="table table-hover text-nowrap">
+                    <RichTableHeader table={table} flexRender={flexRender} />
+                    <RichTableBody
+                        table={table}
+                        columns={tableColumns}
+                        flexRender={flexRender}
+                    />
+                </table>
+                {paginationIsNeeded && (
+                    <RichTablePagination
+                        table={table}
+                        tablePageSize={pageSize}
+                        allRows={data.length}
+                    />
+                )}
+            </div>
         </div>
     );
 }
+
+function fuzzyFilter(row, columnId, value, addMeta) {
+    const itemRank = rankItem(row.getValue(columnId), value);
+    addMeta({ itemRank });
+    return itemRank.passed;
+}