RoadieRoadie
  • Home
  • Foundations
  • Tokens
  • Components
  • Charts
  • Widgets
  • Appearance
HomeFoundationsComponents
Appearance

Components

  • Navigation

    • Breadcrumb
    • Navigator
    • Steps
    • Tabs
  • Layout

    • Pane
    • ScrollArea
    • Separator
  • Actions

    • Button
    • IconButton
    • Toggle
    • Toggle group
  • Forms

    • Forms overview
    • Autocomplete
    • Checkbox
    • Combobox
    • Field
    • Fieldset
    • Input
    • Label
    • Number field
    • OTP field
    • Radio group
    • Select
    • Slider
    • Switch
    • Textarea
  • Overlays

    • Dialog
    • Drawer
    • Menu
    • Popover
    • Toast
    • Tooltip
  • Collections

    • Accordion
    • Card
    • Carousel
    • Collapsible
    • DataTable
    • List
    • Marquee
    • Table
  • Status

    • Badge
    • Callout
    • Countdown
    • Empty state
    • Meter
    • Progress
    • Skeleton
    • Sparkline
    • StatTile
  • Media & brand

    • Avatar
    • Icon Tile
    • Image
    • Logo
    • QR code
    • SpotIllustration
  • Text

    • CalendarTile
    • Code
    • DateTime
    • Duration
    • Highlight
    • Mark
    • Prose

Table

Styled table primitives for any screen.

Import

import { Table } from '@oztix/roadie-components/table'

Examples

Default

<Table>
  <Table.Head>
    <Table.Row>
      <Table.HeaderCell>Show</Table.HeaderCell>
      <Table.HeaderCell align='end'>Sold</Table.HeaderCell>
      <Table.HeaderCell align='end'>Gross</Table.HeaderCell>
    </Table.Row>
  </Table.Head>
  <Table.Body>
    <Table.Row>
      <Table.Cell>Ball Park Music</Table.Cell>
      <Table.Cell align='end'>1,842</Table.Cell>
      <Table.Cell align='end'>$118,400</Table.Cell>
    </Table.Row>
    <Table.Row>
      <Table.Cell>Ocean Alley</Table.Cell>
      <Table.Cell align='end'>2,205</Table.Cell>
      <Table.Cell align='end'>$183,000</Table.Cell>
    </Table.Row>
    <Table.Row>
      <Table.Cell>Julia Jacklin</Table.Cell>
      <Table.Cell align='end'>412</Table.Cell>
      <Table.Cell align='end'>$22,900</Table.Cell>
    </Table.Row>
  </Table.Body>
</Table>

Guidelines

  • Right-align number columns with align='end' on both the header and body cells, so figures line up on their last digit.
  • Use DataTable instead of building a dashboard card by hand. It composes Table with sparklines, meters, deltas and priority columns.

Accessibility

  • Header cells render scope='col', so screen readers announce the column for each cell as they move down a row.

API reference

Table

No additional props. It forwards all standard HTML attributes to the underlying element.

Previous page← MarqueeNext pageBadge →