DataTable

DataTable is a 2-dimensional data structure where each row is an item, and each column is a data point about the item.

Page navigation navigation

React

readyReviewed for a11y

Storybook|Source

Figma

View in Figma|

React examples

Default

Repositories

Repository	Type	Updated	Dependabot	Code scanning
codeql-dca-worker	Internal	Apr 3, 2025	Alerts	Report secrets
aegir	Public	Apr 3, 2025	Alerts	Report secrets
strapi	Public	Apr 3, 2025
codeql-ci-nightlies	Public	Apr 3, 2025	Alerts
dependabot-updates	Public	Apr 2, 2025
tsx-create-react-app	Public	Mar 27, 2025
bootstrap	Public	Mar 6, 2025	Alerts
docker-templates	Public	Jan 9, 2025	Alerts

import React from 'react'
import {RelativeTime} from '@primer/react'
import {Table, DataTable} from '@primer/react/experimental'


export default function Default() {
  return (
    <Table.Container>
      <Table.Title as="h2" id="repositories-default">
        Repositories
      </Table.Title>
      <DataTable
        aria-labelledby="repositories-default"
        data={data}
        columns={[
          {
            header: 'Repository',
            field: 'name',
            rowHeader: true,
          },
          {
            header: 'Type',
            field: 'type',
          },
          {
            header: 'Updated',
            field: 'updatedAt',
            renderCell: row => {
              return <RelativeTime date={new Date(row.updatedAt)} />
            },
          },
          {
            header: 'Dependabot',
            field: 'securityFeatures.dependabot',
          },
          {
            header: 'Code scanning',
            field: 'securityFeatures.codeScanning',
          },
        ]}
      />
    </Table.Container>
  )
}


const now = Date.now()
const Second = 1000
const Minute = 60 * Second
const Hour = 60 * Minute
const Day = 24 * Hour
const Week = 7 * Day
const Month = 4 * Week


const data: Array<{
  id: number
  name: string
  type: 'Public' | 'Internal'
  updatedAt: number
  securityFeatures: {
    dependabot: string
    codeScanning: string
  }
}> = [
  {
    id: 1,
    name: 'codeql-dca-worker',
    type: 'Internal',
    updatedAt: now,
    securityFeatures: {
      dependabot: 'Alerts',
      codeScanning: 'Report secrets',
    },
  },
  {
    id: 2,
    name: 'aegir',
    type: 'Public',
    updatedAt: now - 5 * Minute,
    securityFeatures: {
      dependabot: 'Alerts',
      codeScanning: 'Report secrets',
    },
  },
  {
    id: 3,
    name: 'strapi',
    type: 'Public',
    updatedAt: now - 1 * Hour,
    securityFeatures: {
      dependabot: '',
      codeScanning: '',
    },
  },
  {
    id: 4,
    name: 'codeql-ci-nightlies',
    type: 'Public',
    updatedAt: now - 6 * Hour,
    securityFeatures: {
      dependabot: 'Alerts',
      codeScanning: '',
    },
  },
  {
    id: 5,
    name: 'dependabot-updates',
    type: 'Public',
    updatedAt: now - 1 * Day,
    securityFeatures: {
      dependabot: '',
      codeScanning: '',
    },
  },
  {
    id: 6,
    name: 'tsx-create-react-app',
    type: 'Public',
    updatedAt: now - 1 * Week,
    securityFeatures: {
      dependabot: '',
      codeScanning: '',
    },
  },
  {
    id: 7,
    name: 'bootstrap',
    type: 'Public',
    updatedAt: now - 1 * Month,
    securityFeatures: {dependabot: 'Alerts', codeScanning: ''},
  },
  {
    id: 8,
    name: 'docker-templates',
    type: 'Public',
    updatedAt: now - 3 * Month,
    securityFeatures: {
      dependabot: 'Alerts',
      codeScanning: '',
    },
  },
]

import React from 'react'
import {RelativeTime} from '@primer/react'
import {Table, DataTable} from '@primer/react/experimental'

export default function Default() {
  return (
    <Table.Container>
      <Table.Title as="h2" id="repositories-default">
        Repositories
      </Table.Title>
      <DataTable
        aria-labelledby="repositories-default"
        data={data}
        columns={[
          {
            header: 'Repository',
            field: 'name',
            rowHeader: true,
          },
          {
            header: 'Type',
            field: 'type',
          },
          {
            header: 'Updated',
            field: 'updatedAt',
            renderCell: row => {
              return <RelativeTime date={new Date(row.updatedAt)} />
            },
          },
          {
            header: 'Dependabot',
            field: 'securityFeatures.dependabot',
          },
          {
            header: 'Code scanning',
            field: 'securityFeatures.codeScanning',
          },
        ]}
      />
    </Table.Container>
  )
}

const now = Date.now()
const Second = 1000
const Minute = 60 * Second
const Hour = 60 * Minute
const Day = 24 * Hour
const Week = 7 * Day
const Month = 4 * Week

const data: Array<{
  id: number
  name: string
  type: 'Public' | 'Internal'
  updatedAt: number
  securityFeatures: {
    dependabot: string
    codeScanning: string
  }
}> = [
  {
    id: 1,
    name: 'codeql-dca-worker',
    type: 'Internal',
    updatedAt: now,
    securityFeatures: {
      dependabot: 'Alerts',
      codeScanning: 'Report secrets',
    },
  },
  {
    id: 2,
    name: 'aegir',
    type: 'Public',
    updatedAt: now - 5 * Minute,
    securityFeatures: {
      dependabot: 'Alerts',
      codeScanning: 'Report secrets',
    },
  },
  {
    id: 3,
    name: 'strapi',
    type: 'Public',
    updatedAt: now - 1 * Hour,
    securityFeatures: {
      dependabot: '',
      codeScanning: '',
    },
  },
  {
    id: 4,
    name: 'codeql-ci-nightlies',
    type: 'Public',
    updatedAt: now - 6 * Hour,
    securityFeatures: {
      dependabot: 'Alerts',
      codeScanning: '',
    },
  },
  {
    id: 5,
    name: 'dependabot-updates',
    type: 'Public',
    updatedAt: now - 1 * Day,
    securityFeatures: {
      dependabot: '',
      codeScanning: '',
    },
  },
  {
    id: 6,
    name: 'tsx-create-react-app',
    type: 'Public',
    updatedAt: now - 1 * Week,
    securityFeatures: {
      dependabot: '',
      codeScanning: '',
    },
  },
  {
    id: 7,
    name: 'bootstrap',
    type: 'Public',
    updatedAt: now - 1 * Month,
    securityFeatures: {dependabot: 'Alerts', codeScanning: ''},
  },
  {
    id: 8,
    name: 'docker-templates',
    type: 'Public',
    updatedAt: now - 3 * Month,
    securityFeatures: {
      dependabot: 'Alerts',
      codeScanning: '',
    },
  },
]

With custom column widths

Column sizing guidelines

Repositories

grow w/ 200px max	growCollapse w/ 100px min	auto	200px	undefined (defaults to grow)
codeql-dca-worker	Internal	Apr 3, 2025	Alerts	Report secrets
aegir	Public	Apr 3, 2025	Alerts	Report secrets
strapi	Public	Apr 3, 2025
codeql-ci-nightlies	Public	Apr 3, 2025	Alerts
dependabot-updates	Public	Apr 2, 2025
tsx-create-react-app	Public	Mar 27, 2025
bootstrap	Public	Mar 6, 2025	Alerts
docker-templates	Public	Jan 9, 2025	Alerts

import React from 'react'
import {RelativeTime} from '@primer/react'
import {Table, DataTable} from '@primer/react/experimental'


export default function ColumnWidths() {
  return (
    <Table.Container>
      <Table.Title as="h2" id="repositories-colWidths">
        Repositories
      </Table.Title>
      <DataTable
        aria-labelledby="repositories-colWidths"
        data={data}
        columns={[
          {
            header: 'grow w/ 200px max',
            field: 'name',
            rowHeader: true,
            width: 'grow',
            maxWidth: '200px',
          },
          {
            header: 'growCollapse w/ 100px min',
            field: 'type',
            width: 'growCollapse',
            minWidth: '100px',
          },
          {
            header: 'auto',
            field: 'updatedAt',
            renderCell: row => {
              return <RelativeTime date={new Date(row.updatedAt)} />
            },
            width: 'auto',
          },
          {
            header: '200px',
            field: 'securityFeatures.dependabot',
            width: '200px',
          },
          {
            header: 'undefined (defaults to grow)',
            field: 'securityFeatures.codeScanning',
          },
        ]}
      />
    </Table.Container>
  )
}


const now = Date.now()
const Second = 1000
const Minute = 60 * Second
const Hour = 60 * Minute
const Day = 24 * Hour
const Week = 7 * Day
const Month = 4 * Week


const data: Array<{
  id: number
  name: string
  type: 'Public' | 'Internal'
  updatedAt: number
  securityFeatures: {
    dependabot: string
    codeScanning: string
  }
}> = [
  {
    id: 1,
    name: 'codeql-dca-worker',
    type: 'Internal',
    updatedAt: now,
    securityFeatures: {
      dependabot: 'Alerts',
      codeScanning: 'Report secrets',
    },
  },
  {
    id: 2,
    name: 'aegir',
    type: 'Public',
    updatedAt: now - 5 * Minute,
    securityFeatures: {
      dependabot: 'Alerts',
      codeScanning: 'Report secrets',
    },
  },
  {
    id: 3,
    name: 'strapi',
    type: 'Public',
    updatedAt: now - 1 * Hour,
    securityFeatures: {
      dependabot: '',
      codeScanning: '',
    },
  },
  {
    id: 4,
    name: 'codeql-ci-nightlies',
    type: 'Public',
    updatedAt: now - 6 * Hour,
    securityFeatures: {
      dependabot: 'Alerts',
      codeScanning: '',
    },
  },
  {
    id: 5,
    name: 'dependabot-updates',
    type: 'Public',
    updatedAt: now - 1 * Day,
    securityFeatures: {
      dependabot: '',
      codeScanning: '',
    },
  },
  {
    id: 6,
    name: 'tsx-create-react-app',
    type: 'Public',
    updatedAt: now - 1 * Week,
    securityFeatures: {
      dependabot: '',
      codeScanning: '',
    },
  },
  {
    id: 7,
    name: 'bootstrap',
    type: 'Public',
    updatedAt: now - 1 * Month,
    securityFeatures: {dependabot: 'Alerts', codeScanning: ''},
  },
  {
    id: 8,
    name: 'docker-templates',
    type: 'Public',
    updatedAt: now - 3 * Month,
    securityFeatures: {
      dependabot: 'Alerts',
      codeScanning: '',
    },
  },
]

