Skip to content

Commit eb3e6ec

Browse files
simmmplewebsimmmpleweb
committed
1.1.0
1 parent 025dbbc commit eb3e6ec

File tree

13 files changed

+2044
-1768
lines changed

13 files changed

+2044
-1768
lines changed

‎CHANGELOG.md‎

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,10 @@
1-
## [1.0.1] 2022-03-07
1+
## [1.1.0] 2024-07-26
2+
3+
🚀 New features:
4+
5+
- React tables updated to Tanstack V8
6+
7+
## [1.0.1] 2023-03-07
28

39
🐛 Bugs solved:
410

‎README.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
# [Horizon UI TailwindCSS React ⚡️](https://horizon-ui.com/horizon-tailwind-react) [![Tweet](https://img.shields.io/twitter/url/http/shields.io.svg?style=social&logo=twitter)](https://twitter.com/intent/tweet?text=Check%20Horizon%20UI,%20the%20trendiest%20open-source%20admin%20template%20for%20%23tailwindcss%20and%20%23react!%0A%0Ahorizon-ui.com%20)
22

3-
![version](https://img.shields.io/badge/version-1.0.1-brightgreen.svg)
3+
![version](https://img.shields.io/badge/version-1.1.0-brightgreen.svg)
44
![license](https://img.shields.io/badge/license-MIT-blue.svg)
55
[![GitHub issues open](https://img.shields.io/github/issues/horizon-ui/horizon-tailwind-react.svg?maxAge=2592000)](https://github.com/horizon-ui/horizon-tailwind-react/issues?q=is%3Aopen+is%3Aissue)
66

‎package-lock.json‎

Lines changed: 818 additions & 822 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "horizon-ui-tailwind-react",
3-
"version": "1.0.0",
3+
"version": "1.1.0",
44
"private": true,
55
"dependencies": {
66
"@chakra-ui/hooks": "^2.1.4",
@@ -11,6 +11,7 @@
1111
"@chakra-ui/tooltip": "^2.2.6",
1212
"@emotion/react": "^11.10.5",
1313
"@emotion/styled": "^11.10.5",
14+
"@tanstack/react-table": "^8.7.9",
1415
"@testing-library/jest-dom": "^5.16.5",
1516
"@testing-library/react": "^13.3.0",
1617
"@testing-library/user-event": "^13.5.0",

‎src/views/admin/default/components/CheckTable.jsx‎

Lines changed: 127 additions & 102 deletions
Original file line numberDiff line numberDiff line change
@@ -1,41 +1,89 @@
1-
import React, { useMemo } from "react";
1+
import React from "react";
22
import CardMenu from "components/card/CardMenu";
33
import Checkbox from "components/checkbox";
44
import Card from "components/card";
55

66
import {
7-
useGlobalFilter,
8-
usePagination,
9-
useSortBy,
10-
useTable,
11-
} from "react-table";
7+
createColumnHelper,
8+
flexRender,
9+
getCoreRowModel,
10+
getSortedRowModel,
11+
useReactTable,
12+
} from "@tanstack/react-table";
1213

13-
const CheckTable = (props) => {
14-
const { columnsData, tableData } = props;
15-
16-
const columns = useMemo(() => columnsData, [columnsData]);
17-
const data = useMemo(() => tableData, [tableData]);
18-
19-
const tableInstance = useTable(
20-
{
21-
columns,
22-
data,
14+
function CheckTable(props) {
15+
const { tableData } = props;
16+
const [sorting, setSorting] = React.useState([]);
17+
let defaultData = tableData;
18+
const columns = [
19+
columnHelper.accessor("name", {
20+
id: "name",
21+
header: () => (
22+
<p className="text-sm font-bold text-gray-600 dark:text-white">NAME</p>
23+
),
24+
cell: (info) => (
25+
<div className="flex items-center">
26+
<Checkbox
27+
defaultChecked={info.getValue()[1]}
28+
colorScheme="brandScheme"
29+
me="10px"
30+
/>
31+
<p className="ml-3 text-sm font-bold text-navy-700 dark:text-white">
32+
{info.getValue()[0]}
33+
</p>
34+
</div>
35+
),
36+
}),
37+
columnHelper.accessor("progress", {
38+
id: "progress",
39+
header: () => (
40+
<p className="text-sm font-bold text-gray-600 dark:text-white">
41+
PROGRESS
42+
</p>
43+
),
44+
cell: (info) => (
45+
<p className="text-sm font-bold text-navy-700 dark:text-white">
46+
{info.getValue()}
47+
</p>
48+
),
49+
}),
50+
columnHelper.accessor("quantity", {
51+
id: "quantity",
52+
header: () => (
53+
<p className="text-sm font-bold text-gray-600 dark:text-white">
54+
QUANTITY
55+
</p>
56+
),
57+
cell: (info) => (
58+
<p className="text-sm font-bold text-navy-700 dark:text-white">
59+
{info.getValue()}
60+
</p>
61+
),
62+
}),
63+
columnHelper.accessor("date", {
64+
id: "date",
65+
header: () => (
66+
<p className="text-sm font-bold text-gray-600 dark:text-white">DATE</p>
67+
),
68+
cell: (info) => (
69+
<p className="text-sm font-bold text-navy-700 dark:text-white">
70+
{info.getValue()}
71+
</p>
72+
),
73+
}),
74+
]; // eslint-disable-next-line
75+
const [data, setData] = React.useState(() => [...defaultData]);
76+
const table = useReactTable({
77+
data,
78+
columns,
79+
state: {
80+
sorting,
2381
},
24-
useGlobalFilter,
25-
useSortBy,
26-
usePagination
27-
);
28-
29-
const {
30-
getTableProps,
31-
getTableBodyProps,
32-
headerGroups,
33-
page,
34-
prepareRow,
35-
initialState,
36-
} = tableInstance;
37-
initialState.pageSize = 11;
38-
82+
onSortingChange: setSorting,
83+
getCoreRowModel: getCoreRowModel(),
84+
getSortedRowModel: getSortedRowModel(),
85+
debugTable: true,
86+
});
3987
return (
4088
<Card extra={"w-full h-full sm:overflow-auto px-6"}>
4189
<header className="relative flex items-center justify-between pt-4">
@@ -47,86 +95,63 @@ const CheckTable = (props) => {
4795
</header>
4896

4997
<div className="mt-8 overflow-x-scroll xl:overflow-x-hidden">
50-
<table
51-
{...getTableProps()}
52-
className="w-full"
53-
variant="simple"
54-
color="gray-500"
55-
mb="24px"
56-
>
98+
<table className="w-full">
5799
<thead>
58-
{headerGroups.map((headerGroup, index) => (
59-
<tr {...headerGroup.getHeaderGroupProps()} key={index}>
60-
{headerGroup.headers.map((column, index) => (
61-
<th
62-
{...column.getHeaderProps(column.getSortByToggleProps())}
63-
className="border-b border-gray-200 pr-16 pb-[10px] text-start dark:!border-navy-700"
64-
key={index}
65-
>
66-
<div className="text-xs font-bold tracking-wide text-gray-600 lg:text-xs">
67-
{column.render("Header")}
68-
</div>
69-
</th>
70-
))}
100+
{table.getHeaderGroups().map((headerGroup) => (
101+
<tr key={headerGroup.id} className="!border-px !border-gray-400">
102+
{headerGroup.headers.map((header) => {
103+
return (
104+
<th
105+
key={header.id}
106+
colSpan={header.colSpan}
107+
onClick={header.column.getToggleSortingHandler()}
108+
className="cursor-pointer border-b-[1px] border-gray-200 pt-4 pb-2 pr-4 text-start"
109+
>
110+
<div className="items-center justify-between text-xs text-gray-200">
111+
{flexRender(
112+
header.column.columnDef.header,
113+
header.getContext()
114+
)}
115+
{{
116+
asc: "",
117+
desc: "",
118+
}[header.column.getIsSorted()] ?? null}
119+
</div>
120+
</th>
121+
);
122+
})}
71123
</tr>
72124
))}
73125
</thead>
74-
<tbody {...getTableBodyProps()}>
75-
{page.map((row, index) => {
76-
prepareRow(row);
77-
return (
78-
<tr {...row.getRowProps()} key={index}>
79-
{row.cells.map((cell, index) => {
80-
let data = "";
81-
if (cell.column.Header === "NAME") {
82-
data = (
83-
<div className="flex items-center gap-2">
84-
<Checkbox />
85-
<p className="text-sm font-bold text-navy-700 dark:text-white">
86-
{cell.value[0]}
87-
</p>
88-
</div>
89-
);
90-
} else if (cell.column.Header === "PROGRESS") {
91-
data = (
92-
<div className="flex items-center">
93-
<p className="text-sm font-bold text-navy-700 dark:text-white">
94-
{cell.value}%
95-
</p>
96-
</div>
97-
);
98-
} else if (cell.column.Header === "QUANTITY") {
99-
data = (
100-
<p className="text-sm font-bold text-navy-700 dark:text-white">
101-
{" "}
102-
{cell.value}{" "}
103-
</p>
104-
);
105-
} else if (cell.column.Header === "DATE") {
106-
data = (
107-
<p className="text-sm font-bold text-navy-700 dark:text-white">
108-
{cell.value}
109-
</p>
126+
<tbody>
127+
{table
128+
.getRowModel()
129+
.rows.slice(0, 5)
130+
.map((row) => {
131+
return (
132+
<tr key={row.id}>
133+
{row.getVisibleCells().map((cell) => {
134+
return (
135+
<td
136+
key={cell.id}
137+
className="min-w-[150px] border-white/0 py-3 pr-4"
138+
>
139+
{flexRender(
140+
cell.column.columnDef.cell,
141+
cell.getContext()
142+
)}
143+
</td>
110144
);
111-
}
112-
return (
113-
<td
114-
{...cell.getCellProps()}
115-
key={index}
116-
className="pt-[14px] pb-[16px] sm:text-[14px]"
117-
>
118-
{data}
119-
</td>
120-
);
121-
})}
122-
</tr>
123-
);
124-
})}
145+
})}
146+
</tr>
147+
);
148+
})}
125149
</tbody>
126150
</table>
127151
</div>
128152
</Card>
129153
);
130-
};
154+
}
131155

132156
export default CheckTable;
157+
const columnHelper = createColumnHelper();

0 commit comments

Comments
 (0)