Table

Note

Are you looking for a table which can handle sorting, filtering, and other advanced functionality? Use DataTable instead.

Usage

To create a basic table, compose <Table>, <TableHeader>, <TableBody>, <TableRow>, <TableHead>, and <TableCell>.

Name	Role	Last Active	Views
Thomas Kao	Creator	Jul 01, 2024	70.3k
Aleksandar Radic	Team Admin	Jul 01, 2024	52.4k
Maria Mi	Team Admin	Jul 01, 2024	20.3k

import {
  Table,
  TableHeader,
  TableBody,
  TableRow,
  TableHead,
  TableCell,
} from "stylus-ui/Table";

const data = [
  {
    name: "Thomas Kao",
    role: "Creator",
    lastActive: "Jul 01, 2024",
    views: "70.3k",
  },
  {
    name: "Aleksandar Radic",
    role: "Team Admin",
    lastActive: "Jul 01, 2024",
    views: "52.4k",
  },
  {
    name: "Maria Mi",
    role: "Team Admin",
    lastActive: "Jul 01, 2024",
    views: "20.3k",
  },
];

export default () => (
  <Table>
    <TableHeader>
      <TableRow>
        <TableHead>Name</TableHead>
        <TableHead>Role</TableHead>
        <TableHead>Last Active</TableHead>
        <TableHead>Views</TableHead>
      </TableRow>
    </TableHeader>
    <TableBody>
      {data.map((row) => (
        <TableRow>
          <TableCell>{row.name}</TableCell>
          <TableCell>{row.role}</TableCell>
          <TableCell>
            <time dateTime={row.lastActive}>{row.lastActive}</time>
          </TableCell>
          <TableCell>{row.views}</TableCell>
        </TableRow>
      ))}
    </TableBody>
  </Table>
);

Note

Table uses tabular numerals for all data (except <time> elements) to simplify the comparison of numbers between rows. If you want to override this behavior for a specific cell, add the normal-nums class.

Loading

Show a loading state by passing loading to <TableBody> along with numColumns and numRows.

Name	Role	Last Active	Views

import {
  Table,
  TableHeader,
  TableBody,
  TableRow,
  TableHead,
  TableCell,
} from "stylus-ui/Table";

export default () => (
  <Table>
    <TableHeader>
      <TableRow>
        <TableHead>Name</TableHead>
        <TableHead>Role</TableHead>
        <TableHead>Last Active</TableHead>
        <TableHead>Views</TableHead>
      </TableRow>
    </TableHeader>
    <TableBody loading numColumns={4} numRows={8} />
  </Table>
);

API Reference

Table

Wraps the table and its content.

Inherits properties from HTMLTableElement.

Prop	Type	Default
children	ReactNode
className	string
containerClassName	string

TableHeader

Wraps one or more <TableRow>s containing <TableHead> cells.

Inherits properties from HTMLTableSectionElement.

Prop	Type	Default
children	ReactNode
className	string

TableBody

Wraps one or more <TableRow>s containing <TableCell>s.

Inherits properties from HTMLTableSectionElement.

Prop	Type	Default
checkboxRow	number
children	ReactNode
className	string
loading	boolean
numColumns	number
numRows	number
skeletonClassName	string

TableRow

Wraps a table row and its content.

Inherits properties from HTMLTableRowElement.

Prop	Type	Default
children	ReactNode
className	string
disabled	boolean

TableHead

A table header cell.

Inherits properties from HTMLTableCellElement.

Prop	Type	Default
children	ReactNode
className	string

TableCell

A table cell.

Inherits properties from HTMLTableCellElement.

Prop	Type	Default
children	ReactNode
className	string

TableCaption

A table caption.

Inherits properties from HTMLTableCaptionElement.

Prop	Type	Default
children	ReactNode
className	string