import React from 'react'
import {RelativeTime} from '@primer/react'
import {Table, DataTable} from '@primer/react/experimental'

export default function ColumnWidths() {
  return (
    <Table.Container>
      <Table.Title as="h2" id="repositories-colWidths">
        Repositories
      </Table.Title>
      <DataTable
        aria-labelledby="repositories-colWidths"
        data={data}
        columns={[
          {
            header: 'grow w/ 200px max',
            field: 'name',
            rowHeader: true,
            width: 'grow',
            maxWidth: '200px',
          },
          {
            header: 'growCollapse w/ 100px min',
            field: 'type',
            width: 'growCollapse',
            minWidth: '100px',
          },
          {
            header: 'auto',
            field: 'updatedAt',
            renderCell: row => {
              return <RelativeTime date={new Date(row.updatedAt)} />
            },
            width: 'auto',
          },
          {
            header: '200px',
            field: 'securityFeatures.dependabot',
            width: '200px',
          },
          {
            header: 'undefined (defaults to grow)',
            field: 'securityFeatures.codeScanning',
          },
        ]}
      />
    </Table.Container>
  )
}

const now = Date.now()
const Second = 1000
const Minute = 60 * Second
const Hour = 60 * Minute
const Day = 24 * Hour
const Week = 7 * Day
const Month = 4 * Week

const data: Array<{
  id: number
  name: string
  type: 'Public' | 'Internal'
  updatedAt: number
  securityFeatures: {
    dependabot: string
    codeScanning: string
  }
}> = [
  {
    id: 1,
    name: 'codeql-dca-worker',
    type: 'Internal',
    updatedAt: now,
    securityFeatures: {
      dependabot: 'Alerts',
      codeScanning: 'Report secrets',
    },
  },
  {
    id: 2,
    name: 'aegir',
    type: 'Public',
    updatedAt: now - 5 * Minute,
    securityFeatures: {
      dependabot: 'Alerts',
      codeScanning: 'Report secrets',
    },
  },
  {
    id: 3,
    name: 'strapi',
    type: 'Public',
    updatedAt: now - 1 * Hour,
    securityFeatures: {
      dependabot: '',
      codeScanning: '',
    },
  },
  {
    id: 4,
    name: 'codeql-ci-nightlies',
    type: 'Public',
    updatedAt: now - 6 * Hour,
    securityFeatures: {
      dependabot: 'Alerts',
      codeScanning: '',
    },
  },
  {
    id: 5,
    name: 'dependabot-updates',
    type: 'Public',
    updatedAt: now - 1 * Day,
    securityFeatures: {
      dependabot: '',
      codeScanning: '',
    },
  },
  {
    id: 6,
    name: 'tsx-create-react-app',
    type: 'Public',
    updatedAt: now - 1 * Week,
    securityFeatures: {
      dependabot: '',
      codeScanning: '',
    },
  },
  {
    id: 7,
    name: 'bootstrap',
    type: 'Public',
    updatedAt: now - 1 * Month,
    securityFeatures: {dependabot: 'Alerts', codeScanning: ''},
  },
  {
    id: 8,
    name: 'docker-templates',
    type: 'Public',
    updatedAt: now - 3 * Month,
    securityFeatures: {
      dependabot: 'Alerts',
      codeScanning: '',
    },
  },
]

Columns text alignment

Left (default): Follows natural reading direction in right-to-left writing systems.
Right-aligned columns are used for numbers and other data that is best represented right-aligned.

In this example, there is a "Pull requests" column that is right-aligned to make it easier to visually scan and compare the numbers.

Repositories

Repository	Pull requests	Type	Updated
codeql-dca-worker	12	Internal	Apr 3, 2025
aegir	34	Public	Apr 3, 2025
strapi	8	Public	Apr 3, 2025
codeql-ci-nightlies	1	Public	Apr 3, 2025
dependabot-updates	57	Public	Apr 2, 2025
tsx-create-react-app	35	Public	Mar 27, 2025
bootstrap	42	Public	Mar 6, 2025
docker-templates	3	Public	Jan 9, 2025

import React from 'react'
import {RelativeTime} from '@primer/react'
import {Table, DataTable} from '@primer/react/experimental'


export default function RightAlignedCol() {
  return (
    <Table.Container>
      <Table.Title as="h2" id="repositories-rightAlignedCol">
        Repositories
      </Table.Title>
      <DataTable
        aria-labelledby="repositories-rightAlignedCol"
        data={data}
        columns={[
          {
            header: 'Repository',
            field: 'name',
            rowHeader: true,
          },
          {
            header: 'Pull requests',
            field: 'pullRequests',
            align: 'end',
          },
          {
            header: 'Type',
            field: 'type',
          },
          {
            header: 'Updated',
            field: 'updatedAt',
            renderCell: row => {
              return <RelativeTime date={new Date(row.updatedAt)} />
            },
          },
        ]}
      />
    </Table.Container>
  )
}


const now = Date.now()
const Second = 1000
const Minute = 60 * Second
const Hour = 60 * Minute
const Day = 24 * Hour
const Week = 7 * Day
const Month = 4 * Week


const data: Array<{
  id: number
  name: string
  pullRequests: number
  type: 'Public' | 'Internal'
  updatedAt: number
}> = [
  {
    id: 1,
    name: 'codeql-dca-worker',
    pullRequests: 12,
    type: 'Internal',
    updatedAt: now,
  },
  {
    id: 2,
    name: 'aegir',
    pullRequests: 34,
    type: 'Public',
    updatedAt: now - 5 * Minute,
  },
  {
    id: 3,
    name: 'strapi',
    pullRequests: 8,
    type: 'Public',
    updatedAt: now - 1 * Hour,
  },
  {
    id: 4,
    name: 'codeql-ci-nightlies',
    pullRequests: 1,
    type: 'Public',
    updatedAt: now - 6 * Hour,
  },
  {
    id: 5,
    name: 'dependabot-updates',
    pullRequests: 57,
    type: 'Public',
    updatedAt: now - 1 * Day,
  },
  {
    id: 6,
    name: 'tsx-create-react-app',
    pullRequests: 35,
    type: 'Public',
    updatedAt: now - 1 * Week,
  },
  {
    id: 7,
    name: 'bootstrap',
    pullRequests: 42,
    type: 'Public',
    updatedAt: now - 1 * Month,
  },
  {
    id: 8,
    name: 'docker-templates',
    pullRequests: 3,
    type: 'Public',
    updatedAt: now - 3 * Month,
  },
]

import React from 'react'
import {RelativeTime} from '@primer/react'
import {Table, DataTable} from '@primer/react/experimental'

export default function RightAlignedCol() {
  return (
    <Table.Container>
      <Table.Title as="h2" id="repositories-rightAlignedCol">
        Repositories
      </Table.Title>
      <DataTable
        aria-labelledby="repositories-rightAlignedCol"
        data={data}
        columns={[
          {
            header: 'Repository',
            field: 'name',
            rowHeader: true,
          },
          {
            header: 'Pull requests',
            field: 'pullRequests',
            align: 'end',
          },
          {
            header: 'Type',
            field: 'type',
          },
          {
            header: 'Updated',
            field: 'updatedAt',
            renderCell: row => {
              return <RelativeTime date={new Date(row.updatedAt)} />
            },
          },
        ]}
      />
    </Table.Container>
  )
}

const now = Date.now()
const Second = 1000
const Minute = 60 * Second
const Hour = 60 * Minute
const Day = 24 * Hour
const Week = 7 * Day
const Month = 4 * Week

const data: Array<{
  id: number
  name: string
  pullRequests: number
  type: 'Public' | 'Internal'
  updatedAt: number
}> = [
  {
    id: 1,
    name: 'codeql-dca-worker',
    pullRequests: 12,
    type: 'Internal',
    updatedAt: now,
  },
  {
    id: 2,
    name: 'aegir',
    pullRequests: 34,
    type: 'Public',
    updatedAt: now - 5 * Minute,
  },
  {
    id: 3,
    name: 'strapi',
    pullRequests: 8,
    type: 'Public',
    updatedAt: now - 1 * Hour,
  },
  {
    id: 4,
    name: 'codeql-ci-nightlies',
    pullRequests: 1,
    type: 'Public',
    updatedAt: now - 6 * Hour,
  },
  {
    id: 5,
    name: 'dependabot-updates',
    pullRequests: 57,
    type: 'Public',
    updatedAt: now - 1 * Day,
  },
  {
    id: 6,
    name: 'tsx-create-react-app',
    pullRequests: 35,
    type: 'Public',
    updatedAt: now - 1 * Week,
  },
  {
    id: 7,
    name: 'bootstrap',
    pullRequests: 42,
    type: 'Public',
    updatedAt: now - 1 * Month,
  },
  {
    id: 8,
    name: 'docker-templates',
    pullRequests: 3,
    type: 'Public',
    updatedAt: now - 3 * Month,
  },
]

Table cell density

Condensed: Maximizes data visibility in a small area.
Normal (default): Balances data display with whitespace for clarity.
Spacious: Enhances readability for dense or complex content.

This example uses 'spacious' table cell padding.

Repositories

Repository	Type	Updated	Dependabot	Code scanning
codeql-dca-worker	Internal	Apr 3, 2025	Alerts	Report secrets
aegir	Public	Apr 3, 2025	Alerts	Report secrets
strapi	Public	Apr 3, 2025
codeql-ci-nightlies	Public	Apr 3, 2025	Alerts
dependabot-updates	Public	Apr 2, 2025
tsx-create-react-app	Public	Mar 27, 2025
bootstrap	Public	Mar 6, 2025	Alerts
docker-templates	Public	Jan 9, 2025	Alerts

import React from 'react'
import {RelativeTime} from '@primer/react'
import {Table, DataTable} from '@primer/react/experimental'


