GGLinnk/foris-js
1
0
Fork 0
mirror of https://gitlab.nic.cz/turris/reforis/foris-js.git synced 2025-02-22 09:44:18 +01:00
Code Issues Releases Activity

Merge branch 'improve-richtable' into 'dev'

Browse Source 
Refactor RichTable component to use forwardRef and useImperativeHandle for improved data handling

See merge request turris/reforis/foris-js!266
This commit is contained in:
Aleksandr Gumroian 2025-02-17 15:42:41 +01:00
commit 230ae8e35b
1 changed files with 56 additions and 48 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

104
src/common/RichTable/RichTable.js
View File

@ -5,7 +5,12 @@
* See /LICENSE for more information. * See /LICENSE for more information.
*/ */
import React, { useMemo, useState } from "react"; import React, {
useMemo,
useState,
useImperativeHandle,
forwardRef,
} from "react";
import { import {
flexRender, flexRender,
@ -22,6 +27,55 @@ import RichTablePagination from "./RichTablePagination";
const fallbackData = []; 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 = { RichTable.propTypes = {
/** Columns to be displayed in the table */ /** Columns to be displayed in the table */
columns: PropTypes.array.isRequired, columns: PropTypes.array.isRequired,
@ -35,52 +89,6 @@ RichTable.propTypes = {
pageIndex: PropTypes.number, pageIndex: PropTypes.number,
}; };
function RichTable({ RichTable.displayName = "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>
);
}
export default RichTable; export default RichTable;