next-helios-fe 1.4.13 → 1.4.15
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/dist/index.js +1 -1
- package/package.json +1 -1
- package/src/components/table/index.tsx +82 -34
package/package.json
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
"use client";
|
|
2
|
-
import React, { useState, useEffect, useMemo } from "react";
|
|
2
|
+
import React, { useState, useEffect, useRef, useMemo } from "react";
|
|
3
3
|
import { Icon } from "@iconify/react";
|
|
4
4
|
import { exportToExcel } from "react-json-to-excel";
|
|
5
5
|
import dayjs from "dayjs";
|
|
@@ -72,6 +72,7 @@ export const Table: TableComponentProps = ({
|
|
|
72
72
|
checkbox,
|
|
73
73
|
actionColumn,
|
|
74
74
|
}) => {
|
|
75
|
+
const paginationRef = useRef<HTMLDivElement>(null);
|
|
75
76
|
const [search, setSearch] = useState<string>("");
|
|
76
77
|
const [filter, setFilter] = useState<any[]>([]);
|
|
77
78
|
const [categoryFilter, setCategoryFilter] = useState<any[]>([]);
|
|
@@ -112,6 +113,10 @@ export const Table: TableComponentProps = ({
|
|
|
112
113
|
}
|
|
113
114
|
}, [selected]);
|
|
114
115
|
|
|
116
|
+
useEffect(() => {
|
|
117
|
+
setPage(1);
|
|
118
|
+
}, [search, filter, categoryFilter]);
|
|
119
|
+
|
|
115
120
|
useEffect(() => {
|
|
116
121
|
setFilter(
|
|
117
122
|
header.map((item) => {
|
|
@@ -134,6 +139,36 @@ export const Table: TableComponentProps = ({
|
|
|
134
139
|
});
|
|
135
140
|
}, [header, data]);
|
|
136
141
|
|
|
142
|
+
const handleOnPreviousClick = () => {
|
|
143
|
+
if (page - 1 === 1) {
|
|
144
|
+
paginationRef.current?.scrollTo({
|
|
145
|
+
left: 0,
|
|
146
|
+
behavior: "smooth",
|
|
147
|
+
});
|
|
148
|
+
} else {
|
|
149
|
+
document.getElementById(`pagination-page-${page - 1}`)?.scrollIntoView({
|
|
150
|
+
behavior: "smooth",
|
|
151
|
+
block: "nearest",
|
|
152
|
+
inline: "end",
|
|
153
|
+
});
|
|
154
|
+
}
|
|
155
|
+
};
|
|
156
|
+
|
|
157
|
+
const handleOnNextClick = () => {
|
|
158
|
+
if (page === Math.ceil(data.length / maxRow)) {
|
|
159
|
+
paginationRef.current?.scrollTo({
|
|
160
|
+
left: paginationRef.current.scrollWidth,
|
|
161
|
+
behavior: "smooth",
|
|
162
|
+
});
|
|
163
|
+
} else {
|
|
164
|
+
document.getElementById(`pagination-page-${page + 1}`)?.scrollIntoView({
|
|
165
|
+
behavior: "smooth",
|
|
166
|
+
block: "nearest",
|
|
167
|
+
inline: "end",
|
|
168
|
+
});
|
|
169
|
+
}
|
|
170
|
+
};
|
|
171
|
+
|
|
137
172
|
const filteredData = useMemo(() => {
|
|
138
173
|
const tempData = data
|
|
139
174
|
?.filter((item) => {
|
|
@@ -152,7 +187,7 @@ export const Table: TableComponentProps = ({
|
|
|
152
187
|
})
|
|
153
188
|
?.filter((item) => {
|
|
154
189
|
return filter.every((filterItem) => {
|
|
155
|
-
return item[filterItem.key as keyof typeof item]
|
|
190
|
+
return (item[filterItem.key as keyof typeof item] || "")
|
|
156
191
|
?.toString()
|
|
157
192
|
?.toLowerCase()
|
|
158
193
|
?.includes(filterItem.value.toLowerCase());
|
|
@@ -335,7 +370,7 @@ export const Table: TableComponentProps = ({
|
|
|
335
370
|
?.slice((page - 1) * maxRow, page * maxRow)
|
|
336
371
|
?.map((item, index) => {
|
|
337
372
|
return (
|
|
338
|
-
<tr key={item.id}
|
|
373
|
+
<tr key={item.id}>
|
|
339
374
|
{checkbox && (
|
|
340
375
|
<td className="sticky left-0 w-8 px-4 py-1 border-b bg-secondary-bg">
|
|
341
376
|
<Form.Checkbox
|
|
@@ -615,67 +650,80 @@ export const Table: TableComponentProps = ({
|
|
|
615
650
|
<span className="hidden md:block text-sm text-slate-400">{`Showing ${
|
|
616
651
|
(page - 1) * maxRow + 1
|
|
617
652
|
} to ${
|
|
618
|
-
page * maxRow >
|
|
619
|
-
|
|
620
|
-
|
|
653
|
+
page * maxRow > filteredData.length
|
|
654
|
+
? filteredData.length
|
|
655
|
+
: page * maxRow
|
|
656
|
+
} of ${filteredData.length} entries`}</span>
|
|
657
|
+
<div className="flex items-center gap-2 text-xs">
|
|
621
658
|
<button
|
|
622
659
|
type="button"
|
|
623
|
-
className="flex justify-center items-center
|
|
660
|
+
className="flex justify-center items-center min-w-9 h-9 border rounded-md bg-secondary-bg hover:bg-secondary-light disabled:bg-secondary-light disabled:text-slate-400 disabled:pointer-events-none"
|
|
624
661
|
disabled={page === 1}
|
|
625
662
|
onClick={() => {
|
|
626
663
|
setPage(1);
|
|
664
|
+
paginationRef.current?.scrollTo({
|
|
665
|
+
left: 0,
|
|
666
|
+
behavior: "smooth",
|
|
667
|
+
});
|
|
627
668
|
}}
|
|
628
669
|
>
|
|
629
670
|
<Icon icon="gravity-ui:chevrons-left" />
|
|
630
671
|
</button>
|
|
631
672
|
<button
|
|
632
673
|
type="button"
|
|
633
|
-
className="hidden md:flex justify-center items-center
|
|
674
|
+
className="hidden md:flex justify-center items-center min-w-9 h-9 border rounded-md bg-secondary-bg hover:bg-secondary-light disabled:bg-secondary-light disabled:text-slate-400 disabled:pointer-events-none"
|
|
634
675
|
disabled={page === 1}
|
|
635
676
|
onClick={() => {
|
|
636
677
|
setPage((prev) => prev - 1);
|
|
678
|
+
handleOnPreviousClick();
|
|
637
679
|
}}
|
|
638
680
|
>
|
|
639
681
|
<Icon icon="gravity-ui:chevron-left" />
|
|
640
682
|
</button>
|
|
641
|
-
<div
|
|
642
|
-
{
|
|
643
|
-
|
|
644
|
-
|
|
645
|
-
|
|
646
|
-
|
|
647
|
-
|
|
648
|
-
|
|
649
|
-
|
|
650
|
-
|
|
651
|
-
|
|
652
|
-
|
|
653
|
-
|
|
654
|
-
|
|
655
|
-
|
|
656
|
-
|
|
657
|
-
|
|
658
|
-
|
|
659
|
-
|
|
660
|
-
|
|
661
|
-
|
|
683
|
+
<div
|
|
684
|
+
ref={paginationRef}
|
|
685
|
+
className="flex gap-2 max-w-20 overflow-auto [&::-webkit-scrollbar]:hidden"
|
|
686
|
+
>
|
|
687
|
+
{Array.from({
|
|
688
|
+
length: Math.ceil(filteredData.length / maxRow),
|
|
689
|
+
}).map((_, index) => {
|
|
690
|
+
return (
|
|
691
|
+
<button
|
|
692
|
+
key={index}
|
|
693
|
+
id={`pagination-page-${index}`}
|
|
694
|
+
type="button"
|
|
695
|
+
className="flex justify-center items-center min-w-9 h-9 border rounded-md select-none hover:bg-secondary-light disabled:bg-primary-transparent disabled:text-primary"
|
|
696
|
+
disabled={page === index + 1}
|
|
697
|
+
onClick={() => {
|
|
698
|
+
setPage(index + 1);
|
|
699
|
+
}}
|
|
700
|
+
>
|
|
701
|
+
{index + 1}
|
|
702
|
+
</button>
|
|
703
|
+
);
|
|
704
|
+
})}
|
|
662
705
|
</div>
|
|
663
706
|
<button
|
|
664
707
|
type="button"
|
|
665
|
-
className="hidden md:flex justify-center items-center
|
|
666
|
-
disabled={
|
|
708
|
+
className="hidden md:flex justify-center items-center min-w-9 h-9 border rounded-md bg-secondary-bg hover:bg-secondary-light disabled:bg-secondary-light disabled:text-slate-400 disabled:pointer-events-none"
|
|
709
|
+
disabled={filteredData.length <= page * maxRow}
|
|
667
710
|
onClick={() => {
|
|
668
711
|
setPage((prev) => prev + 1);
|
|
712
|
+
handleOnNextClick();
|
|
669
713
|
}}
|
|
670
714
|
>
|
|
671
715
|
<Icon icon="gravity-ui:chevron-right" />
|
|
672
716
|
</button>
|
|
673
717
|
<button
|
|
674
718
|
type="button"
|
|
675
|
-
className="flex justify-center items-center
|
|
676
|
-
disabled={
|
|
719
|
+
className="flex justify-center items-center min-w-9 h-9 border rounded-md bg-secondary-bg hover:bg-secondary-light disabled:bg-secondary-light disabled:text-slate-400 disabled:pointer-events-none"
|
|
720
|
+
disabled={filteredData.length <= page * maxRow}
|
|
677
721
|
onClick={() => {
|
|
678
|
-
setPage(Math.ceil(
|
|
722
|
+
setPage(Math.ceil(filteredData.length / maxRow));
|
|
723
|
+
paginationRef.current?.scrollTo({
|
|
724
|
+
left: paginationRef.current.scrollWidth,
|
|
725
|
+
behavior: "smooth",
|
|
726
|
+
});
|
|
679
727
|
}}
|
|
680
728
|
>
|
|
681
729
|
<Icon icon="gravity-ui:chevrons-right" />
|