Data table – Carbon Design System

Preview the data table component with the React live demo. For detailed code usage documentation, see the Storybooks for each framework below.

Documentation

React

Angular (Community)

Vue (Community)

Live demo

Theme selector

Variant selector

DataTable

Name	Protocol	Port	Rule	Attached Groups	Status
Load Balancer 3	HTTP	3000	Round robin	Kevins VM Groups	Disabled
Load Balancer 1	HTTP	443	Round robin	Maureens VM Groups	Starting
Load Balancer 2	HTTP	80	DNS delegation	Andrews VM Groups	Active
Load Balancer 6	HTTP	3000	Round robin	Marcs VM Groups	Disabled
Load Balancer 4	HTTP	443	Round robin	Mels VM Groups	Starting
Load Balancer 5	HTTP	80	DNS delegation	Ronjas VM Groups	Active

CodeSandbox React Angular Vue Vanilla

Live editor for the Default component

<DataTable rows={rowData} headers={headerData}>
  {({ rows, headers, getHeaderProps, getTableProps }) => (
    <TableContainer title="DataTable">
      <Table {...getTableProps()}>
        <TableHead>
          <TableRow>
            {headers.map((header) => (
              <TableHeader {...getHeaderProps({ header })}>
                {header.header}
              </TableHeader>
            ))}
          </TableRow>
        </TableHead>
        <TableBody>
          {rows.map((row) => (
            <TableRow key={row.id}>
              {row.cells.map((cell) => (
                <TableCell key={cell.id}>{cell.value}</TableCell>
              ))}
            </TableRow>
          ))}
        </TableBody>
      </Table>
    </TableContainer>
  )}
</DataTable>

<DataTable rows={rowData} headers={headerData}>
  {({ rows, headers, getHeaderProps, getTableProps }) => (
    <TableContainer title="DataTable">
      <Table {...getTableProps()}>
        <TableHead>
          <TableRow>
            {headers.map((header) => (
              <TableHeader {...getHeaderProps({ header })}>
                {header.header}
              </TableHeader>
            ))}
          </TableRow>
        </TableHead>
        <TableBody>
          {rows.map((row) => (
            <TableRow key={row.id}>
              {row.cells.map((cell) => (
                <TableCell key={cell.id}>{cell.value}</TableCell>
              ))}
            </TableRow>
          ))}
        </TableBody>
      </Table>
    </TableContainer>
  )}
</DataTable>

Sample data

const headerData = [
  {
    header: 'Name',
    key: 'name',
  },
  {
    header: 'Protocol',
    key: 'protocol',
  },

Edit this page on GitHub

Data table: Style

Data table: Accessibility