also change table content

primer · Oct 3, 2024 · 4973d27 · 4973d27
1 parent f50ba8c
commit 4973d27
Show file tree

Hide file tree

Showing 2 changed files with 28 additions and 1 deletion.
diff --git a/packages/react/src/DataTable/DataTable.stories.tsx b/packages/react/src/DataTable/DataTable.stories.tsx
@@ -195,6 +195,11 @@ export const Playground = (args: DataTableProps<UniqueRow> & ColWidthArgTypes) =
 
   const align = args.align as CellAlignment
 
+  const [pageIndex, setPageIndex] = React.useState(0)
+  const start = pageIndex * args.pageSize
+  const end = start + args.pageSize
+  const rows = data.slice(start, end)
+
   return (
     <Table.Container>
       <Table.Title as="h2" id="repositories">
@@ -207,7 +212,7 @@ export const Playground = (args: DataTableProps<UniqueRow> & ColWidthArgTypes) =
         {...args}
         aria-labelledby="repositories"
         aria-describedby="repositories-subtitle"
-        data={data}
+        data={rows}
         columns={[
           {
             header: 'Repository',
@@ -276,6 +281,15 @@ export const Playground = (args: DataTableProps<UniqueRow> & ColWidthArgTypes) =
           },
         ]}
       />
+      <Table.Pagination
+        aria-label="Pagination for Repositories"
+        pageSize={parseInt(args.pageSize, 10)}
+        totalCount={data.length}
+        onChange={({pageIndex}) => {
+          setPageIndex(pageIndex)
+        }}
+        defaultPageIndex={parseInt(args.defaultPageIndex, 10)}
+      />
     </Table.Container>
   )
 }
@@ -318,6 +332,18 @@ Playground.argTypes = {
       disable: true,
     },
   },
+  pageSize: {
+    control: {
+      defaultValue: 5,
+      type: 'number',
+      min: 1,
+    },
+  },
+  defaultPageIndex: {
+    control: {
+      type: 'number',
+    },
+  },
   cellPadding: {
     control: {
       type: 'radio',

diff --git a/packages/react/src/DataTable/Pagination.tsx b/packages/react/src/DataTable/Pagination.tsx
@@ -521,6 +521,7 @@ function usePagination(config: PaginationConfig): PaginationResult {
   if (validDefaultPageCount && defaultIndex !== defaultPageIndex) {
     setDefaultIndex(defaultPageIndex)
     setPageIndex(defaultPageIndex)
+    onChange?.({pageIndex: defaultPageIndex})
   }
   const pageStart = pageIndex * pageSize
   const pageEnd = Math.min(pageIndex * pageSize + pageSize, totalCount - 1)