jorgemike
51 lines
1.2 KiB
TypeScript
51 lines
1.2 KiB
TypeScript
export const tableCustomPagination = `interface RowData {
|
|
name: string;
|
|
age: number;
|
|
email: string;
|
|
}
|
|
|
|
export default function Page() {
|
|
const headers: Header<RowData>[] = [
|
|
{ key: "name", label: "Nombre" },
|
|
{ key: "age", label: "Edad" },
|
|
{ key: "email", label: "Correo" },
|
|
];
|
|
|
|
const [currentPage, setCurrentPage] = useState(1);
|
|
const [data, setData] = useState<any[]>([]);
|
|
const [loading, setLoading] = useState(false);
|
|
const rowsPerPage = 2;
|
|
|
|
useEffect(() => {
|
|
setLoading(true);
|
|
|
|
fetch(\`https://api.example.com/users?page=\${currentPage}&limit=\${rowsPerPage}\`)
|
|
.then((res) => res.json())
|
|
.then((json) => {
|
|
setData(json.data);
|
|
})
|
|
.catch((err) => {
|
|
console.error("Error fetching data:", err);
|
|
setData([]);
|
|
})
|
|
.finally(() => setLoading(false));
|
|
}, [currentPage]);
|
|
|
|
return (
|
|
<>
|
|
{loading ? (
|
|
<TablaSkeleton rows={2} columns={3} />
|
|
) : (
|
|
<Table
|
|
headers={headers}
|
|
data={data}
|
|
rowsPerPage={rowsPerPage}
|
|
controlledPage={currentPage}
|
|
onPageChange={setCurrentPage}
|
|
/>
|
|
)}
|
|
</>
|
|
)
|
|
}
|
|
`;
|