Refactor RichTable component to use forwardRef

And useImperativeHandle for improved data handling.

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,34 +27,20 @@ import RichTablePagination from "./RichTablePagination";
 
 const fallbackData = [];
 
-RichTable.propTypes = {
+const RichTable = forwardRef(
-    /** Columns to be displayed in the table */
+    ({ columns, data, withPagination, pageSize = 5, pageIndex = 0 }, ref) => {
-    columns: PropTypes.array.isRequired,
-    /** Data to be displayed in the table */
-    data: PropTypes.array.isRequired,
-    /** Whether to display pagination */
-    withPagination: PropTypes.bool,
-    /** Number of rows per page */
-    pageSize: PropTypes.number,
-    /** Index of the current page */
-    pageIndex: PropTypes.number,
-};
-
-function RichTable({
-    columns,
-    data,
-    withPagination,
-    pageSize = 5,
-    pageIndex = 0,
-}) {
         const tableColumns = useMemo(() => columns, [columns]);
-    const [tableData] = useState(data ?? fallbackData);
+        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,
@@ -64,7 +55,8 @@ function RichTable({
             },
         });
 
-    const paginationIsNeeded = tableData.length > pageSize && withPagination;
+        const paginationIsNeeded =
+            tableData.length > pageSize && withPagination;
 
         return (
             <div className="table-responsive">
@@ -81,6 +73,22 @@ function RichTable({
                 )}
             </div>
         );
-}
+    }
+);
+
+RichTable.propTypes = {
+    /** Columns to be displayed in the table */
+    columns: PropTypes.array.isRequired,
+    /** Data to be displayed in the table */
+    data: PropTypes.array.isRequired,
+    /** Whether to display pagination */
+    withPagination: PropTypes.bool,
+    /** Number of rows per page */
+    pageSize: PropTypes.number,
+    /** Index of the current page */
+    pageIndex: PropTypes.number,
+};
+
+RichTable.displayName = "RichTable";
 
 export default RichTable;