export default function Density() {
  return (
    <Table.Container>
      <Table.Title as="h2" id="repositories-default">
        Repositories
      </Table.Title>
      <DataTable
        aria-labelledby="repositories-default"
        cellPadding="spacious"
        data={data}
        columns={[
          {
            header: 'Repository',
            field: 'name',
            rowHeader: true,
          },
          {
            header: 'Type',
            field: 'type',
          },
          {
            header: 'Updated',
            field: 'updatedAt',
            renderCell: row => {
              return <RelativeTime date={new Date(row.updatedAt)} />
            },
          },
          {
            header: 'Dependabot',
            field: 'securityFeatures.dependabot',
          },
          {
            header: 'Code scanning',
            field: 'securityFeatures.codeScanning',
          },
        ]}
      />
    </Table.Container>
  )
}


const now = Date.now()
const Second = 1000
const Minute = 60 * Second
const Hour = 60 * Minute
const Day = 24 * Hour
const Week = 7 * Day
const Month = 4 * Week


const data: Array<{
  id: number
  name: string
  type: 'Public' | 'Internal'
  updatedAt: number
  securityFeatures: {
    dependabot: string
    codeScanning: string
  }
}> = [
  {
    id: 1,
    name: 'codeql-dca-worker',
    type: 'Internal',
    updatedAt: now,
    securityFeatures: {
      dependabot: 'Alerts',
      codeScanning: 'Report secrets',
    },
  },
  {
    id: 2,
    name: 'aegir',
    type: 'Public',
    updatedAt: now - 5 * Minute,
    securityFeatures: {
      dependabot: 'Alerts',
      codeScanning: 'Report secrets',
    },
  },
  {
    id: 3,
    name: 'strapi',
    type: 'Public',
    updatedAt: now - 1 * Hour,
    securityFeatures: {
      dependabot: '',
      codeScanning: '',
    },
  },
  {
    id: 4,
    name: 'codeql-ci-nightlies',
    type: 'Public',
    updatedAt: now - 6 * Hour,
    securityFeatures: {
      dependabot: 'Alerts',
      codeScanning: '',
    },
  },
  {
    id: 5,
    name: 'dependabot-updates',
    type: 'Public',
    updatedAt: now - 1 * Day,
    securityFeatures: {
      dependabot: '',
      codeScanning: '',
    },
  },
  {
    id: 6,
    name: 'tsx-create-react-app',
    type: 'Public',
    updatedAt: now - 1 * Week,
    securityFeatures: {
      dependabot: '',
      codeScanning: '',
    },
  },
  {
    id: 7,
    name: 'bootstrap',
    type: 'Public',
    updatedAt: now - 1 * Month,
    securityFeatures: {dependabot: 'Alerts', codeScanning: ''},
  },
  {
    id: 8,
    name: 'docker-templates',
    type: 'Public',
    updatedAt: now - 3 * Month,
    securityFeatures: {
      dependabot: 'Alerts',
      codeScanning: '',
    },
  },
]

import React from 'react'
import {RelativeTime} from '@primer/react'
import {Table, DataTable} from '@primer/react/experimental'

export default function Density() {
  return (
    <Table.Container>
      <Table.Title as="h2" id="repositories-default">
        Repositories
      </Table.Title>
      <DataTable
        aria-labelledby="repositories-default"
        cellPadding="spacious"
        data={data}
        columns={[
          {
            header: 'Repository',
            field: 'name',
            rowHeader: true,
          },
          {
            header: 'Type',
            field: 'type',
          },
          {
            header: 'Updated',
            field: 'updatedAt',
            renderCell: row => {
              return <RelativeTime date={new Date(row.updatedAt)} />
            },
          },
          {
            header: 'Dependabot',
            field: 'securityFeatures.dependabot',
          },
          {
            header: 'Code scanning',
            field: 'securityFeatures.codeScanning',
          },
        ]}
      />
    </Table.Container>
  )
}

const now = Date.now()
const Second = 1000
const Minute = 60 * Second
const Hour = 60 * Minute
const Day = 24 * Hour
const Week = 7 * Day
const Month = 4 * Week

const data: Array<{
  id: number
  name: string
  type: 'Public' | 'Internal'
  updatedAt: number
  securityFeatures: {
    dependabot: string
    codeScanning: string
  }
}> = [
  {
    id: 1,
    name: 'codeql-dca-worker',
    type: 'Internal',
    updatedAt: now,
    securityFeatures: {
      dependabot: 'Alerts',
      codeScanning: 'Report secrets',
    },
  },
  {
    id: 2,
    name: 'aegir',
    type: 'Public',
    updatedAt: now - 5 * Minute,
    securityFeatures: {
      dependabot: 'Alerts',
      codeScanning: 'Report secrets',
    },
  },
  {
    id: 3,
    name: 'strapi',
    type: 'Public',
    updatedAt: now - 1 * Hour,
    securityFeatures: {
      dependabot: '',
      codeScanning: '',
    },
  },
  {
    id: 4,
    name: 'codeql-ci-nightlies',
    type: 'Public',
    updatedAt: now - 6 * Hour,
    securityFeatures: {
      dependabot: 'Alerts',
      codeScanning: '',
    },
  },
  {
    id: 5,
    name: 'dependabot-updates',
    type: 'Public',
    updatedAt: now - 1 * Day,
    securityFeatures: {
      dependabot: '',
      codeScanning: '',
    },
  },
  {
    id: 6,
    name: 'tsx-create-react-app',
    type: 'Public',
    updatedAt: now - 1 * Week,
    securityFeatures: {
      dependabot: '',
      codeScanning: '',
    },
  },
  {
    id: 7,
    name: 'bootstrap',
    type: 'Public',
    updatedAt: now - 1 * Month,
    securityFeatures: {dependabot: 'Alerts', codeScanning: ''},
  },
  {
    id: 8,
    name: 'docker-templates',
    type: 'Public',
    updatedAt: now - 3 * Month,
    securityFeatures: {
      dependabot: 'Alerts',
      codeScanning: '',
    },
  },
]

Sort rows by column data

If a table is sortable, one column must be sorted by default. Clicking a sorted column toggles between ascending and descending; unsorted columns sort in ascending order on first click.

In this example, the rows are sortable by "Repository" and "Updated" column data.

Repositories

	Type		Dependabot	Code scanning
codeql-dca-worker	Internal	Apr 3, 2025	Alerts	Report secrets
aegir	Public	Apr 3, 2025	Alerts	Report secrets
strapi	Public	Apr 3, 2025
codeql-ci-nightlies	Public	Apr 3, 2025	Alerts
dependabot-updates	Public	Apr 2, 2025
tsx-create-react-app	Public	Mar 27, 2025
bootstrap	Public	Mar 6, 2025	Alerts
docker-templates	Public	Jan 9, 2025	Alerts

import React from 'react'
import {RelativeTime} from '@primer/react'
import {Table, DataTable} from '@primer/react/experimental'


export default function Sort() {
  return (
    <Table.Container>
      <Table.Title as="h2" id="repositories-sort">
        Repositories
      </Table.Title>
      <DataTable
        aria-labelledby="repositories-sort"
        data={Array.from(data).sort((a, b) => {
          return b.updatedAt - a.updatedAt
        })}
        columns={[
          {
            header: 'Repository',
            field: 'name',
            rowHeader: true,
            sortBy: 'alphanumeric',
          },
          {
            header: 'Type',
            field: 'type',
          },
          {
            header: 'Updated',
            field: 'updatedAt',
            renderCell: row => {
              return <RelativeTime date={new Date(row.updatedAt)} />
            },
            sortBy: 'datetime',
          },
          {
            header: 'Dependabot',
            field: 'securityFeatures.dependabot',
          },
          {
            header: 'Code scanning',
            field: 'securityFeatures.codeScanning',
          },
        ]}
        initialSortColumn="updatedAt"
        initialSortDirection="DESC"
      />
    </Table.Container>
  )
}


const now = Date.now()
const Second = 1000
const Minute = 60 * Second
const Hour = 60 * Minute
const Day = 24 * Hour
const Week = 7 * Day
const Month = 4 * Week


const data: Array<{
  id: number
  name: string
  type: 'Public' | 'Internal'
  updatedAt: number
  securityFeatures: {
    dependabot: string
    codeScanning: string
  }
}> = [
  {
    id: 1,
    name: 'codeql-dca-worker',
    type: 'Internal',
    updatedAt: now,
    securityFeatures: {
      dependabot: 'Alerts',
      codeScanning: 'Report secrets',
    },
  },
  {
    id: 2,
    name: 'aegir',
    type: 'Public',
    updatedAt: now - 5 * Minute,
    securityFeatures: {
      dependabot: 'Alerts',
      codeScanning: 'Report secrets',
    },
  },
  {
    id: 3,
    name: 'strapi',
    type: 'Public',
    updatedAt: now - 1 * Hour,
    securityFeatures: {
      dependabot: '',
      codeScanning: '',
    },
  },
  {
    id: 4,
    name: 'codeql-ci-nightlies',
    type: 'Public',
    updatedAt: now - 6 * Hour,
    securityFeatures: {
      dependabot: 'Alerts',
      codeScanning: '',
    },
  },
  {
    id: 5,
    name: 'dependabot-updates',
    type: 'Public',
    updatedAt: now - 1 * Day,
    securityFeatures: {
      dependabot: '',
      codeScanning: '',
    },
  },
  {
    id: 6,
    name: 'tsx-create-react-app',
    type: 'Public',
    updatedAt: now - 1 * Week,
    securityFeatures: {
      dependabot: '',
      codeScanning: '',
    },
  },
  {
    id: 7,
    name: 'bootstrap',
    type: 'Public',
    updatedAt: now - 1 * Month,
    securityFeatures: {dependabot: 'Alerts', codeScanning: ''},
  },
  {
    id: 8,
    name: 'docker-templates',
    type: 'Public',
    updatedAt: now - 3 * Month,
    securityFeatures: {
      dependabot: 'Alerts',
      codeScanning: '',
    },
  },
]

import React from 'react'
import {RelativeTime} from '@primer/react'
import {Table, DataTable} from '@primer/react/experimental'

export default function Sort() {
  return (
    <Table.Container>
      <Table.Title as="h2" id="repositories-sort">
        Repositories
      </Table.Title>
      <DataTable
        aria-labelledby="repositories-sort"
        data={Array.from(data).sort((a, b) => {
          return b.updatedAt - a.updatedAt
        })}
        columns={[
          {
            header: 'Repository',
            field: 'name',
            rowHeader: true,
            sortBy: 'alphanumeric',
          },
          {
            header: 'Type',
            field: 'type',
          },
          {
            header: 'Updated',
            field: 'updatedAt',
            renderCell: row => {
              return <RelativeTime date={new Date(row.updatedAt)} />
            },
            sortBy: 'datetime',
          },
          {
            header: 'Dependabot',
            field: 'securityFeatures.dependabot',
          },
          {
            header: 'Code scanning',
            field: 'securityFeatures.codeScanning',
          },
        ]}
        initialSortColumn="updatedAt"
        initialSortDirection="DESC"
      />
    </Table.Container>
  )
}

