Add example of controlled DataTable

Signed-off-by: Charles de Dreuille <charles.dedreuille@gmail.com>

packages/canon/src/components/DataTable/DataTable.stories.tsx

@@ -24,6 +24,7 @@ import {
   getPaginationRowModel,
   useReactTable,
 } from '@tanstack/react-table';
+import { useState } from 'react';
 
 const meta = {
   title: 'Components/DataTable',
@@ -32,7 +33,7 @@ const meta = {
 export default meta;
 type Story = StoryObj<typeof meta>;
 
-export const Default: Story = {
+export const Uncontrolled: Story = {
   render: () => {
     const table = useReactTable<DataProps>({
       data,
@@ -96,3 +97,77 @@ export const Default: Story = {
     );
   },
 };
+
+export const Controlled: Story = {
+  render: () => {
+    const [pagination, setPagination] = useState({
+      pageIndex: 4,
+      pageSize: 5,
+    });
+
+    const table = useReactTable<DataProps>({
+      data,
+      columns,
+      getCoreRowModel: getCoreRowModel(),
+      getPaginationRowModel: getPaginationRowModel(),
+      state: {
+        pagination,
+      },
+      onPaginationChange: setPagination,
+    });
+
+    return (
+      <DataTable.Root table={table}>
+        <DataTable.Table>
+          <DataTable.Header>
+            {table.getHeaderGroups().map(headerGroup => (
+              <DataTable.Row key={headerGroup.id}>
+                {headerGroup.headers.map(header => {
+                  return (
+                    <DataTable.Head key={header.id}>
+                      {header.isPlaceholder
+                        ? null
+                        : flexRender(
+                            header.column.columnDef.header,
+                            header.getContext(),
+                          )}
+                    </DataTable.Head>
+                  );
+                })}
+              </DataTable.Row>
+            ))}
+          </DataTable.Header>
+          <DataTable.Body>
+            {table.getRowModel().rows?.length ? (
+              table.getRowModel().rows.map(row => (
+                <DataTable.Row
+                  key={row.id}
+                  data-state={row.getIsSelected() && 'selected'}
+                >
+                  {row.getVisibleCells().map(cell => (
+                    <DataTable.Cell key={cell.id}>
+                      {flexRender(
+                        cell.column.columnDef.cell,
+                        cell.getContext(),
+                      )}
+                    </DataTable.Cell>
+                  ))}
+                </DataTable.Row>
+              ))
+            ) : (
+              <DataTable.Row>
+                <DataTable.Cell
+                  colSpan={columns.length}
+                  className="h-24 text-center"
+                >
+                  No results.
+                </DataTable.Cell>
+              </DataTable.Row>
+            )}
+          </DataTable.Body>
+        </DataTable.Table>
+        <DataTable.Pagination />
+      </DataTable.Root>
+    );
+  },
+};

packages/canon/src/components/DataTable/Pagination/DataTablePagination.tsx

@@ -45,6 +45,7 @@ const DataTablePagination = forwardRef(
             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' },