fixup! Add RichTable component with header, body, and pagination

src/common/RichTable/RichTable.js

@@ -37,8 +37,8 @@ const RichTable = ({
     });
 
     const table = useReactTable({
-        columns: tableColumns,
         data: tableData,
+        columns: tableColumns,
         getCoreRowModel: getCoreRowModel(),
         getSortedRowModel: getSortedRowModel(),
         getPaginationRowModel: getPaginationRowModel(),
@@ -57,7 +57,11 @@ const RichTable = ({
                 <RichTableBody table={table} flexRender={flexRender} />
             </table>
             {withPagination && (
-                <RichTablePagination table={table} tablePageSize={pageSize} />
+                <RichTablePagination
+                    table={table}
+                    tablePageSize={pageSize}
+                    allRows={tableData.length}
+                />
             )}
         </div>
     );

src/common/RichTable/RichTableBody.js

@@ -12,10 +12,16 @@ const RichTableBody = ({ table, flexRender }) => {
         <tbody>
             {table.getRowModel().rows.map((row) => {
                 return (
-                    <tr key={row.id}>
+                    <tr key={row.id} className="align-middle">
                         {row.getVisibleCells().map((cell) => {
                             return (
-                                <td key={cell.id}>
+                                <td
+                                    key={cell.id}
+                                    {...(cell.column.columnDef.className && {
+                                        className:
+                                            cell.column.columnDef.className,
+                                    })}
+                                >
                                     {flexRender(
                                         cell.column.columnDef.cell,
                                         cell.getContext()

src/common/RichTable/RichTableHeader.js

@@ -26,10 +26,10 @@ const RichTableHeader = ({ table, flexRender }) => {
         <thead className="thead-light">
             {table.getHeaderGroups().map((headerGroup) => (
                 <tr key={headerGroup.id}>
-                    {headerGroup.headers.map((header) => {
+                    {headerGroup.headers.map((header) => (
-                        return (
                         <th key={header.id} colSpan={header.colSpan}>
-                                {header.isPlaceholder ? null : (
+                            {header.isPlaceholder ||
+                            !header.column.columnDef.header ? null : (
                                 <button
                                     className={`btn btn-link text-decoration-none text-reset fw-bold p-0 d-flex align-items-center
                                                     ${
@@ -62,8 +62,7 @@ const RichTableHeader = ({ table, flexRender }) => {
                                 </button>
                             )}
                         </th>
-                        );
+                    ))}
-                    })}
                 </tr>
             ))}
         </thead>

src/common/RichTable/RichTablePagination.js

@@ -5,7 +5,7 @@
  * See /LICENSE for more information.
  */
 
-import React from "react";
+import React, { useMemo } from "react";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import {
     faAngleLeft,
@@ -14,89 +14,68 @@ import {
     faAnglesRight,
 } from "@fortawesome/free-solid-svg-icons";
 
-const RichTablePagination = ({ table, tablePageSize }) => {
+const RichTablePagination = ({ table, tablePageSize, allRows }) => {
+    const { pagination } = table.getState();
     const prevPagBtnDisabled = !table.getCanPreviousPage();
     const nextPagBtnDisabled = !table.getCanNextPage();
 
+    const pageSizes = useMemo(() => {
+        return [tablePageSize ?? 5, 10, 25].filter(
+            (value, index, self) => self.indexOf(value) === index
+        );
+    }, [tablePageSize]);
+
+    const renderPaginationButton = (icon, ariaLabel, onClick, disabled) => (
+        <li
+            className={`page-item ${disabled ? "disabled" : ""}`}
+            style={{ cursor: disabled ? "not-allowed" : "pointer" }}
+        >
+            <button
+                className="page-link"
+                aria-label={ariaLabel}
+                onClick={onClick}
+                disabled={disabled}
+            >
+                <FontAwesomeIcon icon={icon} />
+            </button>
+        </li>
+    );
+
     return (
         <nav
             aria-label={_("Pagination navigation bar")}
             className="d-flex gap-2 justify-content-start align-items-center mx-2 mb-1 text-nowrap"
         >
             <ul className="pagination pagination-sm mb-0">
-                <li
+                {renderPaginationButton(
-                    className={`page-item ${prevPagBtnDisabled ? "disabled" : ""}`.trim()}
+                    faAnglesLeft,
-                    style={
+                    _("First page"),
+                    () => table.firstPage(),
                     prevPagBtnDisabled
-                            ? { cursor: "not-allowed" }
+                )}
-                            : { cursor: "pointer" }
+                {renderPaginationButton(
-                    }
+                    faAngleLeft,
-                >
+                    _("Previous page"),
-                    <button
+                    () => table.previousPage(),
-                        className="page-link"
-                        aria-label={_("First page")}
-                        onClick={() => table.firstPage()}
-                        disabled={prevPagBtnDisabled}
-                    >
-                        <FontAwesomeIcon icon={faAnglesLeft} />
-                    </button>
-                </li>
-                <li
-                    className={`page-item ${prevPagBtnDisabled ? "disabled" : ""}`.trim()}
-                    style={
                     prevPagBtnDisabled
-                            ? { cursor: "not-allowed" }
+                )}
-                            : { cursor: "pointer" }
+                {renderPaginationButton(
-                    }
+                    faAngleRight,
-                >
+                    _("Next page"),
-                    <button
+                    () => table.nextPage(),
-                        className="page-link"
-                        aria-label={_("Previous page")}
-                        onClick={() => table.previousPage()}
-                        disabled={prevPagBtnDisabled}
-                    >
-                        <FontAwesomeIcon icon={faAngleLeft} />
-                    </button>
-                </li>
-                <li
-                    className={`page-item ${nextPagBtnDisabled ? "disabled" : ""}`.trim()}
-                    style={
                     nextPagBtnDisabled
-                            ? { cursor: "not-allowed" }
+                )}
-                            : { cursor: "pointer" }
+                {renderPaginationButton(
-                    }
+                    faAnglesRight,
-                >
+                    _("Last page"),
-                    <button
+                    () => table.lastPage(),
-                        className="page-link"
-                        aria-label={_("Next page")}
-                        onClick={() => table.nextPage()}
-                        disabled={nextPagBtnDisabled}
-                    >
-                        <FontAwesomeIcon icon={faAngleRight} />
-                    </button>
-                </li>
-                <li
-                    className={`page-item ${nextPagBtnDisabled ? "disabled" : ""}`.trim()}
-                    style={
                     nextPagBtnDisabled
-                            ? { cursor: "not-allowed" }
+                )}
-                            : { cursor: "pointer" }
-                    }
-                >
-                    <button
-                        className="page-link"
-                        aria-label={_("Last page")}
-                        onClick={() => table.lastPage()}
-                        disabled={nextPagBtnDisabled}
-                    >
-                        <FontAwesomeIcon icon={faAnglesRight} />
-                    </button>
-                </li>
             </ul>
             <span>
                 {_("Page")}&nbsp;
                 <span className="fw-bold">
-                    {table.getState().pagination.pageIndex + 1}
+                    {pagination.pageIndex + 1}
                     &nbsp;{_("of")}&nbsp;
                     {table.getPageCount().toLocaleString()}
                 </span>
@@ -105,46 +84,23 @@ const RichTablePagination = ({ table, tablePageSize }) => {
                 className="vr mx-1 align-self-center"
                 style={{ height: "1.5rem" }}
             />
-            <span>
+            <span>{_("Rows per page:")}</span>
-                {_("Go to page:")}
-                <div className="d-inline-block ms-1 input-group input-group-sm w-auto">
-                    <input
-                        type="number"
-                        min="1"
-                        max={table.getPageCount()}
-                        defaultValue={table.getState().pagination.pageIndex + 1}
-                        onChange={(e) => {
-                            const page = e.target.value
-                                ? Number(e.target.value) - 1
-                                : 0;
-                            table.setPageIndex(page);
-                        }}
-                        className="form-control w-auto"
-                        aria-label={_("Page number")}
-                    />
-                </div>
-            </span>
             <select
                 className="form-select form-select-sm w-auto"
-                aria-label={_("Select page size")}
+                aria-label={_("Select rows per page")}
-                value={table.getState().pagination.pageSize}
+                value={pagination.pageSize}
                 onChange={(e) => {
                     table.setPageSize(Number(e.target.value));
                 }}
             >
-                {[
+                {pageSizes.map((pageSize) => (
-                    // if tablePageSize is not in the list, add it
-                    tablePageSize === 10 ? null : tablePageSize,
-                    10,
-                    20,
-                    30,
-                    40,
-                    50,
-                ].map((pageSize) => (
                     <option key={pageSize} value={pageSize}>
-                        {_("Show")} {pageSize}
+                        {pageSize}
                     </option>
                 ))}
+                <option key={allRows} value={allRows}>
+                    {_("All")}
+                </option>
             </select>
         </nav>
     );