const now = Date.now()
const Second = 1000
const Minute = 60 * Second
const Hour = 60 * Minute
const Day = 24 * Hour
const Week = 7 * Day
const Month = 4 * Week

const data: Array<{
  id: number
  name: string
  type: 'Public' | 'Internal'
  updatedAt: number
  securityFeatures: {
    dependabot: string
    codeScanning: string
  }
}> = [
  {
    id: 1,
    name: 'codeql-dca-worker',
    type: 'Internal',
    updatedAt: now,
    securityFeatures: {
      dependabot: 'Alerts',
      codeScanning: 'Report secrets',
    },
  },
  {
    id: 2,
    name: 'aegir',
    type: 'Public',
    updatedAt: now - 5 * Minute,
    securityFeatures: {
      dependabot: 'Alerts',
      codeScanning: 'Report secrets',
    },
  },
  {
    id: 3,
    name: 'strapi',
    type: 'Public',
    updatedAt: now - 1 * Hour,
    securityFeatures: {
      dependabot: '',
      codeScanning: '',
    },
  },
  {
    id: 4,
    name: 'codeql-ci-nightlies',
    type: 'Public',
    updatedAt: now - 6 * Hour,
    securityFeatures: {
      dependabot: 'Alerts',
      codeScanning: '',
    },
  },
  {
    id: 5,
    name: 'dependabot-updates',
    type: 'Public',
    updatedAt: now - 1 * Day,
    securityFeatures: {
      dependabot: '',
      codeScanning: '',
    },
  },
  {
    id: 6,
    name: 'tsx-create-react-app',
    type: 'Public',
    updatedAt: now - 1 * Week,
    securityFeatures: {
      dependabot: '',
      codeScanning: '',
    },
  },
  {
    id: 7,
    name: 'bootstrap',
    type: 'Public',
    updatedAt: now - 1 * Month,
    securityFeatures: {dependabot: 'Alerts', codeScanning: ''},
  },
  {
    id: 8,
    name: 'docker-templates',
    type: 'Public',
    updatedAt: now - 3 * Month,
    securityFeatures: {
      dependabot: 'Alerts',
      codeScanning: '',
    },
  },
]

With title and subtitle

Table header guidelines

Repositories

A subtitle could appear here to give extra context to the data.

Repository	Type	Updated	Dependabot	Code scanning
codeql-dca-worker	Internal	Apr 3, 2025	Alerts	Report secrets
aegir	Public	Apr 3, 2025	Alerts	Report secrets
strapi	Public	Apr 3, 2025
codeql-ci-nightlies	Public	Apr 3, 2025	Alerts
dependabot-updates	Public	Apr 2, 2025
tsx-create-react-app	Public	Mar 27, 2025
bootstrap	Public	Mar 6, 2025	Alerts
docker-templates	Public	Jan 9, 2025	Alerts

import React from 'react'
import {RelativeTime} from '@primer/react'
import {Table, DataTable} from '@primer/react/experimental'


export default function TitleSubtitle() {
  return (
    <Table.Container>
      <Table.Title as="h2" id="repositories-titleSubtitle">
        Repositories
      </Table.Title>
      <Table.Subtitle as="p" id="repositories-subtitle-titleSubtitle">
        A subtitle could appear here to give extra context to the data.
      </Table.Subtitle>
      <DataTable
        aria-labelledby="repositories-titleSubtitle"
        aria-describedby="repositories-subtitle-titleSubtitle"
        data={data}
        columns={[
          {
            header: 'Repository',
            field: 'name',
            rowHeader: true,
          },
          {
            header: 'Type',
            field: 'type',
          },
          {
            header: 'Updated',
            field: 'updatedAt',
            renderCell: row => {
              return <RelativeTime date={new Date(row.updatedAt)} />
            },
          },
          {
            header: 'Dependabot',
            field: 'securityFeatures.dependabot',
          },
          {
            header: 'Code scanning',
            field: 'securityFeatures.codeScanning',
          },
        ]}
      />
    </Table.Container>
  )
}


const now = Date.now()
const Second = 1000
const Minute = 60 * Second
const Hour = 60 * Minute
const Day = 24 * Hour
const Week = 7 * Day
const Month = 4 * Week


const data: Array<{
  id: number
  name: string
  type: 'Public' | 'Internal'
  updatedAt: number
  securityFeatures: {
    dependabot: string
    codeScanning: string
  }
}> = [
  {
    id: 1,
    name: 'codeql-dca-worker',
    type: 'Internal',
    updatedAt: now,
    securityFeatures: {
      dependabot: 'Alerts',
      codeScanning: 'Report secrets',
    },
  },
  {
    id: 2,
    name: 'aegir',
    type: 'Public',
    updatedAt: now - 5 * Minute,
    securityFeatures: {
      dependabot: 'Alerts',
      codeScanning: 'Report secrets',
    },
  },
  {
    id: 3,
    name: 'strapi',
    type: 'Public',
    updatedAt: now - 1 * Hour,
    securityFeatures: {
      dependabot: '',
      codeScanning: '',
    },
  },
  {
    id: 4,
    name: 'codeql-ci-nightlies',
    type: 'Public',
    updatedAt: now - 6 * Hour,
    securityFeatures: {
      dependabot: 'Alerts',
      codeScanning: '',
    },
  },
  {
    id: 5,
    name: 'dependabot-updates',
    type: 'Public',
    updatedAt: now - 1 * Day,
    securityFeatures: {
      dependabot: '',
      codeScanning: '',
    },
  },
  {
    id: 6,
    name: 'tsx-create-react-app',
    type: 'Public',
    updatedAt: now - 1 * Week,
    securityFeatures: {
      dependabot: '',
      codeScanning: '',
    },
  },
  {
    id: 7,
    name: 'bootstrap',
    type: 'Public',
    updatedAt: now - 1 * Month,
    securityFeatures: {dependabot: 'Alerts', codeScanning: ''},
  },
  {
    id: 8,
    name: 'docker-templates',
    type: 'Public',
    updatedAt: now - 3 * Month,
    securityFeatures: {
      dependabot: 'Alerts',
      codeScanning: '',
    },
  },
]

import React from 'react'
import {RelativeTime} from '@primer/react'
import {Table, DataTable} from '@primer/react/experimental'

export default function TitleSubtitle() {
  return (
    <Table.Container>
      <Table.Title as="h2" id="repositories-titleSubtitle">
        Repositories
      </Table.Title>
      <Table.Subtitle as="p" id="repositories-subtitle-titleSubtitle">
        A subtitle could appear here to give extra context to the data.
      </Table.Subtitle>
      <DataTable
        aria-labelledby="repositories-titleSubtitle"
        aria-describedby="repositories-subtitle-titleSubtitle"
        data={data}
        columns={[
          {
            header: 'Repository',
            field: 'name',
            rowHeader: true,
          },
          {
            header: 'Type',
            field: 'type',
          },
          {
            header: 'Updated',
            field: 'updatedAt',
            renderCell: row => {
              return <RelativeTime date={new Date(row.updatedAt)} />
            },
          },
          {
            header: 'Dependabot',
            field: 'securityFeatures.dependabot',
          },
          {
            header: 'Code scanning',
            field: 'securityFeatures.codeScanning',
          },
        ]}
      />
    </Table.Container>
  )
}

const now = Date.now()
const Second = 1000
const Minute = 60 * Second
const Hour = 60 * Minute
const Day = 24 * Hour
const Week = 7 * Day
const Month = 4 * Week

const data: Array<{
  id: number
  name: string
  type: 'Public' | 'Internal'
  updatedAt: number
  securityFeatures: {
    dependabot: string
    codeScanning: string
  }
}> = [
  {
    id: 1,
    name: 'codeql-dca-worker',
    type: 'Internal',
    updatedAt: now,
    securityFeatures: {
      dependabot: 'Alerts',
      codeScanning: 'Report secrets',
    },
  },
  {
    id: 2,
    name: 'aegir',
    type: 'Public',
    updatedAt: now - 5 * Minute,
    securityFeatures: {
      dependabot: 'Alerts',
      codeScanning: 'Report secrets',
    },
  },
  {
    id: 3,
    name: 'strapi',
    type: 'Public',
    updatedAt: now - 1 * Hour,
    securityFeatures: {
      dependabot: '',
      codeScanning: '',
    },
  },
  {
    id: 4,
    name: 'codeql-ci-nightlies',
    type: 'Public',
    updatedAt: now - 6 * Hour,
    securityFeatures: {
      dependabot: 'Alerts',
      codeScanning: '',
    },
  },
  {
    id: 5,
    name: 'dependabot-updates',
    type: 'Public',
    updatedAt: now - 1 * Day,
    securityFeatures: {
      dependabot: '',
      codeScanning: '',
    },
  },
  {
    id: 6,
    name: 'tsx-create-react-app',
    type: 'Public',
    updatedAt: now - 1 * Week,
    securityFeatures: {
      dependabot: '',
      codeScanning: '',
    },
  },
  {
    id: 7,
    name: 'bootstrap',
    type: 'Public',
    updatedAt: now - 1 * Month,
    securityFeatures: {dependabot: 'Alerts', codeScanning: ''},
  },
  {
    id: 8,
    name: 'docker-templates',
    type: 'Public',
    updatedAt: now - 3 * Month,
    securityFeatures: {
      dependabot: 'Alerts',
      codeScanning: '',
    },
  },
]

With table action

Table header guidelines

Repositories

A subtitle could appear here to give extra context to the data.

Repository	Type	Updated	Dependabot	Code scanning
codeql-dca-worker	Internal	Apr 3, 2025	Alerts	Report secrets
aegir	Public	Apr 3, 2025	Alerts	Report secrets
strapi	Public	Apr 3, 2025
codeql-ci-nightlies	Public	Apr 3, 2025	Alerts
dependabot-updates	Public	Apr 2, 2025
tsx-create-react-app	Public	Mar 27, 2025
bootstrap	Public	Mar 6, 2025	Alerts
docker-templates	Public	Jan 9, 2025	Alerts

