paulononato/backstage
1
0
Fork 0
Code Issues Pull Requests Actions 34 Packages Projects Releases Wiki Activity

Add support for manualPagination

Browse Source 
Signed-off-by: Charles de Dreuille <charles.dedreuille@gmail.com>
This commit is contained in:
Charles de Dreuille
2025-04-11 14:47:01 +02:00
parent 06b3c34382
commit 27e33fe1aa
2 changed files with 22 additions and 19 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/canon/src/components/DataTable/DataTable.stories.tsx
+2 -1
View File
@@ -23,6 +23,7 @@ import {
getCoreRowModel,
getPaginationRowModel,
useReactTable,
PaginationState,
} from '@tanstack/react-table';
import { useState } from 'react';
@@ -100,7 +101,7 @@ export const Uncontrolled: Story = {
export const Controlled: Story = {
render: () => {
const [pagination, setPagination] = useState({
const [pagination, setPagination] = useState<PaginationState>({
pageIndex: 4,
pageSize: 5,
});
packages/canon/src/components/DataTable/Pagination/DataTablePagination.tsx
+20 -18
View File
@@ -40,24 +40,26 @@ const DataTablePagination = forwardRef(
{...rest}
>
<div className="canon-DataTablePagination--left">
<Select
name="pageSize"
size="small"
placeholder="Show 10 results"
options={[
{ label: 'Show 5 results', value: '5' },
{ label: 'Show 10 results', value: '10' },
{ label: 'Show 20 results', value: '20' },
{ label: 'Show 30 results', value: '30' },
{ label: 'Show 40 results', value: '40' },
{ label: 'Show 50 results', value: '50' },
]}
value={pageSize?.toString()}
onValueChange={value => {
table?.setPageSize(Number(value));
}}
className="canon-DataTablePagination--select"
/>
{!table.options.manualPagination && (
<Select
name="pageSize"
size="small"
placeholder="Show 10 results"
options={[
{ label: 'Show 5 results', value: '5' },
{ label: 'Show 10 results', value: '10' },
{ label: 'Show 20 results', value: '20' },
{ label: 'Show 30 results', value: '30' },
{ label: 'Show 40 results', value: '40' },
{ label: 'Show 50 results', value: '50' },
]}
value={pageSize?.toString()}
onValueChange={value => {
table?.setPageSize(Number(value));
}}
className="canon-DataTablePagination--select"
/>
)}
</div>
<div className="canon-DataTablePagination--right">
<Text variant="body">{`${(pageIndex ?? 0) * (pageSize ?? 10) + 1} - ${