feat(DataTable): add support for pagination (#3199)

* chore: check-in work * chore: check-in work * chore: add page example * feat: add live region support * refator: update ul to ol * refactor: add page prefix to page steps * chore: address eslint violations * refactor: update render for DataTable Pagionation * test(DataTable): add tests for Pagination * chore: add docs and changeset * Update generated/components.json * chore: add flex-wrap and gap to pagination * chore: address eslint violations * feat: add trailing ellipsis for truncation pages * fix(LiveRegion): defer announcement to after 750ms --------- Co-authored-by: Josh Black <joshblack@users.noreply.github.com>
primer · Apr 27, 2023 · bfd9e0c · bfd9e0c
1 parent 16ecfee
commit bfd9e0c
Show file tree

Hide file tree

Showing 12 changed files with 1,147 additions and 2 deletions.
diff --git a/.changeset/small-pumas-relate.md b/.changeset/small-pumas-relate.md
@@ -0,0 +1,5 @@
+---
+'@primer/react': minor
+---
+
+Add support for Pagination in DataTable
diff --git a/generated/components.json b/generated/components.json
@@ -1347,6 +1347,10 @@
         {
           "id": "components-datatable-features--with-loading",
           "code": "() => {\n  const [loading] = React.useState(true)\n  return (\n    <Table.Container>\n      <Table.Title as=\"h2\" id=\"repositories\">\n        Repositories\n      </Table.Title>\n      <Table.Subtitle as=\"p\" id=\"repositories-subtitle\">\n        A subtitle could appear here to give extra context to the data.\n      </Table.Subtitle>\n      {loading ? (\n        <Table.Skeleton\n          aria-labelledby=\"repositories\"\n          aria-describedby=\"repositories-subtitle\"\n          columns={columns}\n          rows={10}\n        />\n      ) : (\n        <DataTable\n          aria-labelledby=\"repositories\"\n          aria-describedby=\"repositories-subtitle\"\n          data={data}\n          columns={columns}\n        />\n      )}\n    </Table.Container>\n  )\n}"
+        },
+        {
+          "id": "components-datatable-features--with-pagination",
+          "code": "() => {\n  const pageSize = 10\n  const [pageIndex, setPageIndex] = React.useState(0)\n  const start = pageIndex * pageSize\n  const end = start + pageSize\n  const rows = repos.slice(start, end)\n  return (\n    <Table.Container>\n      <Table.Title as=\"h2\" id=\"repositories\">\n        Repositories\n      </Table.Title>\n      <Table.Subtitle as=\"p\" id=\"repositories-subtitle\">\n        A subtitle could appear here to give extra context to the data.\n      </Table.Subtitle>\n      <DataTable\n        aria-labelledby=\"repositories\"\n        aria-describedby=\"repositories-subtitle\"\n        data={rows}\n        columns={[\n          {\n            header: 'Repository',\n            field: 'name',\n            rowHeader: true,\n          },\n          {\n            header: 'Type',\n            field: 'type',\n            renderCell: (row) => {\n              return <Label>{uppercase(row.type)}</Label>\n            },\n          },\n          {\n            header: 'Updated',\n            field: 'updatedAt',\n            renderCell: (row) => {\n              return <RelativeTime date={new Date(row.updatedAt)} />\n            },\n          },\n          {\n            header: 'Dependabot',\n            field: 'securityFeatures.dependabot',\n            renderCell: (row) => {\n              return row.securityFeatures.dependabot.length > 0 ? (\n                <LabelGroup>\n                  {row.securityFeatures.dependabot.map((feature) => {\n                    return <Label key={feature}>{uppercase(feature)}</Label>\n                  })}\n                </LabelGroup>\n              ) : null\n            },\n          },\n          {\n            header: 'Code scanning',\n            field: 'securityFeatures.codeScanning',\n            renderCell: (row) => {\n              return row.securityFeatures.codeScanning.length > 0 ? (\n                <LabelGroup>\n                  {row.securityFeatures.codeScanning.map((feature) => {\n                    return <Label key={feature}>{uppercase(feature)}</Label>\n                  })}\n                </LabelGroup>\n              ) : null\n            },\n          },\n        ]}\n      />\n      <Table.Pagination\n        aria-label=\"Pagination for Repositories\"\n        pageSize={pageSize}\n        totalCount={repos.length}\n        onChange={({ pageIndex }) => {\n          setPageIndex(pageIndex)\n        }}\n      />\n    </Table.Container>\n  )\n}"
         }
       ],
       "props": [
@@ -1506,6 +1510,37 @@
               "description": "Optionally specify the number of rows which should be included in the skeleton state of the component"
             }
           ]