import React from 'react'
import {Button, RelativeTime} from '@primer/react'
import {Table, DataTable} from '@primer/react/experimental'


export default function HeaderAction() {
  return (
    <Table.Container>
      <Table.Title as="h2" id="repositories-headerAction">
        Repositories
      </Table.Title>
      <Table.Actions>
        <Button>Action</Button>
      </Table.Actions>
      <Table.Divider />
      <Table.Subtitle as="p" id="repositories-subtitle-headerAction">
        A subtitle could appear here to give extra context to the data.
      </Table.Subtitle>
      <DataTable
        aria-labelledby="repositories-default-headerAction"
        aria-describedby="repositories-subtitle-headerAction"
        data={data}
        columns={[
          {
            header: 'Repository',
            field: 'name',
            rowHeader: true,
          },
          {
            header: 'Type',
            field: 'type',
          },
          {
            header: 'Updated',
            field: 'updatedAt',
            renderCell: row => {
              return <RelativeTime date={new Date(row.updatedAt)} />
            },
          },
          {
            header: 'Dependabot',
            field: 'securityFeatures.dependabot',
          },
          {
            header: 'Code scanning',
            field: 'securityFeatures.codeScanning',
          },
        ]}
      />
    </Table.Container>
  )
}


const now = Date.now()
const Second = 1000
const Minute = 60 * Second
const Hour = 60 * Minute
const Day = 24 * Hour
const Week = 7 * Day
const Month = 4 * Week


const data: Array<{
  id: number
  name: string
  type: 'Public' | 'Internal'
  updatedAt: number
  securityFeatures: {
    dependabot: string
    codeScanning: string
  }
}> = [
  {
    id: 1,
    name: 'codeql-dca-worker',
    type: 'Internal',
    updatedAt: now,
    securityFeatures: {
      dependabot: 'Alerts',
      codeScanning: 'Report secrets',
    },
  },
  {
    id: 2,
    name: 'aegir',
    type: 'Public',
    updatedAt: now - 5 * Minute,
    securityFeatures: {
      dependabot: 'Alerts',
      codeScanning: 'Report secrets',
    },
  },
  {
    id: 3,
    name: 'strapi',
    type: 'Public',
    updatedAt: now - 1 * Hour,
    securityFeatures: {
      dependabot: '',
      codeScanning: '',
    },
  },
  {
    id: 4,
    name: 'codeql-ci-nightlies',
    type: 'Public',
    updatedAt: now - 6 * Hour,
    securityFeatures: {
      dependabot: 'Alerts',
      codeScanning: '',
    },
  },
  {
    id: 5,
    name: 'dependabot-updates',
    type: 'Public',
    updatedAt: now - 1 * Day,
    securityFeatures: {
      dependabot: '',
      codeScanning: '',
    },
  },
  {
    id: 6,
    name: 'tsx-create-react-app',
    type: 'Public',
    updatedAt: now - 1 * Week,
    securityFeatures: {
      dependabot: '',
      codeScanning: '',
    },
  },
  {
    id: 7,
    name: 'bootstrap',
    type: 'Public',
    updatedAt: now - 1 * Month,
    securityFeatures: {dependabot: 'Alerts', codeScanning: ''},
  },
  {
    id: 8,
    name: 'docker-templates',
    type: 'Public',
    updatedAt: now - 3 * Month,
    securityFeatures: {
      dependabot: 'Alerts',
      codeScanning: '',
    },
  },
]

import React from 'react'
import {Button, RelativeTime} from '@primer/react'
import {Table, DataTable} from '@primer/react/experimental'

export default function HeaderAction() {
  return (
    <Table.Container>
      <Table.Title as="h2" id="repositories-headerAction">
        Repositories
      </Table.Title>
      <Table.Actions>
        <Button>Action</Button>
      </Table.Actions>
      <Table.Divider />
      <Table.Subtitle as="p" id="repositories-subtitle-headerAction">
        A subtitle could appear here to give extra context to the data.
      </Table.Subtitle>
      <DataTable
        aria-labelledby="repositories-default-headerAction"
        aria-describedby="repositories-subtitle-headerAction"
        data={data}
        columns={[
          {
            header: 'Repository',
            field: 'name',
            rowHeader: true,
          },
          {
            header: 'Type',
            field: 'type',
          },
          {
            header: 'Updated',
            field: 'updatedAt',
            renderCell: row => {
              return <RelativeTime date={new Date(row.updatedAt)} />
            },
          },
          {
            header: 'Dependabot',
            field: 'securityFeatures.dependabot',
          },
          {
            header: 'Code scanning',
            field: 'securityFeatures.codeScanning',
          },
        ]}
      />
    </Table.Container>
  )
}

const now = Date.now()
const Second = 1000
const Minute = 60 * Second
const Hour = 60 * Minute
const Day = 24 * Hour
const Week = 7 * Day
const Month = 4 * Week

const data: Array<{
  id: number
  name: string
  type: 'Public' | 'Internal'
  updatedAt: number
  securityFeatures: {
    dependabot: string
    codeScanning: string
  }
}> = [
  {
    id: 1,
    name: 'codeql-dca-worker',
    type: 'Internal',
    updatedAt: now,
    securityFeatures: {
      dependabot: 'Alerts',
      codeScanning: 'Report secrets',
    },
  },
  {
    id: 2,
    name: 'aegir',
    type: 'Public',
    updatedAt: now - 5 * Minute,
    securityFeatures: {
      dependabot: 'Alerts',
      codeScanning: 'Report secrets',
    },
  },
  {
    id: 3,
    name: 'strapi',
    type: 'Public',
    updatedAt: now - 1 * Hour,
    securityFeatures: {
      dependabot: '',
      codeScanning: '',
    },
  },
  {
    id: 4,
    name: 'codeql-ci-nightlies',
    type: 'Public',
    updatedAt: now - 6 * Hour,
    securityFeatures: {
      dependabot: 'Alerts',
      codeScanning: '',
    },
  },
  {
    id: 5,
    name: 'dependabot-updates',
    type: 'Public',
    updatedAt: now - 1 * Day,
    securityFeatures: {
      dependabot: '',
      codeScanning: '',
    },
  },
  {
    id: 6,
    name: 'tsx-create-react-app',
    type: 'Public',
    updatedAt: now - 1 * Week,
    securityFeatures: {
      dependabot: '',
      codeScanning: '',
    },
  },
  {
    id: 7,
    name: 'bootstrap',
    type: 'Public',
    updatedAt: now - 1 * Month,
    securityFeatures: {dependabot: 'Alerts', codeScanning: ''},
  },
  {
    id: 8,
    name: 'docker-templates',
    type: 'Public',
    updatedAt: now - 3 * Month,
    securityFeatures: {
      dependabot: 'Alerts',
      codeScanning: '',
    },
  },
]

With single row action

Actions that affect the item represented in the row are placed in the last column, and they don't require a visible column header.

Repositories

Repository	Type	Updated	Dependabot	Code scanning
codeql-dca-worker	Internal	Apr 3, 2025	Alerts	Report secrets
aegir	Public	Apr 3, 2025	Alerts	Report secrets
strapi	Public	Apr 3, 2025
codeql-ci-nightlies	Public	Apr 3, 2025	Alerts
dependabot-updates	Public	Apr 2, 2025
tsx-create-react-app	Public	Mar 27, 2025
bootstrap	Public	Mar 6, 2025	Alerts
docker-templates	Public	Jan 9, 2025	Alerts

import React from 'react'
import {Box, IconButton, RelativeTime} from '@primer/react'
import {Table, DataTable} from '@primer/react/experimental'
import {DownloadIcon} from '@primer/octicons-react'


export default function RowAction() {
  return (
    <Table.Container>
      <Table.Title as="h2" id="repositories-rowAction">
        Repositories
      </Table.Title>
      <DataTable
        aria-labelledby="repositories-rowAction"
        data={data}
        columns={[
          {
            header: 'Repository',
            field: 'name',
            rowHeader: true,
          },
          {
            header: 'Type',
            field: 'type',
          },
          {
            header: 'Updated',
            field: 'updatedAt',
            renderCell: row => {
              return <RelativeTime date={new Date(row.updatedAt)} />
            },
          },
          {
            header: 'Dependabot',
            field: 'securityFeatures.dependabot',
          },
          {
            header: 'Code scanning',
            field: 'securityFeatures.codeScanning',
          },
          {
            id: 'actions',
            // The header is styled to be visually hidden, but still accessible to screen readers
            header: () => (
              <Box
                sx={{
                  clipPath: 'inset(50%)',
                  height: '1px',
                  overflow: 'hidden',
                  position: 'absolute',
                  whiteSpace: 'nowrap',
                  width: '1px',
                }}
              >
                Actions
              </Box>
            ),
            renderCell: row => {
              return (
                <IconButton
                  aria-label={`Download: ${row.name}`}
                  title={`Download: ${row.name}`}
                  icon={DownloadIcon}
                  variant="invisible"
                  onClick={() => {
                    alert(`Fake downloading ${row.name}`)
                  }}
                />
              )
            },
          },
        ]}
      />
    </Table.Container>
  )
}


const now = Date.now()
const Second = 1000
const Minute = 60 * Second
const Hour = 60 * Minute
const Day = 24 * Hour
const Week = 7 * Day
const Month = 4 * Week


const data: Array<{
  id: number
  name: string
  type: 'Public' | 'Internal'
  updatedAt: number
  securityFeatures: {
    dependabot: string
    codeScanning: string
  }
}> = [
  {
    id: 1,
    name: 'codeql-dca-worker',
    type: 'Internal',
    updatedAt: now,
    securityFeatures: {
      dependabot: 'Alerts',
      codeScanning: 'Report secrets',
    },
  },
  {
    id: 2,
    name: 'aegir',
    type: 'Public',
    updatedAt: now - 5 * Minute,
    securityFeatures: {
      dependabot: 'Alerts',
      codeScanning: 'Report secrets',
    },
  },
  {
    id: 3,
    name: 'strapi',
    type: 'Public',
    updatedAt: now - 1 * Hour,
    securityFeatures: {
      dependabot: '',
      codeScanning: '',
    },
  },
  {
    id: 4,
    name: 'codeql-ci-nightlies',
    type: 'Public',
    updatedAt: now - 6 * Hour,
    securityFeatures: {
      dependabot: 'Alerts',
      codeScanning: '',
    },
  },
  {
    id: 5,
    name: 'dependabot-updates',
    type: 'Public',
    updatedAt: now - 1 * Day,
    securityFeatures: {
      dependabot: '',
      codeScanning: '',
    },
  },
  {
    id: 6,
    name: 'tsx-create-react-app',
    type: 'Public',
    updatedAt: now - 1 * Week,
    securityFeatures: {
      dependabot: '',
      codeScanning: '',
    },
  },
  {
    id: 7,
    name: 'bootstrap',
    type: 'Public',
    updatedAt: now - 1 * Month,
    securityFeatures: {dependabot: 'Alerts', codeScanning: ''},
  },
  {
    id: 8,
    name: 'docker-templates',
    type: 'Public',
    updatedAt: now - 3 * Month,
    securityFeatures: {
      dependabot: 'Alerts',
      codeScanning: '',
    },
  },
]

