alecodes/personal-page
2
0
Fork 0
Code Issues 17 Pull requests Projects 1 Releases Packages 1 Wiki Activity Actions

Update pagination in table.

Browse source 
Add getPaginationRage to usePagination hook.
Use the getPaginationRage to create dynamic buttons in the table.
This commit is contained in:
Alexander Navarro 2023-11-05 10:32:49 -03:00
parent b1979d7351
commit e593354cb4
4 changed files with 80 additions and 26 deletions
Download patch file Download diff file Expand all files Collapse all files

16
src/components/Table/Table.tsx
View file

@ -43,8 +43,9 @@ export default function Table({ data, headers }: Props): JSX.Element {
});
}, [data, filters]);
const { items, changeOffset } = usePagination<DataItem>({
const { items, changeOffset, getPaginationRange } = usePagination<DataItem>({
items: filteredItems,
limit: 10,
});
const handleUpdateFilters = (
@ -179,6 +180,19 @@ export default function Table({ data, headers }: Props): JSX.Element {
>
Prev
</button>
{getPaginationRange().map((item) => (
<button
className={item.current ? 'btn-primary' : ''}
key={item.page}
onClick={() => {
changeOffset(Offset.To, item.page);
}}
>
{item.page}
</button>
))}
<button
onClick={() => {
changeOffset(Offset.Next);