Merge branch 'dev' into 'master'

Dev

See merge request turris/reforis/foris-js!268

CHANGELOG.md

@@ -8,6 +8,12 @@ and this project adheres to
 
 ## [Unreleased]
 
+## [6.6.1] - 2025-02-17
+
+### Changed
+
+-   Refactored RichTable component to use forwardRef
+
 ## [6.6.0] - 2025-02-07
 
 ### Added
@@ -435,7 +441,8 @@ and this project adheres to
 ## [0.0.7] - 2019-09-02
 
 [unreleased]:
-    https://gitlab.nic.cz/turris/reforis/foris-js/-/compare/v6.6.0...dev
+    https://gitlab.nic.cz/turris/reforis/foris-js/-/compare/v6.6.1...dev
+[6.6.1]: https://gitlab.nic.cz/turris/reforis/foris-js/-/compare/v6.6.0...v6.6.1
 [6.6.0]: https://gitlab.nic.cz/turris/reforis/foris-js/-/compare/v6.5.0...v6.6.0
 [6.5.0]: https://gitlab.nic.cz/turris/reforis/foris-js/-/compare/v6.4.0...v6.5.0
 [6.4.0]: https://gitlab.nic.cz/turris/reforis/foris-js/-/compare/v6.3.0...v6.4.0

package-lock.json

@@ -1,12 +1,12 @@
 {
     "name": "foris",
-    "version": "6.6.0",
+    "version": "6.6.1",
     "lockfileVersion": 2,
     "requires": true,
     "packages": {
         "": {
             "name": "foris",
-            "version": "6.6.0",
+            "version": "6.6.1",
             "license": "GPL-3.0",
             "dependencies": {
                 "@fortawesome/fontawesome-svg-core": "^6.6.0",

package.json

@@ -1,6 +1,6 @@
 {
     "name": "foris",
-    "version": "6.6.0",
+    "version": "6.6.1",
     "description": "Foris JS library is a set of components and utils for reForis application and plugins.",
     "author": "CZ.NIC, z.s.p.o.",
     "repository": {
@@ -70,4 +70,4 @@
         "docs": "npx styleguidist build ",
         "docs:watch": "styleguidist server"
     }
-}
+}

src/common/RichTable/RichTable.js

@@ -5,7 +5,12 @@
  * See /LICENSE for more information.
  */
 
-import React, { useMemo, useState } from "react";
+import React, {
+    useMemo,
+    useState,
+    useImperativeHandle,
+    forwardRef,
+} from "react";
 
 import {
     flexRender,
@@ -22,6 +27,55 @@ import RichTablePagination from "./RichTablePagination";
 
 const fallbackData = [];
 
+const RichTable = forwardRef(
+    ({ columns, data, withPagination, pageSize = 5, pageIndex = 0 }, ref) => {
+        const tableColumns = useMemo(() => columns, [columns]);
+        const [tableData, setTableData] = useState(data ?? fallbackData);
+        const [sorting, setSorting] = useState([]);
+        const [pagination, setPagination] = useState({
+            pageIndex,
+            pageSize,
+        });
+
+        useImperativeHandle(ref, () => ({
+            setTableData,
+        }));
+
+        const table = useReactTable({
+            data: tableData,
+            columns: tableColumns,
+            getCoreRowModel: getCoreRowModel(),
+            getSortedRowModel: getSortedRowModel(),
+            getPaginationRowModel: getPaginationRowModel(),
+            onPaginationChange: setPagination,
+            onSortingChange: setSorting,
+            state: {
+                sorting,
+                pagination,
+            },
+        });
+
+        const paginationIsNeeded =
+            tableData.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={tableData.length}
+                    />
+                )}
+            </div>
+        );
+    }
+);
+
 RichTable.propTypes = {
     /** Columns to be displayed in the table */
     columns: PropTypes.array.isRequired,
@@ -35,52 +89,6 @@ RichTable.propTypes = {
     pageIndex: PropTypes.number,
 };
 
-function RichTable({
-    columns,
-    data,
-    withPagination,
-    pageSize = 5,
-    pageIndex = 0,
-}) {
-    const tableColumns = useMemo(() => columns, [columns]);
-    const [tableData] = useState(data ?? fallbackData);
-    const [sorting, setSorting] = useState([]);
-    const [pagination, setPagination] = useState({
-        pageIndex,
-        pageSize,
-    });
-
-    const table = useReactTable({
-        data: tableData,
-        columns: tableColumns,
-        getCoreRowModel: getCoreRowModel(),
-        getSortedRowModel: getSortedRowModel(),
-        getPaginationRowModel: getPaginationRowModel(),
-        onPaginationChange: setPagination,
-        onSortingChange: setSorting,
-        state: {
-            sorting,
-            pagination,
-        },
-    });
-
-    const paginationIsNeeded = tableData.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={tableData.length}
-                />
-            )}
-        </div>
-    );
-}
+RichTable.displayName = "RichTable";
 
 export default RichTable;