import React from 'react'
import {Box, IconButton, RelativeTime} from '@primer/react'
import {Table, DataTable} from '@primer/react/experimental'
import {DownloadIcon} from '@primer/octicons-react'

export default function RowAction() {
  return (
    <Table.Container>
      <Table.Title as="h2" id="repositories-rowAction">
        Repositories
      </Table.Title>
      <DataTable
        aria-labelledby="repositories-rowAction"
        data={data}
        columns={[
          {
            header: 'Repository',
            field: 'name',
            rowHeader: true,
          },
          {
            header: 'Type',
            field: 'type',
          },
          {
            header: 'Updated',
            field: 'updatedAt',
            renderCell: row => {
              return <RelativeTime date={new Date(row.updatedAt)} />
            },
          },
          {
            header: 'Dependabot',
            field: 'securityFeatures.dependabot',
          },
          {
            header: 'Code scanning',
            field: 'securityFeatures.codeScanning',
          },
          {
            id: 'actions',
            // The header is styled to be visually hidden, but still accessible to screen readers
            header: () => (
              <Box
                sx={{
                  clipPath: 'inset(50%)',
                  height: '1px',
                  overflow: 'hidden',
                  position: 'absolute',
                  whiteSpace: 'nowrap',
                  width: '1px',
                }}
              >
                Actions
              </Box>
            ),
            renderCell: row => {
              return (
                <IconButton
                  aria-label={`Download: ${row.name}`}
                  title={`Download: ${row.name}`}
                  icon={DownloadIcon}
                  variant="invisible"
                  onClick={() => {
                    alert(`Fake downloading ${row.name}`)
                  }}
                />
              )
            },
          },
        ]}
      />
    </Table.Container>
  )
}

const now = Date.now()
const Second = 1000
const Minute = 60 * Second
const Hour = 60 * Minute
const Day = 24 * Hour
const Week = 7 * Day
const Month = 4 * Week

const data: Array<{
  id: number
  name: string
  type: 'Public' | 'Internal'
  updatedAt: number
  securityFeatures: {
    dependabot: string
    codeScanning: string
  }
}> = [
  {
    id: 1,
    name: 'codeql-dca-worker',
    type: 'Internal',
    updatedAt: now,
    securityFeatures: {
      dependabot: 'Alerts',
      codeScanning: 'Report secrets',
    },
  },
  {
    id: 2,
    name: 'aegir',
    type: 'Public',
    updatedAt: now - 5 * Minute,
    securityFeatures: {
      dependabot: 'Alerts',
      codeScanning: 'Report secrets',
    },
  },
  {
    id: 3,
    name: 'strapi',
    type: 'Public',
    updatedAt: now - 1 * Hour,
    securityFeatures: {
      dependabot: '',
      codeScanning: '',
    },
  },
  {
    id: 4,
    name: 'codeql-ci-nightlies',
    type: 'Public',
    updatedAt: now - 6 * Hour,
    securityFeatures: {
      dependabot: 'Alerts',
      codeScanning: '',
    },
  },
  {
    id: 5,
    name: 'dependabot-updates',
    type: 'Public',
    updatedAt: now - 1 * Day,
    securityFeatures: {
      dependabot: '',
      codeScanning: '',
    },
  },
  {
    id: 6,
    name: 'tsx-create-react-app',
    type: 'Public',
    updatedAt: now - 1 * Week,
    securityFeatures: {
      dependabot: '',
      codeScanning: '',
    },
  },
  {
    id: 7,
    name: 'bootstrap',
    type: 'Public',
    updatedAt: now - 1 * Month,
    securityFeatures: {dependabot: 'Alerts', codeScanning: ''},
  },
  {
    id: 8,
    name: 'docker-templates',
    type: 'Public',
    updatedAt: now - 3 * Month,
    securityFeatures: {
      dependabot: 'Alerts',
      codeScanning: '',
    },
  },
]

With multiple row actions

If you have multiple actions for a row, start by pulling them into a dropdown menu.

If one of the actions is heavily used, pull it out for easier access. Do not pull out more than 1 action.

Row actions in a dropdown

Repository	Type	Updated	Dependabot	Code scanning
codeql-dca-worker	Internal	Apr 3, 2025	Alerts	Report secrets
aegir	Public	Apr 3, 2025	Alerts	Report secrets
strapi	Public	Apr 3, 2025

Row actions inline

Repository	Type	Updated	Dependabot	Code scanning
codeql-dca-worker	Internal	Apr 3, 2025	Alerts	Report secrets
aegir	Public	Apr 3, 2025	Alerts	Report secrets
strapi	Public	Apr 3, 2025

Row actions overflowing

Repository	Type	Updated	Dependabot	Code scanning
codeql-dca-worker	Internal	Apr 3, 2025	Alerts	Report secrets
aegir	Public	Apr 3, 2025	Alerts	Report secrets
strapi	Public	Apr 3, 2025

import React from 'react'
import {ActionList, ActionMenu, Box, IconButton, RelativeTime, Stack} from '@primer/react'
import {Table, DataTable} from '@primer/react/experimental'
import {KebabHorizontalIcon, PencilIcon, TrashIcon} from '@primer/octicons-react'


export default function RowAction() {
  return (
    <Stack>
      {/*-------------------------------------------------------
      Row actions in a dropdown ------------------------------
    -------------------------------------------------------*/}
      <Table.Container>
        <Table.Title as="h2" id="rowActionsDropdown">
          Row actions in a dropdown
        </Table.Title>
        <DataTable
          aria-labelledby="rowActionsDropdown"
          data={data}
          columns={[
            {
              header: 'Repository',
              field: 'name',
              rowHeader: true,
            },
            {
              header: 'Type',
              field: 'type',
            },
            {
              header: 'Updated',
              field: 'updatedAt',
              renderCell: row => {
                return <RelativeTime date={new Date(row.updatedAt)} />
              },
            },
            {
              header: 'Dependabot',
              field: 'securityFeatures.dependabot',
            },
            {
              header: 'Code scanning',
              field: 'securityFeatures.codeScanning',
            },
            {
              id: 'actions',
              // The header is styled to be visually hidden, but still accessible to screen readers
              header: () => (
                <Box
                  sx={{
                    clipPath: 'inset(50%)',
                    height: '1px',
                    overflow: 'hidden',
                    position: 'absolute',
                    whiteSpace: 'nowrap',
                    width: '1px',
                  }}
                >
                  Actions
                </Box>
              ),
              renderCell: row => {
                return (
                  <>
                    <ActionMenu>
                      <ActionMenu.Anchor>
                        <IconButton
                          aria-label={`Actions: ${row.name}`}
                          title={`Actions: ${row.name}`}
                          icon={KebabHorizontalIcon}
                          variant="invisible"
                        />
                      </ActionMenu.Anchor>
                      <ActionMenu.Overlay>
                        <ActionList>
                          <ActionList.Item>Edit row</ActionList.Item>
                          <ActionList.Item>Copy row</ActionList.Item>
                          <ActionList.Item>Export row as CSV</ActionList.Item>
                          <ActionList.Divider />
                          <ActionList.Item variant="danger">Delete row</ActionList.Item>
                        </ActionList>
                      </ActionMenu.Overlay>
                    </ActionMenu>
                  </>
                )
              },
            },
          ]}
        />
      </Table.Container>


      {/*-------------------------------------------------------
      Row actions inline -------------------------------------
    -------------------------------------------------------*/}
      <Table.Container>
        <Table.Title as="h2" id="rowActionsInline">
          Row actions inline
        </Table.Title>
        <DataTable
          aria-labelledby="rowActionsInline"
          data={data}
          columns={[
            {
              header: 'Repository',
              field: 'name',
              rowHeader: true,
            },
            {
              header: 'Type',
              field: 'type',
            },
            {
              header: 'Updated',
              field: 'updatedAt',
              renderCell: row => {
                return <RelativeTime date={new Date(row.updatedAt)} />
              },
            },
            {
              header: 'Dependabot',
              field: 'securityFeatures.dependabot',
            },
            {
              header: 'Code scanning',
              field: 'securityFeatures.codeScanning',
            },
            {
              id: 'actions',
              // The header is styled to be visually hidden, but still accessible to screen readers
              header: () => (
                <Box
                  sx={{
                    clipPath: 'inset(50%)',
                    height: '1px',
                    overflow: 'hidden',
                    position: 'absolute',
                    whiteSpace: 'nowrap',
                    width: '1px',
                  }}
                >
                  Actions
                </Box>
              ),
              renderCell: row => {
                return (
                  <>
                    <IconButton
                      aria-label={`Edit: ${row.name}`}
                      title={`Edit: ${row.name}`}
                      icon={PencilIcon}
                      variant="invisible"
                    />
                    <IconButton
                      aria-label={`Delete: ${row.name}`}
                      title={`Delete: ${row.name}`}
                      icon={TrashIcon}
                      variant="invisible"
                    />
                  </>
                )
              },
            },
          ]}
        />
      </Table.Container>


      {/*-------------------------------------------------------
      Row actions overflowing --------------------------------
    -------------------------------------------------------*/}
      <Table.Container>
        <Table.Title as="h2" id="rowActionsOverflow">
          Row actions overflowing
        </Table.Title>
        <DataTable
          aria-labelledby="rowActionsOverflow"
          data={data}
          columns={[
            {
              header: 'Repository',
              field: 'name',
              rowHeader: true,
            },
            {
              header: 'Type',
              field: 'type',
            },
            {
              header: 'Updated',
              field: 'updatedAt',
              renderCell: row => {
                return <RelativeTime date={new Date(row.updatedAt)} />
              },
            },
            {
              header: 'Dependabot',
              field: 'securityFeatures.dependabot',
            },
            {
              header: 'Code scanning',
              field: 'securityFeatures.codeScanning',
            },
            {
              id: 'actions',
              // The header is styled to be visually hidden, but still accessible to screen readers
              header: () => (
                <Box
                  sx={{
                    clipPath: 'inset(50%)',
                    height: '1px',
                    overflow: 'hidden',
                    position: 'absolute',
                    whiteSpace: 'nowrap',
                    width: '1px',
                  }}
                >
                  Actions
                </Box>
              ),
              renderCell: row => {
                return (
                  <>
                    <IconButton
                      aria-label={`Edit: ${row.name}`}
                      title={`Edit: ${row.name}`}
                      icon={PencilIcon}
                      variant="invisible"
                    />
                    <ActionMenu>
                      <ActionMenu.Anchor>
                        <IconButton
                          aria-label={`Actions: ${row.name}`}
                          title={`Actions: ${row.name}`}
                          icon={KebabHorizontalIcon}
                          variant="invisible"
                        />
                      </ActionMenu.Anchor>
                      <ActionMenu.Overlay>
                        <ActionList>
                          <ActionList.Item>Copy row</ActionList.Item>
                          <ActionList.Item>Export row as CSV</ActionList.Item>
                          <ActionList.Divider />
                          <ActionList.Item variant="danger">Delete row</ActionList.Item>
                        </ActionList>
                      </ActionMenu.Overlay>
                    </ActionMenu>
                  </>
                )
              },
            },
          ]}
        />
      </Table.Container>
    </Stack>
  )
}


