package-lock.json

@@ -13,7 +13,6 @@
                 "@fortawesome/free-regular-svg-icons": "^6.7.2",
                 "@fortawesome/free-solid-svg-icons": "^6.7.2",
                 "@fortawesome/react-fontawesome": "^0.2.2",
-                "@tanstack/match-sorter-utils": "^8.19.4",
                 "@tanstack/react-table": "^8.21.2",
                 "axios": "^1.7.9",
                 "immutability-helper": "^3.1.1",
@@ -3385,22 +3384,6 @@
                 "@sinonjs/commons": "^3.0.0"
             }
         },
-        "node_modules/@tanstack/match-sorter-utils": {
-            "version": "8.19.4",
-            "resolved": "https://registry.npmjs.org/@tanstack/match-sorter-utils/-/match-sorter-utils-8.19.4.tgz",
-            "integrity": "sha512-Wo1iKt2b9OT7d+YGhvEPD3DXvPv2etTusIMhMUoG7fbhmxcXCtIjJDEygy91Y2JFlwGyjqiBPRozme7UD8hoqg==",
-            "license": "MIT",
-            "dependencies": {
-                "remove-accents": "0.5.0"
-            },
-            "engines": {
-                "node": ">=12"
-            },
-            "funding": {
-                "type": "github",
-                "url": "https://github.com/sponsors/tannerlinsley"
-            }
-        },
         "node_modules/@tanstack/react-table": {
             "version": "8.21.2",
             "resolved": "https://registry.npmjs.org/@tanstack/react-table/-/react-table-8.21.2.tgz",
@@ -15882,12 +15865,6 @@
                 "url": "https://opencollective.com/unified"
             }
         },
-        "node_modules/remove-accents": {
-            "version": "0.5.0",
-            "resolved": "https://registry.npmjs.org/remove-accents/-/remove-accents-0.5.0.tgz",
-            "integrity": "sha512-8g3/Otx1eJaVD12e31UbJj1YzdtVvzH85HV7t+9MJYk/u3XmkOUJ5Ys9wQrf9PCPK8+xn4ymzqYCiZl6QWKn+A==",
-            "license": "MIT"
-        },
         "node_modules/repeat-string": {
             "version": "1.6.1",
             "resolved": "https://registry.npmjs.org/repeat-string/-/repeat-string-1.6.1.tgz",
@@ -20916,14 +20893,6 @@
                 "@sinonjs/commons": "^3.0.0"
             }
         },
-        "@tanstack/match-sorter-utils": {
-            "version": "8.19.4",
-            "resolved": "https://registry.npmjs.org/@tanstack/match-sorter-utils/-/match-sorter-utils-8.19.4.tgz",
-            "integrity": "sha512-Wo1iKt2b9OT7d+YGhvEPD3DXvPv2etTusIMhMUoG7fbhmxcXCtIjJDEygy91Y2JFlwGyjqiBPRozme7UD8hoqg==",
-            "requires": {
-                "remove-accents": "0.5.0"
-            }
-        },
         "@tanstack/react-table": {
             "version": "8.21.2",
             "resolved": "https://registry.npmjs.org/@tanstack/react-table/-/react-table-8.21.2.tgz",
@@ -30224,11 +30193,6 @@
                 "mdast-util-to-markdown": "^0.6.0"
             }
         },
-        "remove-accents": {
-            "version": "0.5.0",
-            "resolved": "https://registry.npmjs.org/remove-accents/-/remove-accents-0.5.0.tgz",
-            "integrity": "sha512-8g3/Otx1eJaVD12e31UbJj1YzdtVvzH85HV7t+9MJYk/u3XmkOUJ5Ys9wQrf9PCPK8+xn4ymzqYCiZl6QWKn+A=="
-        },
         "repeat-string": {
             "version": "1.6.1",
             "resolved": "https://registry.npmjs.org/repeat-string/-/repeat-string-1.6.1.tgz",

package.json

@@ -18,7 +18,6 @@
         "@fortawesome/free-regular-svg-icons": "^6.7.2",
         "@fortawesome/free-solid-svg-icons": "^6.7.2",
         "@fortawesome/react-fontawesome": "^0.2.2",
-        "@tanstack/match-sorter-utils": "^8.19.4",
         "@tanstack/react-table": "^8.21.2",
         "axios": "^1.7.9",
         "immutability-helper": "^3.1.1",
@@ -71,4 +70,4 @@
         "docs": "npx styleguidist build ",
         "docs:watch": "styleguidist server"
     }
