diff --git a/CHANGELOG.md b/CHANGELOG.md index cb70402..0c41374 100644 --- a/CHANGELOG.md +++ b/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 diff --git a/package-lock.json b/package-lock.json index 646d42a..0faa858 100644 --- a/package-lock.json +++ b/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", diff --git a/package.json b/package.json index e4399a0..b91af82 100644 --- a/package.json +++ b/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" } -} +} \ No newline at end of file diff --git a/src/common/RichTable/RichTable.js b/src/common/RichTable/RichTable.js index 9eac79f..ddc07e2 100644 --- a/src/common/RichTable/RichTable.js +++ b/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 ( +
+ + + +
+ {paginationIsNeeded && ( + + )} +
+ ); + } +); + 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 ( -
- - - -
- {paginationIsNeeded && ( - - )} -
- ); -} +RichTable.displayName = "RichTable"; export default RichTable;