const now = Date.now()
const Second = 1000
const Minute = 60 * Second
const Hour = 60 * Minute


const data: Array<{
  id: number
  name: string
  type: 'Public' | 'Internal'
  updatedAt: number
  securityFeatures: {
    dependabot: string
    codeScanning: string
  }
}> = [
  {
    id: 1,
    name: 'codeql-dca-worker',
    type: 'Internal',
    updatedAt: now,
    securityFeatures: {
      dependabot: 'Alerts',
      codeScanning: 'Report secrets',
    },
  },
  {
    id: 2,
    name: 'aegir',
    type: 'Public',
    updatedAt: now - 5 * Minute,
    securityFeatures: {
      dependabot: 'Alerts',
      codeScanning: 'Report secrets',
    },
  },
  {
    id: 3,
    name: 'strapi',
    type: 'Public',
    updatedAt: now - 1 * Hour,
    securityFeatures: {
      dependabot: '',
      codeScanning: '',
    },
  },
]

import React from 'react'
import {ActionList, ActionMenu, Box, IconButton, RelativeTime, Stack} from '@primer/react'
import {Table, DataTable} from '@primer/react/experimental'
import {KebabHorizontalIcon, PencilIcon, TrashIcon} from '@primer/octicons-react'

export default function RowAction() {
  return (
    <Stack>
      {/*-------------------------------------------------------
      Row actions in a dropdown ------------------------------
    -------------------------------------------------------*/}
      <Table.Container>
        <Table.Title as="h2" id="rowActionsDropdown">
          Row actions in a dropdown
        </Table.Title>
        <DataTable
          aria-labelledby="rowActionsDropdown"
          data={data}
          columns={[
            {
              header: 'Repository',
              field: 'name',
              rowHeader: true,
            },
            {
              header: 'Type',
              field: 'type',
            },
            {
              header: 'Updated',
              field: 'updatedAt',
              renderCell: row => {
                return <RelativeTime date={new Date(row.updatedAt)} />
              },
            },
            {
              header: 'Dependabot',
              field: 'securityFeatures.dependabot',
            },
            {
              header: 'Code scanning',
              field: 'securityFeatures.codeScanning',
            },
            {
              id: 'actions',
              // The header is styled to be visually hidden, but still accessible to screen readers
              header: () => (
                <Box
                  sx={{
                    clipPath: 'inset(50%)',
                    height: '1px',
                    overflow: 'hidden',
                    position: 'absolute',
                    whiteSpace: 'nowrap',
                    width: '1px',
                  }}
                >
                  Actions
                </Box>
              ),
              renderCell: row => {
                return (
                  <>
                    <ActionMenu>
                      <ActionMenu.Anchor>
                        <IconButton
                          aria-label={`Actions: ${row.name}`}
                          title={`Actions: ${row.name}`}
                          icon={KebabHorizontalIcon}
                          variant="invisible"
                        />
                      </ActionMenu.Anchor>
                      <ActionMenu.Overlay>
                        <ActionList>
                          <ActionList.Item>Edit row</ActionList.Item>
                          <ActionList.Item>Copy row</ActionList.Item>
                          <ActionList.Item>Export row as CSV</ActionList.Item>
                          <ActionList.Divider />
                          <ActionList.Item variant="danger">Delete row</ActionList.Item>
                        </ActionList>
                      </ActionMenu.Overlay>
                    </ActionMenu>
                  </>
                )
              },
            },
          ]}
        />
      </Table.Container>

      {/*-------------------------------------------------------
      Row actions inline -------------------------------------
    -------------------------------------------------------*/}
      <Table.Container>
        <Table.Title as="h2" id="rowActionsInline">
          Row actions inline
        </Table.Title>
        <DataTable
          aria-labelledby="rowActionsInline"
          data={data}
          columns={[
            {
              header: 'Repository',
              field: 'name',
              rowHeader: true,
            },
            {
              header: 'Type',
              field: 'type',
            },
            {
              header: 'Updated',
              field: 'updatedAt',
              renderCell: row => {
                return <RelativeTime date={new Date(row.updatedAt)} />
              },
            },
            {
              header: 'Dependabot',
              field: 'securityFeatures.dependabot',
            },
            {
              header: 'Code scanning',
              field: 'securityFeatures.codeScanning',
            },
            {
              id: 'actions',
              // The header is styled to be visually hidden, but still accessible to screen readers
              header: () => (
                <Box
                  sx={{
                    clipPath: 'inset(50%)',
                    height: '1px',
                    overflow: 'hidden',
                    position: 'absolute',
                    whiteSpace: 'nowrap',
                    width: '1px',
                  }}
                >
                  Actions
                </Box>
              ),
              renderCell: row => {
                return (
                  <>
                    <IconButton
                      aria-label={`Edit: ${row.name}`}
                      title={`Edit: ${row.name}`}
                      icon={PencilIcon}
                      variant="invisible"
                    />
                    <IconButton
                      aria-label={`Delete: ${row.name}`}
                      title={`Delete: ${row.name}`}
                      icon={TrashIcon}
                      variant="invisible"
                    />
                  </>
                )
              },
            },
          ]}
        />
      </Table.Container>

      {/*-------------------------------------------------------
      Row actions overflowing --------------------------------
    -------------------------------------------------------*/}
      <Table.Container>
        <Table.Title as="h2" id="rowActionsOverflow">
          Row actions overflowing
        </Table.Title>
        <DataTable
          aria-labelledby="rowActionsOverflow"
          data={data}
          columns={[
            {
              header: 'Repository',
              field: 'name',
              rowHeader: true,
            },
            {
              header: 'Type',
              field: 'type',
            },
            {
              header: 'Updated',
              field: 'updatedAt',
              renderCell: row => {
                return <RelativeTime date={new Date(row.updatedAt)} />
              },
            },
            {
              header: 'Dependabot',
              field: 'securityFeatures.dependabot',
            },
            {
              header: 'Code scanning',
              field: 'securityFeatures.codeScanning',
            },
            {
              id: 'actions',
              // The header is styled to be visually hidden, but still accessible to screen readers
              header: () => (
                <Box
                  sx={{
                    clipPath: 'inset(50%)',
                    height: '1px',
                    overflow: 'hidden',
                    position: 'absolute',
                    whiteSpace: 'nowrap',
                    width: '1px',
                  }}
                >
                  Actions
                </Box>
              ),
              renderCell: row => {
                return (
                  <>
                    <IconButton
                      aria-label={`Edit: ${row.name}`}
                      title={`Edit: ${row.name}`}
                      icon={PencilIcon}
                      variant="invisible"
                    />
                    <ActionMenu>
                      <ActionMenu.Anchor>
                        <IconButton
                          aria-label={`Actions: ${row.name}`}
                          title={`Actions: ${row.name}`}
                          icon={KebabHorizontalIcon}
                          variant="invisible"
                        />
                      </ActionMenu.Anchor>
                      <ActionMenu.Overlay>
                        <ActionList>
                          <ActionList.Item>Copy row</ActionList.Item>
                          <ActionList.Item>Export row as CSV</ActionList.Item>
                          <ActionList.Divider />
                          <ActionList.Item variant="danger">Delete row</ActionList.Item>
                        </ActionList>
                      </ActionMenu.Overlay>
                    </ActionMenu>
                  </>
                )
              },
            },
          ]}
        />
      </Table.Container>
    </Stack>
  )
}

const now = Date.now()
const Second = 1000
const Minute = 60 * Second
const Hour = 60 * Minute

const data: Array<{
  id: number
  name: string
  type: 'Public' | 'Internal'
  updatedAt: number
  securityFeatures: {
    dependabot: string
    codeScanning: string
  }
}> = [
  {
    id: 1,
    name: 'codeql-dca-worker',
    type: 'Internal',
    updatedAt: now,
    securityFeatures: {
      dependabot: 'Alerts',
      codeScanning: 'Report secrets',
    },
  },
  {
    id: 2,
    name: 'aegir',
    type: 'Public',
    updatedAt: now - 5 * Minute,
    securityFeatures: {
      dependabot: 'Alerts',
      codeScanning: 'Report secrets',
    },
  },
  {
    id: 3,
    name: 'strapi',
    type: 'Public',
    updatedAt: now - 1 * Hour,
    securityFeatures: {
      dependabot: '',
      codeScanning: '',
    },
  },
]

With paginated rows

The pagination footer shows the user where they are in relation to the total number of rows and provides controls for navigating all rows.

Guidelines on when to paginate rows

Repositories

Repository	Type	Updated
Repository 1	Internal	Apr 3, 2025
Repository 2	Public	Apr 2, 2025
Repository 3	Public	Apr 1, 2025
Repository 4	Internal	Mar 31, 2025
Repository 5	Public	Mar 30, 2025
Repository 6	Public	Mar 29, 2025
Repository 7	Internal	Mar 28, 2025
Repository 8	Public	Mar 27, 2025
Repository 9	Public	Mar 26, 2025
Repository 10	Internal	Mar 25, 2025

