foris 6.6.0 → 6.6.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/common/RichTable/RichTable.js +56 -48
- package/foris-6.6.1.tgz +0 -0
- package/package.json +2 -2
- package/foris-6.6.0.tgz +0 -0
|
@@ -5,7 +5,12 @@
|
|
|
5
5
|
* See /LICENSE for more information.
|
|
6
6
|
*/
|
|
7
7
|
|
|
8
|
-
import React, {
|
|
8
|
+
import React, {
|
|
9
|
+
useMemo,
|
|
10
|
+
useState,
|
|
11
|
+
useImperativeHandle,
|
|
12
|
+
forwardRef,
|
|
13
|
+
} from "react";
|
|
9
14
|
|
|
10
15
|
import {
|
|
11
16
|
flexRender,
|
|
@@ -22,6 +27,55 @@ import RichTablePagination from "./RichTablePagination";
|
|
|
22
27
|
|
|
23
28
|
const fallbackData = [];
|
|
24
29
|
|
|
30
|
+
const RichTable = forwardRef(
|
|
31
|
+
({ columns, data, withPagination, pageSize = 5, pageIndex = 0 }, ref) => {
|
|
32
|
+
const tableColumns = useMemo(() => columns, [columns]);
|
|
33
|
+
const [tableData, setTableData] = useState(data ?? fallbackData);
|
|
34
|
+
const [sorting, setSorting] = useState([]);
|
|
35
|
+
const [pagination, setPagination] = useState({
|
|
36
|
+
pageIndex,
|
|
37
|
+
pageSize,
|
|
38
|
+
});
|
|
39
|
+
|
|
40
|
+
useImperativeHandle(ref, () => ({
|
|
41
|
+
setTableData,
|
|
42
|
+
}));
|
|
43
|
+
|
|
44
|
+
const table = useReactTable({
|
|
45
|
+
data: tableData,
|
|
46
|
+
columns: tableColumns,
|
|
47
|
+
getCoreRowModel: getCoreRowModel(),
|
|
48
|
+
getSortedRowModel: getSortedRowModel(),
|
|
49
|
+
getPaginationRowModel: getPaginationRowModel(),
|
|
50
|
+
onPaginationChange: setPagination,
|
|
51
|
+
onSortingChange: setSorting,
|
|
52
|
+
state: {
|
|
53
|
+
sorting,
|
|
54
|
+
pagination,
|
|
55
|
+
},
|
|
56
|
+
});
|
|
57
|
+
|
|
58
|
+
const paginationIsNeeded =
|
|
59
|
+
tableData.length > pageSize && withPagination;
|
|
60
|
+
|
|
61
|
+
return (
|
|
62
|
+
<div className="table-responsive">
|
|
63
|
+
<table className="table table-hover text-nowrap">
|
|
64
|
+
<RichTableHeader table={table} flexRender={flexRender} />
|
|
65
|
+
<RichTableBody table={table} flexRender={flexRender} />
|
|
66
|
+
</table>
|
|
67
|
+
{paginationIsNeeded && (
|
|
68
|
+
<RichTablePagination
|
|
69
|
+
table={table}
|
|
70
|
+
tablePageSize={pageSize}
|
|
71
|
+
allRows={tableData.length}
|
|
72
|
+
/>
|
|
73
|
+
)}
|
|
74
|
+
</div>
|
|
75
|
+
);
|
|
76
|
+
}
|
|
77
|
+
);
|
|
78
|
+
|
|
25
79
|
RichTable.propTypes = {
|
|
26
80
|
/** Columns to be displayed in the table */
|
|
27
81
|
columns: PropTypes.array.isRequired,
|
|
@@ -35,52 +89,6 @@ RichTable.propTypes = {
|
|
|
35
89
|
pageIndex: PropTypes.number,
|
|
36
90
|
};
|
|
37
91
|
|
|
38
|
-
|
|
39
|
-
columns,
|
|
40
|
-
data,
|
|
41
|
-
withPagination,
|
|
42
|
-
pageSize = 5,
|
|
43
|
-
pageIndex = 0,
|
|
44
|
-
}) {
|
|
45
|
-
const tableColumns = useMemo(() => columns, [columns]);
|
|
46
|
-
const [tableData] = useState(data ?? fallbackData);
|
|
47
|
-
const [sorting, setSorting] = useState([]);
|
|
48
|
-
const [pagination, setPagination] = useState({
|
|
49
|
-
pageIndex,
|
|
50
|
-
pageSize,
|
|
51
|
-
});
|
|
52
|
-
|
|
53
|
-
const table = useReactTable({
|
|
54
|
-
data: tableData,
|
|
55
|
-
columns: tableColumns,
|
|
56
|
-
getCoreRowModel: getCoreRowModel(),
|
|
57
|
-
getSortedRowModel: getSortedRowModel(),
|
|
58
|
-
getPaginationRowModel: getPaginationRowModel(),
|
|
59
|
-
onPaginationChange: setPagination,
|
|
60
|
-
onSortingChange: setSorting,
|
|
61
|
-
state: {
|
|
62
|
-
sorting,
|
|
63
|
-
pagination,
|
|
64
|
-
},
|
|
65
|
-
});
|
|
66
|
-
|
|
67
|
-
const paginationIsNeeded = tableData.length > pageSize && withPagination;
|
|
68
|
-
|
|
69
|
-
return (
|
|
70
|
-
<div className="table-responsive">
|
|
71
|
-
<table className="table table-hover text-nowrap">
|
|
72
|
-
<RichTableHeader table={table} flexRender={flexRender} />
|
|
73
|
-
<RichTableBody table={table} flexRender={flexRender} />
|
|
74
|
-
</table>
|
|
75
|
-
{paginationIsNeeded && (
|
|
76
|
-
<RichTablePagination
|
|
77
|
-
table={table}
|
|
78
|
-
tablePageSize={pageSize}
|
|
79
|
-
allRows={tableData.length}
|
|
80
|
-
/>
|
|
81
|
-
)}
|
|
82
|
-
</div>
|
|
83
|
-
);
|
|
84
|
-
}
|
|
92
|
+
RichTable.displayName = "RichTable";
|
|
85
93
|
|
|
86
94
|
export default RichTable;
|
package/foris-6.6.1.tgz
ADDED
|
Binary file
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "foris",
|
|
3
|
-
"version": "6.6.
|
|
3
|
+
"version": "6.6.1",
|
|
4
4
|
"description": "Foris JS library is a set of components and utils for reForis application and plugins.",
|
|
5
5
|
"author": "CZ.NIC, z.s.p.o.",
|
|
6
6
|
"repository": {
|
|
@@ -70,4 +70,4 @@
|
|
|
70
70
|
"docs": "npx styleguidist build ",
|
|
71
71
|
"docs:watch": "styleguidist server"
|
|
72
72
|
}
|
|
73
|
-
}
|
|
73
|
+
}
|
package/foris-6.6.0.tgz
DELETED
|
Binary file
|