chore(DataTable): update ids for DataTable docs (#3023)

joshblack · web-flow · commit faa7667754f8 · 2023-03-14T14:49:38.000Z
* chore(DataTable): update ids for DataTable docs

* docs(DataTable): remove draft from story name

* chore(DataTable): update subcomponents for DataTable

* chore: remove drafts prefix

* Update generated/components.json

---------

Co-authored-by: Josh Black &lt;joshblack@users.noreply.github.com&gt;
diff --git a/generated/components.json b/generated/components.json
@@ -1857,24 +1857,28 @@
           "code": "() => (\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={data}\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.Container>\n)"
         },
         {
-          "id": "drafts-components-datatable--with-title",
+          "id": "components-datatable-features--with-title",
           "code": "() => (\n  <Table.Container>\n    <Table.Title as=\"h2\" id=\"repositories\">\n      Repositories\n    </Table.Title>\n    <DataTable\n      aria-labelledby=\"repositories\"\n      aria-describedby=\"repositories-subtitle\"\n      data={data}\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.Container>\n)"
         },
         {
-          "id": "drafts-components-datatable--with-title-and-subtitle",
+          "id": "components-datatable-features--with-title-and-subtitle",
           "code": "() => (\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={data}\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.Container>\n)"
         },
         {
-          "id": "drafts-components-datatable--with-sorting",
+          "id": "components-datatable-features--with-sorting",
           "code": "() => {\n  const rows = Array.from(data).sort((a, b) => {\n    return b.updatedAt - a.updatedAt\n  })\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            sortBy: 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            sortBy: true,\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        initialSortColumn=\"updatedAt\"\n        initialSortDirection=\"DESC\"\n      />\n    </Table.Container>\n  )\n}"
         },
         {
-          "id": "drafts-components-datatable--with-actions",
+          "id": "components-datatable-features--with-actions",
           "code": "() => (\n  <Table.Container>\n    <Table.Title as=\"h2\" id=\"repositories\">\n      Repositories\n    </Table.Title>\n    <Table.Actions>\n      <IconButton\n        aria-label=\"Download\"\n        icon={DownloadIcon}\n        variant=\"invisible\"\n      />\n      <IconButton aria-label=\"Add row\" icon={PlusIcon} variant=\"invisible\" />\n    </Table.Actions>\n    <Table.Divider />\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={data}\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.Container>\n)"
         },
         {
-          "id": "drafts-components-datatable--with-action",
+          "id": "components-datatable-features--with-action",
           "code": "() => (\n  <Table.Container>\n    <Table.Title as=\"h2\" id=\"repositories\">\n      Repositories\n    </Table.Title>\n    <Table.Actions>\n      <Button>Action</Button>\n    </Table.Actions>\n    <Table.Divider />\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={data}\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.Container>\n)"
+        },
+        {
+          "id": "components-datatable-features--with-custom-heading",
+          "code": "() => (\n  <>\n    <Heading as=\"h2\" id=\"repositories\">\n      Security coverage\n    </Heading>\n    <p id=\"repositories-subtitle\">\n      Organization members can only see data for the most recently-updated\n      repositories. To see all repositories, talk to your organization\n      administrator about becoming a security manager.\n    </p>\n    <Table.Container>\n      <DataTable\n        aria-labelledby=\"repositories\"\n        aria-describedby=\"repositories-subtitle\"\n        data={data}\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.Container>\n  </>\n)"
         }
       ],
       "props": [
@@ -1930,7 +1934,7 @@
           ]
         },
         {
-          "name": "TableHead",
+          "name": "Table.Head",
           "props": [
             {
               "name": "children",
@@ -1939,7 +1943,7 @@
           ]
         },
         {
-          "name": "TableBody",
+          "name": "Table.Body",
           "props": [
             {
               "name": "children",
@@ -1948,7 +1952,7 @@
           ]
         },
         {
-          "name": "TableRow",
+          "name": "Table.Row",
           "props": [
             {
               "name": "children",
@@ -1957,7 +1961,7 @@
           ]
         },
         {
-          "name": "TableHeader",
+          "name": "Table.Header",
           "props": [
             {
               "name": "children",
@@ -1966,7 +1970,7 @@
           ]
         },
         {
-          "name": "TableCell",
+          "name": "Table.Cell",
           "props": [
             {
               "name": "children",
@@ -1980,7 +1984,7 @@
           ]
         },
         {
-          "name": "TableContainer",
+          "name": "Table.Container",
           "props": [
             {
               "name": "children",
@@ -1989,7 +1993,7 @@
           ]
         },
         {
-          "name": "TableTitle",
+          "name": "Table.Title",
           "props": [
             {
               "name": "children",
@@ -2003,7 +2007,7 @@
           ]
         },
         {
-          "name": "TableSubtitle",
+          "name": "Table.Subtitle",
           "props": [
             {
               "name": "children",
diff --git a/src/DataTable/DataTable.docs.json b/src/DataTable/DataTable.docs.json
@@ -5,19 +5,22 @@
   "a11yReviewed": false,
   "stories": [
     {
-      "id": "drafts-components-datatable--with-title"
+      "id": "components-datatable-features--with-title"
     },
     {
-      "id": "drafts-components-datatable--with-title-and-subtitle"
+      "id": "components-datatable-features--with-title-and-subtitle"
     },
     {
-      "id": "drafts-components-datatable--with-sorting"
+      "id": "components-datatable-features--with-sorting"
     },
     {
-      "id": "drafts-components-datatable--with-actions"
+      "id": "components-datatable-features--with-actions"
     },
     {
-      "id": "drafts-components-datatable--with-action"
+      "id": "components-datatable-features--with-action"
+    },
+    {
+      "id": "components-datatable-features--with-custom-heading"
     }
   ],
   "props": [
@@ -73,7 +76,7 @@
       ]
     },
     {
-      "name": "TableHead",
+      "name": "Table.Head",
       "props": [
         {
           "name": "children",
@@ -82,7 +85,7 @@
       ]
     },
     {
-      "name": "TableBody",
+      "name": "Table.Body",
       "props": [
         {
           "name": "children",
@@ -91,7 +94,7 @@
       ]
     },
     {
-      "name": "TableRow",
+      "name": "Table.Row",
       "props": [
         {
           "name": "children",
@@ -100,7 +103,7 @@
       ]
     },
     {
-      "name": "TableHeader",
+      "name": "Table.Header",
       "props": [
         {
           "name": "children",
@@ -109,7 +112,7 @@
       ]
     },
     {
-      "name": "TableCell",
+      "name": "Table.Cell",
       "props": [
         {
           "name": "children",
@@ -123,7 +126,7 @@
       ]
     },
     {
-      "name": "TableContainer",
+      "name": "Table.Container",
       "props": [
         {
           "name": "children",
@@ -132,7 +135,7 @@
       ]
     },
     {
-      "name": "TableTitle",
+      "name": "Table.Title",
       "props": [
         {
           "name": "children",
@@ -146,7 +149,7 @@
       ]
     },
     {
-      "name": "TableSubtitle",
+      "name": "Table.Subtitle",
       "props": [
         {
           "name": "children",
diff --git a/src/DataTable/DataTable.features.stories.tsx b/src/DataTable/DataTable.features.stories.tsx
@@ -9,7 +9,7 @@ import LabelGroup from '../LabelGroup'
 import RelativeTime from '../RelativeTime'
 
 export default {
-  title: 'Drafts/Components/DataTable/Features',
+  title: 'Components/DataTable/Features',
   component: DataTable,
 } as Meta<typeof DataTable>
 
diff --git a/src/DataTable/DataTable.stories.tsx b/src/DataTable/DataTable.stories.tsx
@@ -6,7 +6,7 @@ import LabelGroup from '../LabelGroup'
 import RelativeTime from '../RelativeTime'
 
 export default {
-  title: 'Drafts/Components/DataTable',
+  title: 'Components/DataTable',
   component: DataTable,
 } as Meta<typeof DataTable>
 

Original file line number	Diff line number	Diff line change
`@@ -1857,24 +1857,28 @@`
`1857`	`1857`	"code": "() => (\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={data}\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.Container>\n)"
`1858`	`1858`	`},`
`1859`	`1859`	`{`
`1860`		`- "id": "drafts-components-datatable--with-title",`
	`1860`	`+ "id": "components-datatable-features--with-title",`
`1861`	`1861`	"code": "() => (\n <Table.Container>\n <Table.Title as=\"h2\" id=\"repositories\">\n Repositories\n </Table.Title>\n <DataTable\n aria-labelledby=\"repositories\"\n aria-describedby=\"repositories-subtitle\"\n data={data}\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.Container>\n)"
`1862`	`1862`	`},`
`1863`	`1863`	`{`
`1864`		`- "id": "drafts-components-datatable--with-title-and-subtitle",`
	`1864`	`+ "id": "components-datatable-features--with-title-and-subtitle",`
`1865`	`1865`	"code": "() => (\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={data}\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.Container>\n)"
`1866`	`1866`	`},`
`1867`	`1867`	`{`
`1868`		`- "id": "drafts-components-datatable--with-sorting",`
	`1868`	`+ "id": "components-datatable-features--with-sorting",`
`1869`	`1869`	"code": "() => {\n const rows = Array.from(data).sort((a, b) => {\n return b.updatedAt - a.updatedAt\n })\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 sortBy: 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 sortBy: true,\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 initialSortColumn=\"updatedAt\"\n initialSortDirection=\"DESC\"\n />\n </Table.Container>\n )\n}"
`1870`	`1870`	`},`
`1871`	`1871`	`{`
`1872`		`- "id": "drafts-components-datatable--with-actions",`
	`1872`	`+ "id": "components-datatable-features--with-actions",`
`1873`	`1873`	"code": "() => (\n <Table.Container>\n <Table.Title as=\"h2\" id=\"repositories\">\n Repositories\n </Table.Title>\n <Table.Actions>\n <IconButton\n aria-label=\"Download\"\n icon={DownloadIcon}\n variant=\"invisible\"\n />\n <IconButton aria-label=\"Add row\" icon={PlusIcon} variant=\"invisible\" />\n </Table.Actions>\n <Table.Divider />\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={data}\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.Container>\n)"
`1874`	`1874`	`},`
`1875`	`1875`	`{`
`1876`		`- "id": "drafts-components-datatable--with-action",`
	`1876`	`+ "id": "components-datatable-features--with-action",`
`1877`	`1877`	"code": "() => (\n <Table.Container>\n <Table.Title as=\"h2\" id=\"repositories\">\n Repositories\n </Table.Title>\n <Table.Actions>\n <Button>Action</Button>\n </Table.Actions>\n <Table.Divider />\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={data}\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.Container>\n)"
	`1878`	`+ },`
	`1879`	`+ {`
	`1880`	`+ "id": "components-datatable-features--with-custom-heading",`
	`1881`	+ "code": "() => (\n <>\n <Heading as=\"h2\" id=\"repositories\">\n Security coverage\n </Heading>\n <p id=\"repositories-subtitle\">\n Organization members can only see data for the most recently-updated\n repositories. To see all repositories, talk to your organization\n administrator about becoming a security manager.\n </p>\n <Table.Container>\n <DataTable\n aria-labelledby=\"repositories\"\n aria-describedby=\"repositories-subtitle\"\n data={data}\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.Container>\n </>\n)"
`1878`	`1882`	`}`
`1879`	`1883`	`],`
`1880`	`1884`	`"props": [`
`@@ -1930,7 +1934,7 @@`
`1930`	`1934`	`]`
`1931`	`1935`	`},`
`1932`	`1936`	`{`
`1933`		`- "name": "TableHead",`
	`1937`	`+ "name": "Table.Head",`
`1934`	`1938`	`"props": [`
`1935`	`1939`	`{`
`1936`	`1940`	`"name": "children",`
`@@ -1939,7 +1943,7 @@`
`1939`	`1943`	`]`
`1940`	`1944`	`},`
`1941`	`1945`	`{`
`1942`		`- "name": "TableBody",`
	`1946`	`+ "name": "Table.Body",`
`1943`	`1947`	`"props": [`
`1944`	`1948`	`{`
`1945`	`1949`	`"name": "children",`
`@@ -1948,7 +1952,7 @@`
`1948`	`1952`	`]`
`1949`	`1953`	`},`
`1950`	`1954`	`{`
`1951`		`- "name": "TableRow",`
	`1955`	`+ "name": "Table.Row",`
`1952`	`1956`	`"props": [`
`1953`	`1957`	`{`
`1954`	`1958`	`"name": "children",`
`@@ -1957,7 +1961,7 @@`
`1957`	`1961`	`]`
`1958`	`1962`	`},`
`1959`	`1963`	`{`
`1960`		`- "name": "TableHeader",`
	`1964`	`+ "name": "Table.Header",`
`1961`	`1965`	`"props": [`
`1962`	`1966`	`{`
`1963`	`1967`	`"name": "children",`
`@@ -1966,7 +1970,7 @@`
`1966`	`1970`	`]`
`1967`	`1971`	`},`
`1968`	`1972`	`{`
`1969`		`- "name": "TableCell",`
	`1973`	`+ "name": "Table.Cell",`
`1970`	`1974`	`"props": [`
`1971`	`1975`	`{`
`1972`	`1976`	`"name": "children",`
`@@ -1980,7 +1984,7 @@`
`1980`	`1984`	`]`
`1981`	`1985`	`},`
`1982`	`1986`	`{`
`1983`		`- "name": "TableContainer",`
	`1987`	`+ "name": "Table.Container",`
`1984`	`1988`	`"props": [`
`1985`	`1989`	`{`
`1986`	`1990`	`"name": "children",`
`@@ -1989,7 +1993,7 @@`
`1989`	`1993`	`]`
`1990`	`1994`	`},`
`1991`	`1995`	`{`
`1992`		`- "name": "TableTitle",`
	`1996`	`+ "name": "Table.Title",`
`1993`	`1997`	`"props": [`
`1994`	`1998`	`{`
`1995`	`1999`	`"name": "children",`
`@@ -2003,7 +2007,7 @@`
`2003`	`2007`	`]`
`2004`	`2008`	`},`
`2005`	`2009`	`{`
`2006`		`- "name": "TableSubtitle",`
	`2010`	`+ "name": "Table.Subtitle",`
`2007`	`2011`	`"props": [`
`2008`	`2012`	`{`
`2009`	`2013`	`"name": "children",`
Original file line number	Diff line number	Diff line change
`@@ -5,19 +5,22 @@`
`5`	`5`	`"a11yReviewed": false,`
`6`	`6`	`"stories": [`
`7`	`7`	`{`
`8`		`- "id": "drafts-components-datatable--with-title"`
	`8`	`+ "id": "components-datatable-features--with-title"`
`9`	`9`	`},`
`10`	`10`	`{`
`11`		`- "id": "drafts-components-datatable--with-title-and-subtitle"`
	`11`	`+ "id": "components-datatable-features--with-title-and-subtitle"`
`12`	`12`	`},`
`13`	`13`	`{`
`14`		`- "id": "drafts-components-datatable--with-sorting"`
	`14`	`+ "id": "components-datatable-features--with-sorting"`
`15`	`15`	`},`
`16`	`16`	`{`
`17`		`- "id": "drafts-components-datatable--with-actions"`
	`17`	`+ "id": "components-datatable-features--with-actions"`
`18`	`18`	`},`
`19`	`19`	`{`
`20`		`- "id": "drafts-components-datatable--with-action"`
	`20`	`+ "id": "components-datatable-features--with-action"`
	`21`	`+ },`
	`22`	`+ {`
	`23`	`+ "id": "components-datatable-features--with-custom-heading"`
`21`	`24`	`}`
`22`	`25`	`],`
`23`	`26`	`"props": [`
`@@ -73,7 +76,7 @@`
`73`	`76`	`]`
`74`	`77`	`},`
`75`	`78`	`{`
`76`		`- "name": "TableHead",`
	`79`	`+ "name": "Table.Head",`
`77`	`80`	`"props": [`
`78`	`81`	`{`
`79`	`82`	`"name": "children",`
`@@ -82,7 +85,7 @@`
`82`	`85`	`]`
`83`	`86`	`},`
`84`	`87`	`{`
`85`		`- "name": "TableBody",`
	`88`	`+ "name": "Table.Body",`
`86`	`89`	`"props": [`
`87`	`90`	`{`
`88`	`91`	`"name": "children",`
`@@ -91,7 +94,7 @@`
`91`	`94`	`]`
`92`	`95`	`},`
`93`	`96`	`{`
`94`		`- "name": "TableRow",`
	`97`	`+ "name": "Table.Row",`
`95`	`98`	`"props": [`
`96`	`99`	`{`
`97`	`100`	`"name": "children",`
`@@ -100,7 +103,7 @@`
`100`	`103`	`]`
`101`	`104`	`},`
`102`	`105`	`{`
`103`		`- "name": "TableHeader",`
	`106`	`+ "name": "Table.Header",`
`104`	`107`	`"props": [`
`105`	`108`	`{`
`106`	`109`	`"name": "children",`
`@@ -109,7 +112,7 @@`
`109`	`112`	`]`
`110`	`113`	`},`
`111`	`114`	`{`
`112`		`- "name": "TableCell",`
	`115`	`+ "name": "Table.Cell",`
`113`	`116`	`"props": [`
`114`	`117`	`{`
`115`	`118`	`"name": "children",`
`@@ -123,7 +126,7 @@`
`123`	`126`	`]`
`124`	`127`	`},`
`125`	`128`	`{`
`126`		`- "name": "TableContainer",`
	`129`	`+ "name": "Table.Container",`
`127`	`130`	`"props": [`
`128`	`131`	`{`
`129`	`132`	`"name": "children",`
`@@ -132,7 +135,7 @@`
`132`	`135`	`]`
`133`	`136`	`},`
`134`	`137`	`{`
`135`		`- "name": "TableTitle",`
	`138`	`+ "name": "Table.Title",`
`136`	`139`	`"props": [`
`137`	`140`	`{`
`138`	`141`	`"name": "children",`
`@@ -146,7 +149,7 @@`
`146`	`149`	`]`
`147`	`150`	`},`
`148`	`151`	`{`
`149`		`- "name": "TableSubtitle",`
	`152`	`+ "name": "Table.Subtitle",`
`150`	`153`	`"props": [`
`151`	`154`	`{`
`152`	`155`	`"name": "children",`