import React from 'react'
import {RelativeTime} from '@primer/react'
import {Table, DataTable} from '@primer/react/experimental'


export default function Pagination() {
  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-pagination">
        Repositories
      </Table.Title>
      <DataTable
        aria-labelledby="repositories-pagination"
        data={rows}
        columns={[
          {
            header: 'Repository',
            field: 'name',
            rowHeader: true,
          },
          {
            header: 'Type',
            field: 'type',
          },
          {
            header: 'Updated',
            field: 'updatedAt',
            renderCell: row => {
              return <RelativeTime date={new Date(row.updatedAt)} />
            },
          },
          {
            header: 'Dependabot',
            field: 'securityFeatures.dependabot',
          },
          {
            header: 'Code scanning',
            field: 'securityFeatures.codeScanning',
          },
        ]}
      />
      <Table.Pagination
        aria-label="Pagination for Repositories"
        pageSize={pageSize}
        totalCount={repos.length}
        onChange={({pageIndex}) => {
          setPageIndex(pageIndex)
        }}
      />
    </Table.Container>
  )
}


const now = Date.now()
export const repos: Array<{
  id: number
  name: string
  type: 'Public' | 'Internal'
  updatedAt: number
  securityFeatures: {
    dependabot: string
    codeScanning: string
  }
}> = []


for (let i = 0; i < 1000; i++) {
  repos.push({
    id: i,
    name: `Repository ${i + 1}`,
    type: i % 3 === 0 ? 'Internal' : 'Public',
    updatedAt: now - 1000 * 60 * 60 * 24 * i,
    securityFeatures: {
      dependabot: '',
      codeScanning: '',
    },
  })
}

import React from 'react'
import {RelativeTime} from '@primer/react'
import {Table, DataTable} from '@primer/react/experimental'

export default function Pagination() {
  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-pagination">
        Repositories
      </Table.Title>
      <DataTable
        aria-labelledby="repositories-pagination"
        data={rows}
        columns={[
          {
            header: 'Repository',
            field: 'name',
            rowHeader: true,
          },
          {
            header: 'Type',
            field: 'type',
          },
          {
            header: 'Updated',
            field: 'updatedAt',
            renderCell: row => {
              return <RelativeTime date={new Date(row.updatedAt)} />
            },
          },
          {
            header: 'Dependabot',
            field: 'securityFeatures.dependabot',
          },
          {
            header: 'Code scanning',
            field: 'securityFeatures.codeScanning',
          },
        ]}
      />
      <Table.Pagination
        aria-label="Pagination for Repositories"
        pageSize={pageSize}
        totalCount={repos.length}
        onChange={({pageIndex}) => {
          setPageIndex(pageIndex)
        }}
      />
    </Table.Container>
  )
}

const now = Date.now()
export const repos: Array<{
  id: number
  name: string
  type: 'Public' | 'Internal'
  updatedAt: number
  securityFeatures: {
    dependabot: string
    codeScanning: string
  }
}> = []

for (let i = 0; i < 1000; i++) {
  repos.push({
    id: i,
    name: `Repository ${i + 1}`,
    type: i % 3 === 0 ? 'Internal' : 'Public',
    updatedAt: now - 1000 * 60 * 60 * 24 * i,
    securityFeatures: {
      dependabot: '',
      codeScanning: '',
    },
  })
}

In a loading state

DataTables use "skeleton" loading states to indicate loading content.

Table loading state guidance

Repositories

Repository	Type	Updated	Dependabot	Code scanning
Loading	Loading	Loading	Loading	Loading

<Table.Container>
  <Table.Title as="h2" id="repositories-loading">
    Repositories
  </Table.Title>
  <Table.Skeleton
    aria-labelledby="repositories-loading"
    rows={10}
    columns={[
      {
        header: 'Repository',
        id: 'name',
      },
      {
        header: 'Type',
        id: 'type',
      },
      {
        header: 'Updated',
        id: 'updatedAt',
      },
      {
        header: 'Dependabot',
        id: 'securityFeatures.dependabot',
      },
      {
        header: 'Code scanning',
        id: 'securityFeatures.codeScanning',
      },
    ]}
  />
</Table.Container>

<Table.Container>
  <Table.Title as="h2" id="repositories-loading">
    Repositories
  </Table.Title>
  <Table.Skeleton
    aria-labelledby="repositories-loading"
    rows={10}
    columns={[
      {
        header: 'Repository',
        id: 'name',
      },
      {
        header: 'Type',
        id: 'type',
      },
      {
        header: 'Updated',
        id: 'updatedAt',
      },
      {
        header: 'Dependabot',
        id: 'securityFeatures.dependabot',
      },
      {
        header: 'Code scanning',
        id: 'securityFeatures.codeScanning',
      },
    ]}
  />
</Table.Container>

Name	Default	Description
aria-describedby		`string` Provide an id to an element which uniquely describes this table
aria-labelledby		`string` Provide an id to an element which uniquely labels this table
data		`Array<Data>` Provide a collection of the rows which will be rendered inside of the table
columns		`Array<Column<Data>>` Provide the columns for the table and the fields in `data` to which they correspond
cellPadding		`'condensed' \| 'normal' \| 'spacious'` Specify the amount of space that should be available around the contents of a cell
aria-describedby		`string` Provide an id to an element which uniquely describes this table
aria-labelledby		`string` Provide an id to an element which uniquely labels this table
initialSortColumn		`string \| number` Provide the id or field of the column by which the table is sorted. When using this `prop`, the input data must be sorted by this column in ascending order
initialSortDirection		`'ASC' \| 'DESC'` Provide the sort direction that the table should be sorted by on the currently sorted column

Table

Name	Default	Description
aria-describedby		`string` Provide an id to an element which uniquely describes this table
aria-labelledby		`string` Provide an id to an element which uniquely labels this table
children		`React.ReactNode`
cellPadding		`'condensed' \| 'normal' \| 'spacious'` Specify the amount of space that should be available around the contents of a cell

Table.Head

Name	Default	Description
children		`React.ReactNode`

Table.Actions

Name	Default	Description
children		`React.ReactNode`

Table.Body

Name	Default	Description
children		`React.ReactNode`

Table.Row

Name	Default	Description
children		`React.ReactNode`

Name	Default	Description
align		`'end' \| 'start'` The horizontal alignment of the cell's content
children		`React.ReactNode`

Table.Cell

Name	Default	Description
align		`'end' \| 'start'` The horizontal alignment of the cell's content
children		`React.ReactNode`
scope		`'row'` Provide the scope for a table cell, useful for defining a row header using `scope="row"`

Table.CellPlaceholder

No props documented

Table.Container

Name	Default	Description
children		`React.ReactNode`

Table.Divider

No props documented

Table.Title

Name	Default	Description
children		`React.ReactNode`
id Required		`string` Provide a unique id for the table subtitle. This should be used along with `aria-labelledby` on `DataTable`

Table.Subtitle

Name	Default	Description
children		`React.ReactNode`
id Required		`string` Provide a unique id for the table subtitle. This should be used along with `aria-describedby` on `DataTable`

Table.Skeleton

Name	Default	Description
cellPadding	`normal`	`'condensed' \| 'normal' \| 'spacious'` Specify the amount of space that should be available around the contents of a cell
columns Required		`Array<Column<Data>>`
rows	`10`	`number` Optionally specify the number of rows which should be included in the skeleton state of the component

Name	Default	Description
aria-label Required		`string` Defines a string value that labels the current element. Provide a label for the navigation landmark rendered by this component @see aria-labelledby.
defaultPageIndex		`string` Provide an optional index to specify the default selected page
id		`string` Optionally provide an `id` that is placed on the navigation landmark rendered by this component
onChange		`({ pageIndex }: { pageIndex: number }) => void` Optionally provide a handler that is called whenever the pagination state is updated
pageSize	`25`	`number` Optionally specify the number of items within a page
totalCount Required		`number` Specify the total number of items within the collection
showPages	`{narrow: false}`	`boolean \| { narrow?: boolean; regular?: boolean; wide?: boolean; }` Whether to show the page numbers

Table.ErrorDialog

Name	Default	Description
children Required		`React.ReactNode` The content of the dialog. This is usually a message explaining the error.
title	`'Error'`	`string` The title of the dialog. This is usually a short description of the error.
onRetry		`() => void` Event handler called when the user clicks the retry button.
onDismiss		`() => void` Event handler called when the dialog is dismissed.

Table.SortHeader

Name	Default	Description
direction Required		`'ASC' \| 'DESC' \| 'NONE'` Specify the sort direction for the TableHeader
onToggleSort Required		`() => void` Provide a handler that is called when the sortable TableHeader is interacted with via a click or keyboard interaction
align		`'end' \| 'start'` The horizontal alignment of the cell's content

Column options

Name	Default	Description
align		`'start' \| 'end'` The horizontal alignment of the column's content
field		`ObjectPaths<Data>` Optionally provide a field to render for this column. This may be the key of the object or a string that accesses nested objects through `.`. For example: `field: a.b.c` Alternatively, you may provide a `renderCell` for this column to render the field in a row
header Required		`string \| (() => React.ReactNode)` Provide the name of the column. This will be rendered as a table header within the table itself
maxWidth		`React.CSSProperties['maxWidth']` The maximum width the column can grow to
minWidth		`React.CSSProperties['minWidth']` The minimum width the column can grow to
renderCell		`(data: Data) => React.ReactNode` Provide a custom component or render prop to render the data for this column in a row
rowHeader		`boolean` Specify if the value of this column for a row should be treated as a row header
sortBy		`boolean \| 'alphanumeric' \| 'basic' \| 'datetime' \| (a: Data, b: Data) => number` Specify if the table should sort by this column and, if applicable, a specific sort strategy or custom sort strategy
width	`'grow'`	`'grow' \| 'growCollapse' \| 'auto' \| React.CSSProperties['width']` Controls the width of the column. 'grow': Stretch to fill available space, and min width is the width of the widest cell in the column 'growCollapse': Stretch to fill available space or shrink to fit in the available space. Allows the column to shrink smaller than the cell content's width. 'auto': The column is the width of it’s widest cell. Not intended for use with columns who’s content length varies a lot because a layout shift will occur when the content changes explicit width: Will be exactly that width and will not grow or shrink to fill the parent