-}
+}

src/bootstrap/Input.js

@@ -34,14 +34,12 @@ const Input = forwardRef(
 
         return (
             <div className="mb-3">
-                {label && (
+                <label
-                    <label
+                    className={`form-label ${labelClassName || ""}`.trim()}
-                        className={`form-label ${labelClassName || ""}`.trim()}
+                    htmlFor={uid}
-                        htmlFor={uid}
+                >
-                    >
+                    {label}
-                        {label}
+                </label>
-                    </label>
-                )}
                 <div className={`input-group ${groupClassName || ""}`.trim()}>
                     <input
                         className={`form-control ${inputClassName}`.trim()}
@@ -67,7 +65,7 @@ Input.displayName = "Input";
 
 Input.propTypes = {
     type: PropTypes.string.isRequired,
-    label: PropTypes.string,
+    label: PropTypes.string.isRequired,
     helpText: PropTypes.string,
     error: PropTypes.string,
     className: PropTypes.string,

src/common/RichTable/RichTable.js

@@ -7,22 +7,18 @@
 
 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 */
@@ -50,69 +46,36 @@ 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(),
-        getFilteredRowModel: getFilteredRowModel(),
-        onSortingChange: setSorting,
         onPaginationChange: setPagination,
-        onGlobalFilterChange: setGlobalFilter,
+        onSortingChange: setSorting,
-        onColumnVisibilityChange: setColumnVisibility,
         state: {
             sorting,
             pagination,
-            globalFilter,
-            columnVisibility,
         },
     });
 
     const paginationIsNeeded = data.length > pageSize && withPagination;
 
     return (
-        <div>
+        <div className="table-responsive">
-            <div className="d-flex justify-content-between align-items-center">
+            <table className="table table-hover text-nowrap">
-                <Input
+                <RichTableHeader table={table} flexRender={flexRender} />
-                    className="me-3"
+                <RichTableBody table={table} flexRender={flexRender} />
-                    type="text"
+            </table>
-                    placeholder={_("Search…")}
+            {paginationIsNeeded && (
-                    value={globalFilter ?? ""}
+                <RichTablePagination
-                    onChange={(e) => setGlobalFilter(String(e.target.value))}
+                    table={table}
+                    tablePageSize={pageSize}
+                    allRows={data.length}
                 />
-                <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;
-}

src/common/RichTable/RichTableBody.js

@@ -13,44 +13,34 @@ RichTableBody.propTypes = {
     table: propTypes.shape({
         getRowModel: propTypes.func.isRequired,
     }).isRequired,
-    columns: propTypes.array.isRequired,
     flexRender: propTypes.func.isRequired,
 };
 
-function RichTableBody({ table, columns, flexRender }) {
+function RichTableBody({ table, flexRender }) {
     return (
         <tbody>
-            {table.getRowModel().rows?.length ? (
+            {table.getRowModel().rows.map((row) => {
-                table.getRowModel().rows.map((row) => {
+                return (
-                    return (
+                    <tr key={row.id} className="align-middle">
-                        <tr key={row.id} className="align-middle">
+                        {row.getVisibleCells().map((cell) => {
-                            {row.getVisibleCells().map((cell) => {
+                            return (
-                                return (
+                                <td
-                                    <td
+                                    key={cell.id}
-                                        key={cell.id}
+                                    {...(cell.column.columnDef.className && {
-                                        {...(cell.column.columnDef
+                                        className:
-                                            .className && {
+                                            cell.column.columnDef.className,
-                                            className:
+                                    })}
-                                                cell.column.columnDef.className,
+                                >
-                                        })}
+                                    {flexRender(
-                                    >
+                                        cell.column.columnDef.cell,
-                                        {flexRender(
+                                        cell.getContext()
-                                            cell.column.columnDef.cell,
+                                    )}
-                                            cell.getContext()
+                                </td>
-                                        )}
+                            );
-                                    </td>
+                        })}
-                                );
+                    </tr>
-                            })}
+                );
-                        </tr>
+            })}
-                    );
-                })
-            ) : (
-                <tr>
-                    <td colSpan={columns.length} className="text-center py-4">
-                        <span>{_("No results.")}</span>
-                    </td>
-                </tr>
-            )}
         </tbody>
     );
 }

src/common/RichTable/RichTableColumnsDropdown.js

@@ -1,90 +0,0 @@
-/*
- * Copyright (C) 2019-2025 CZ.NIC z.s.p.o. (https://www.nic.cz/)
- *
- * This is free software, licensed under the GNU General Public License v3.
- * See /LICENSE for more information.
- */
-
-import React from "react";
-
-import { faCheck, faRotateLeft } from "@fortawesome/free-solid-svg-icons";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import PropTypes from "prop-types";
-
-import Button from "../../bootstrap/Button";
-
-RichTableColumnsDropdown.propTypes = {
-    columns: PropTypes.array.isRequired,
-};
-
-function RichTableColumnsDropdown({ columns }) {
-    return (
-        <div className="dropdown mb-3">
-            <Button
-                className="btn btn-outline-secondary dropdown-toggle"
-                data-bs-toggle="dropdown"
-            >
-                {_("Columns")}
-            </Button>
-            <ul className="dropdown-menu dropdown-menu-end">
-                {columns.map((column) => {
-                    return (
-                        <li key={column.id}>
-                            <button
-                                type="button"
-                                className="dropdown-item d-flex align-items-center"
-                                onClick={column.getToggleVisibilityHandler()}
-                                style={{ paddingLeft: "2rem" }}
-                                disabled={
-                                    column.columnDef?.enableHiding === false
-                                }
-                            >
-                                {column.getIsVisible() && (
-                                    <FontAwesomeIcon
-                                        icon={faCheck}
-                                        className="position-absolute text-secondary me-2"
-                                        style={{ left: "0.6rem" }}
-                                        width="1rem"
-                                    />
-                                )}
-                                <span>{column.columnDef.header}</span>
-                            </button>
-                        </li>
-                    );
-                })}
-                {columns.some((column) => !column.getIsVisible()) && (
-                    <>
-                        <li>
-                            <hr className="dropdown-divider" />
-                        </li>
-                        <li>
-                            <button
-                                type="button"
-                                className="dropdown-item d-flex align-items-center"
-                                style={{ paddingLeft: "2rem" }}
-                                onClick={() => {
-                                    // toggleVisibility for columns that are hidden
-                                    columns.forEach((column) => {
-                                        if (!column.getIsVisible()) {
-                                            column.toggleVisibility();
-                                        }
-                                    });
-                                }}
-                            >
-                                <FontAwesomeIcon
-                                    icon={faRotateLeft}
-                                    className="position-absolute text-secondary me-2"
-                                    width="1rem"
-                                    style={{ left: "0.6rem" }}
-                                />
-                                {_("Reset")}
-                            </button>
-                        </li>
-                    </>
-                )}
-            </ul>
-        </div>
-    );
-}
-
-export default RichTableColumnsDropdown;

src/common/RichTable/RichTableHeader.js

@@ -55,12 +55,6 @@ function RichTableHeader({ table, flexRender }) {
                             ) : (
                                 <button
                                     type="button"
-                                    style={
-                                        header.column.columnDef
-                                            .headerClassName === "text-center"
-                                            ? { justifySelf: "center" }
-                                            : {}
-                                    }
                                     className={`btn btn-link text-decoration-none text-reset fw-bold p-0 d-flex align-items-center
                                                     ${
                                                         header.column.getCanSort()

src/common/RichTable/RichTablePagination.js

@@ -1,5 +1,5 @@
 /*
- * Copyright (C) 2019-2025 CZ.NIC z.s.p.o. (https://www.nic.cz/)
+ * Copyright (C) 2019-2024 CZ.NIC z.s.p.o. (https://www.nic.cz/)
  *
  * This is free software, licensed under the GNU General Public License v3.
  * See /LICENSE for more information.