Table Container

A comprehensive table component system for displaying structured data. The table is composed of multiple components working together: TableContainer (wrapper), TableHeader (header row), TableHeaderCell (header cells), TableRow (data rows), and TableCell (data cells).

Overview

No visual options. See Props for what it accepts.

All options

Header and data rows

TableContainer has no visual options of its own; it wraps a TableHeader and any number of TableRows.

Name

Role

John Doe

john@example.com

Developer

Jane Smith

jane@example.com

Designer

Bob Johnson

bob@example.com

Product Manager

Alice Williams

alice@example.com

Engineer

Examples

Usage

import TableContainer from 'oneslash-design-system/components/tableContainer';
import TableHeader from 'oneslash-design-system/components/tableHeader';
import TableHeaderCell from 'oneslash-design-system/components/tableHeaderCell';
import TableRow from 'oneslash-design-system/components/tableRow';
import TableCell from 'oneslash-design-system/components/tableCell';

function UserTable({ users }) {
  return (
    <TableContainer>
      <TableHeader>
        <TableRow>
          <TableHeaderCell>Name</TableHeaderCell>
          <TableHeaderCell>Email</TableHeaderCell>
          <TableHeaderCell>Role</TableHeaderCell>
        </TableRow>
      </TableHeader>
      {users.map((user) => (
        <TableRow key={user.id}>
          <TableCell>{user.name}</TableCell>
          <TableCell>{user.email}</TableCell>
          <TableCell>{user.role}</TableCell>
        </TableRow>
      ))}
    </TableContainer>
  );
}

Accessibility

ARIA table roles

The table parts render as divs with ARIA roles: TableContainer is role="table", TableHeader is role="rowgroup", TableRow is role="row", TableHeaderCell is role="columnheader", and TableCell is role="cell". Use them together so the roles nest correctly.

Props

TableContainerProps

Prop	Type	Required	Description
children	React.ReactNode	Yes	—

TableHeaderProps

Prop	Type	Required	Description
children	React.ReactNode	Yes	—

TableHeaderCellProps

Prop	Type	Required	Description
children	React.ReactNode	Yes	—
width	string	No	—
minWidth	string	No	—
align	'left' \| 'center' \| 'right'	No	—

TableRowProps

Prop	Type	Required	Description
children	React.ReactNode	Yes	—

TableCellProps

Prop	Type	Required	Description
children	React.ReactNode	Yes	—
width	string	No	—
minWidth	string	No	—
align	'left' \| 'center' \| 'right'	No	—