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

Display simple, static tabular data. For more complex data tables, use DataTable.

containerClassName

string

Classes applied to the scroll wrapper around the table.

---

scrollAreaProps

ScrollAreaProps

Props passed to the ScrollArea wrapper (e.g. viewportRef).

---

theme

"light" | "dark" = "dark"

Visual theme for the scroll area.

---

TableHeader

Wrapper for the table head section (<thead>). Accepts all native thead attributes.

TableCell

Table body cell (<td>) with default padding and typography. Accepts all native td attributes.

TableSkeleton

checkboxRow

number = -1

Zero-based column index to render as a checkbox skeleton (-1 for none).

---

className

string

Classes applied to each skeleton cell.

---

numColumns

number = 1

Number of columns to show as skeleton cells.

---

numRows

number = 5

Number of skeleton rows.

---

TableBody

checkboxRow

number = -1

Zero-based column index for checkbox skeleton (when loading).

---

loading

boolean = false

When true, show skeleton rows instead of children.

---

numColumns

number = 1

Number of columns for skeleton (when loading).

---

numRows

number = 5

Number of skeleton rows (when loading).

---

skeletonClassName

string

Classes applied to skeleton cells (when loading).

---

TableFooter

Wrapper for the table footer section (<tfoot>). Accepts all native tfoot attributes.

TableRow

disabled

boolean = false

Visually dim the row and prevent interaction.

---

TableHead

Table header cell (<th>) with default styling. Accepts all native th attributes.

TableCaption

Table caption with muted styling. Accepts all native caption attributes.