Data table – Carbon Design System

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

<DataTable
    rows={rowData}
    headers={headerData}
    render={({ rows, headers, getHeaderProps }) => (
    <TableContainer title="DataTable">
      <Table>
        <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
    rows={rowData}
    headers={headerData}
    render={({ rows, headers, getHeaderProps }) => (
    <TableContainer title="DataTable">
      <Table>
        <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>)}
    />

Sample data

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

Edit this page on GitHub

Data table: Style

Data table: Accessibility