+        },
+        {
+          "name": "Table.Pagination",
+          "props": [
+            {
+              "name": "aria-label",
+              "type": "string",
+              "required": true
+            },
+            {
+              "name": "defaultPageIndex",
+              "type": "string"
+            },
+            {
+              "name": "id",
+              "type": "string"
+            },
+            {
+              "name": "onChange",
+              "type": "({ pageIndex }: { pageIndex: number }) => void"
+            },
+            {
+              "name": "pageSize",
+              "type": "number"
+            },
+            {
+              "name": "totalCount",
+              "type": "number",
+              "required": true
+            }
+          ]
         }
       ]
     },

diff --git a/src/DataTable/DataTable.docs.json b/src/DataTable/DataTable.docs.json
@@ -33,6 +33,9 @@
     },
     {
       "id": "components-datatable-features--with-loading"
+    },
+    {
+      "id": "components-datatable-features--with-pagination"
     }
   ],
   "props": [
@@ -192,6 +195,37 @@
           "description": "Optionally specify the number of rows which should be included in the skeleton state of the component"
         }
       ]
+    },
+    {
+      "name": "Table.Pagination",
+      "props": [
+        {
+          "name": "aria-label",
+          "type": "string",
+          "required": true
+        },
+        {
+          "name": "defaultPageIndex",
+          "type": "string"
+        },
+        {
+          "name": "id",
+          "type": "string"
+        },
+        {
+          "name": "onChange",
+          "type": "({ pageIndex }: { pageIndex: number }) => void"
+        },
+        {
+          "name": "pageSize",
+          "type": "number"
+        },
+        {
+          "name": "totalCount",
+          "type": "number",
+          "required": true
+        }
+      ]
     }
   ]
 }
diff --git a/src/DataTable/DataTable.features.stories.tsx b/src/DataTable/DataTable.features.stories.tsx
@@ -13,6 +13,7 @@ import LabelGroup from '../LabelGroup'
 import RelativeTime from '../RelativeTime'
 import VisuallyHidden from '../_VisuallyHidden'
 import {createColumnHelper} from './column'
+import {repos} from './storybook/data'
 
 export default {
   title: 'Components/DataTable/Features',
@@ -1359,3 +1360,82 @@ export const WithRightAlignedColumns = () => {
     </Table.Container>
   )
 }
+
+export const WithPagination = () => {
+  const pageSize = 10
+  const [pageIndex, setPageIndex] = React.useState(0)
+  const start = pageIndex * pageSize
+  const end = start + pageSize
+  const rows = repos.slice(start, end)
+
+  return (
+    <Table.Container>
+      <Table.Title as="h2" id="repositories">
+        Repositories
+      </Table.Title>
+      <Table.Subtitle as="p" id="repositories-subtitle">
+        A subtitle could appear here to give extra context to the data.
+      </Table.Subtitle>
+      <DataTable
+        aria-labelledby="repositories"
+        aria-describedby="repositories-subtitle"
+        data={rows}
+        columns={[
+          {
+            header: 'Repository',
+            field: 'name',
+            rowHeader: true,
+          },
+          {
+            header: 'Type',
+            field: 'type',
+            renderCell: row => {
+              return <Label>{uppercase(row.type)}</Label>
+            },
+          },
+          {
+            header: 'Updated',
+            field: 'updatedAt',
+            renderCell: row => {
+              return <RelativeTime date={new Date(row.updatedAt)} />
+            },
+          },
+          {
+            header: 'Dependabot',
+            field: 'securityFeatures.dependabot',
+            renderCell: row => {
+              return row.securityFeatures.dependabot.length > 0 ? (
+                <LabelGroup>
+                  {row.securityFeatures.dependabot.map(feature => {
+                    return <Label key={feature}>{uppercase(feature)}</Label>
+                  })}
+                </LabelGroup>
+              ) : null
+            },
+          },
+          {
+            header: 'Code scanning',
+            field: 'securityFeatures.codeScanning',
+            renderCell: row => {
+              return row.securityFeatures.codeScanning.length > 0 ? (
+                <LabelGroup>
+                  {row.securityFeatures.codeScanning.map(feature => {
+                    return <Label key={feature}>{uppercase(feature)}</Label>
+                  })}
+                </LabelGroup>
+              ) : null
+            },
+          },
+        ]}
+      />
+      <Table.Pagination
+        aria-label="Pagination for Repositories"
+        pageSize={pageSize}
+        totalCount={repos.length}
+        onChange={({pageIndex}) => {
+          setPageIndex(pageIndex)
+        }}
+      />
+    </Table.Container>
+  )
+}