Table

Display simple, static tabular data.

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>{row.lastActive}</TableCell>
          <TableCell>{row.views}</TableCell>
        </TableRow>
      ))}
    </TableBody>
  </Table>
);

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`