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 examples

Default

Repositories

Repository	Type	Updated	Dependabot	Code scanning
codeql-dca-worker	Internal	Feb 25, 2025	Alerts	Report secrets
aegir	Public	Feb 25, 2025	Alerts	Report secrets
strapi	Public	Feb 25, 2025
codeql-ci-nightlies	Public	Feb 25, 2025	Alerts
dependabot-updates	Public	Feb 24, 2025
tsx-create-react-app	Public	Feb 18, 2025
bootstrap	Public	Jan 28, 2025	Alerts
docker-templates	Public	Dec 3, 2024	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	Feb 25, 2025	Alerts	Report secrets
aegir	Public	Feb 25, 2025	Alerts	Report secrets
strapi	Public	Feb 25, 2025
codeql-ci-nightlies	Public	Feb 25, 2025	Alerts
dependabot-updates	Public	Feb 24, 2025
tsx-create-react-app	Public	Feb 18, 2025
bootstrap	Public	Jan 28, 2025	Alerts
docker-templates	Public	Dec 3, 2024	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	Feb 25, 2025
aegir	34	Public	Feb 25, 2025
strapi	8	Public	Feb 25, 2025
codeql-ci-nightlies	1	Public	Feb 25, 2025
dependabot-updates	57	Public	Feb 24, 2025
tsx-create-react-app	35	Public	Feb 18, 2025
bootstrap	42	Public	Jan 28, 2025
docker-templates	3	Public	Dec 3, 2024

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	Feb 25, 2025	Alerts	Report secrets
aegir	Public	Feb 25, 2025	Alerts	Report secrets
strapi	Public	Feb 25, 2025
codeql-ci-nightlies	Public	Feb 25, 2025	Alerts
dependabot-updates	Public	Feb 24, 2025
tsx-create-react-app	Public	Feb 18, 2025
bootstrap	Public	Jan 28, 2025	Alerts
docker-templates	Public	Dec 3, 2024	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	Feb 25, 2025	Alerts	Report secrets
aegir	Public	Feb 25, 2025	Alerts	Report secrets
strapi	Public	Feb 25, 2025
codeql-ci-nightlies	Public	Feb 25, 2025	Alerts
dependabot-updates	Public	Feb 24, 2025
tsx-create-react-app	Public	Feb 18, 2025
bootstrap	Public	Jan 28, 2025	Alerts
docker-templates	Public	Dec 3, 2024	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	Feb 25, 2025	Alerts	Report secrets
aegir	Public	Feb 25, 2025	Alerts	Report secrets
strapi	Public	Feb 25, 2025
codeql-ci-nightlies	Public	Feb 25, 2025	Alerts
dependabot-updates	Public	Feb 24, 2025
tsx-create-react-app	Public	Feb 18, 2025
bootstrap	Public	Jan 28, 2025	Alerts
docker-templates	Public	Dec 3, 2024	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	Feb 25, 2025	Alerts	Report secrets
aegir	Public	Feb 25, 2025	Alerts	Report secrets
strapi	Public	Feb 25, 2025
codeql-ci-nightlies	Public	Feb 25, 2025	Alerts
dependabot-updates	Public	Feb 24, 2025
tsx-create-react-app	Public	Feb 18, 2025
bootstrap	Public	Jan 28, 2025	Alerts
docker-templates	Public	Dec 3, 2024	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	Feb 25, 2025	Alerts	Report secrets
aegir	Public	Feb 25, 2025	Alerts	Report secrets
strapi	Public	Feb 25, 2025
codeql-ci-nightlies	Public	Feb 25, 2025	Alerts
dependabot-updates	Public	Feb 24, 2025
tsx-create-react-app	Public	Feb 18, 2025
bootstrap	Public	Jan 28, 2025	Alerts
docker-templates	Public	Dec 3, 2024	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	Feb 25, 2025	Alerts	Report secrets
aegir	Public	Feb 25, 2025	Alerts	Report secrets
strapi	Public	Feb 25, 2025

Row actions inline

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

Row actions overflowing

Repository	Type	Updated	Dependabot	Code scanning
codeql-dca-worker	Internal	Feb 25, 2025	Alerts	Report secrets
aegir	Public	Feb 25, 2025	Alerts	Report secrets
strapi	Public	Feb 25, 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	Feb 25, 2025
Repository 2	Public	Feb 24, 2025
Repository 3	Public	Feb 23, 2025
Repository 4	Internal	Feb 22, 2025
Repository 5	Public	Feb 21, 2025
Repository 6	Public	Feb 20, 2025
Repository 7	Internal	Feb 19, 2025
Repository 8	Public	Feb 18, 2025
Repository 9	Public	Feb 17, 2025
Repository 10	Internal	Feb 16, 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>

More code examples

The previous examples are a curated subset of the full capabilities of the DataTable component. For more examples, see the DataTable Storybook stories.

Props

Loading data for data_table...