MythEclipse/imphnen-frontend-service
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: Combine Pagination component into DataTable

Browse Source
This commit is contained in:
Hafid Nur
2025-03-28 18:50:17 +07:00
parent 79e0d39280
commit ac2ff2ec92
4 changed files with 102 additions and 91 deletions
Download Patch File Download Diff File Expand all files Collapse all files
libs/ui/src/molecules/index.ts
+1
View File
@@ -1 +1,2 @@
export * from './input-form';
export * from './pagination';
libs/ui/src/molecules/pagination/index.ts
+1 -1
View File
@@ -1 +1 @@
export {};
export * from './pagination';
libs/ui/src/molecules/pagination/pagination.tsx
+59 -54
View File
@@ -1,82 +1,89 @@
import { FC, ReactElement } from 'react';
import { Table } from '@tanstack/react-table';
import { ArrowLeftOutlined, ArrowRightOutlined } from '@ant-design/icons';
export interface PaginationProps {
currentPage: number;
totalPages: number;
onPageChange: (page: number) => void;
interface PaginationProps<T> {
table: Table<T>;
}
export const Pagination: FC<PaginationProps> = ({
currentPage,
totalPages,
onPageChange,
}): ReactElement => {
const getPageNumbers = () => {
const pages = [];
if (currentPage > 3) {
pages.push(1);
if (currentPage > 4) {
pages.push('...');
}
}
const startPage = Math.max(1, currentPage - 1);
const endPage = Math.min(totalPages, currentPage + 1);
for (let i = startPage; i <= endPage; i++) {
pages.push(i);
}
if (currentPage < totalPages - 2) {
if (currentPage < totalPages - 3) {
pages.push('...');
}
pages.push(totalPages);
}
return pages;
};
export const Pagination = <T,>({ table }: PaginationProps<T>) => {
return (
<div className="flex items-center justify-center gap-[40px]">
<button
onClick={() => currentPage > 1 && onPageChange(currentPage - 1)}
disabled={currentPage === 1}
className="disabled:opacity-50 cursor-pointer"
onClick={() => table.previousPage()}
disabled={!table.getCanPreviousPage()}
aria-label="Previous page"
>
<ArrowLeftOutlined className="text-[16px] text-neutral-800" />
</button>
<div className="flex gap-4 items-baseline">
{getPageNumbers().map((page, index) =>
typeof page === 'number' ? (
{table.getPageCount() <= 8 ? (
Array.from({ length: table.getPageCount() }, (_, index) => (
<button
key={index}
onClick={() => onPageChange(page)}
className={`size-[30px] py-[8px] flex items-center justify-center rounded-md cursor-pointer ${
table.getState().pagination.pageIndex === index
? 'bg-primary-500 text-white'
: 'bg-primary-100 hover:bg-primary-200'
}`}
onClick={() => table.setPageIndex(index)}
>
{index + 1}
</button>
))
) : (
<>
<button
onClick={() => table.setPageIndex(0)}
className={`size-[30px] py-[8px] flex items-center justify-center rounded-md cursor-pointer ${
currentPage === page
table.getState().pagination.pageIndex === 0
? 'bg-primary-500 text-white'
: 'bg-primary-100 hover:bg-primary-200'
}`}
>
{page}
1
</button>
) : (
<span key={index} className="px-1">
{page}
</span>
)
{table.getState().pagination.pageIndex > 3 && <span>...</span>}
{Array.from(
{ length: 5 },
(_, index) => table.getState().pagination.pageIndex - 2 + index
)
.filter((page) => page > 0 && page < table.getPageCount() - 1)
.map((page) => (
<button
key={page}
onClick={() => table.setPageIndex(page)}
className={`size-[30px] py-[8px] flex items-center justify-center rounded-md cursor-pointer ${
table.getState().pagination.pageIndex === page
? 'bg-primary-500 text-white'
: 'bg-primary-100 hover:bg-primary-200'
}`}
>
{page + 1}
</button>
))}
{table.getState().pagination.pageIndex <
table.getPageCount() - 4 && <span>...</span>}
<button
onClick={() => table.setPageIndex(table.getPageCount() - 1)}
className={`size-[30px] py-[8px] flex items-center justify-center rounded-md cursor-pointer ${
table.getState().pagination.pageIndex ===
table.getPageCount() - 1
? 'bg-primary-500 text-white'
: 'bg-primary-100 hover:bg-primary-200'
}`}
>
{table.getPageCount()}
</button>
</>
)}
</div>
<button
onClick={() =>
currentPage < totalPages && onPageChange(currentPage + 1)
}
disabled={currentPage === totalPages}
className="disabled:opacity-50 cursor-pointer"
onClick={() => table.nextPage()}
disabled={!table.getCanNextPage()}
aria-label="Next page"
>
<ArrowRightOutlined className="text-[16px] text-neutral-800" />
@@ -84,5 +91,3 @@ export const Pagination: FC<PaginationProps> = ({
</div>
);
};
export default Pagination;
libs/ui/src/organisms/datatable/datatable.tsx
+41 -36
View File
@@ -6,6 +6,8 @@ import {
flexRender,
ColumnDef,
} from '@tanstack/react-table';
import { Pagination } from '../../molecules';
import React from 'react';
interface DataTableProps<T> {
@@ -36,42 +38,45 @@ export const DataTable = <T,>({
});
return (
<div className="w-full overflow-x-auto">
<table className="w-full min-w-full text-base">
<thead className="bg-primary-50 mb-3 text-left">
{table.getHeaderGroups().map((headerGroup) => (
<tr key={headerGroup.id}>
{headerGroup.headers.map((header) => (
<th
key={header.id}
className="py-3 px-5 font-normal first:rounded-l-lg last:rounded-r-lg"
>
{header.isPlaceholder
? null
: flexRender(
header.column.columnDef.header,
header.getContext()
)}
</th>
))}
</tr>
))}
</thead>
<tbody className="mt-3">
{table.getRowModel().rows.map((row) => (
<tr key={row.id} className="bg-primary-100 odd:bg-white">
{row.getVisibleCells().map((cell, index) => (
<td
key={cell.id}
className="py-3 px-5 first:rounded-l-lg last:rounded-r-lg"
>
{flexRender(cell.column.columnDef.cell, cell.getContext())}
</td>
))}
</tr>
))}
</tbody>
</table>
<div className="flex flex-col gap-8">
<div className="w-full overflow-x-auto">
<table className="w-full min-w-full text-base">
<thead className="bg-primary-50 mb-3 text-left">
{table.getHeaderGroups().map((headerGroup) => (
<tr key={headerGroup.id}>
{headerGroup.headers.map((header) => (
<th
key={header.id}
className="py-3 px-5 font-normal first:rounded-l-lg last:rounded-r-lg"
>
{header.isPlaceholder
? null
: flexRender(
header.column.columnDef.header,
header.getContext()
)}
</th>
))}
</tr>
))}
</thead>
<tbody className="mt-3">
{table.getRowModel().rows.map((row) => (
<tr key={row.id} className="bg-primary-100 odd:bg-white">
{row.getVisibleCells().map((cell, index) => (
<td
key={cell.id}
className="py-3 px-5 first:rounded-l-lg last:rounded-r-lg"
>
{flexRender(cell.column.columnDef.cell, cell.getContext())}
</td>
))}
</tr>
))}
</tbody>
</table>
</div>
<Pagination table={table} />
</div>
);
};