Layout Components

Table

Renders semantic table markup with Table, Thead, Tbody, Tfoot, Tr, Th, Td, and Caption. The size prop cascades from the table to every cell, and a cell or row can override it.

Source Edit this page

Basic usage

Compose a table from Table, Thead, Tbody, Tr, Th, and Td. Header cells (Th) render semibold with muted text, and every cell gets a bottom row rule. Table defaults to md, wFull, and noBorder. Add scope="col" to header cells so assistive technology associates each column with its data.

Service	Region	Latency
api-gateway	europe-west	42ms
auth	us-east	88ms

<Table>
  <Thead>
    <Tr>
      <Th scope="col">Service</Th>
      <Th scope="col">Region</Th>
      <Th scope="col" textRight>Latency</Th>
    </Tr>
  </Thead>
  <Tbody>
    <Tr>
      <Td>api-gateway</Td>
      <Td>europe-west</Td>
      <Td textRight>42ms</Td>
    </Tr>
    <Tr>
      <Td>auth</Td>
      <Td>us-east</Td>
      <Td textRight>88ms</Td>
    </Tr>
  </Tbody>
</Table>

Sizes

The size prop scales both text and cell padding, and it cascades from the table to every cell. Set it once on Table to size the whole table: xs, sm, md (default), lg, xl.

Size	Value
sm table	compact

Size	Value
md table	default

Size	Value
lg table	spacious

<Stack>
  <Table sm>
    <Thead><Tr><Th scope="col">Size</Th><Th scope="col" textRight>Value</Th></Tr></Thead>
    <Tbody><Tr><Td>sm table</Td><Td textRight>compact</Td></Tr></Tbody>
  </Table>
  <Table>
    <Thead><Tr><Th scope="col">Size</Th><Th scope="col" textRight>Value</Th></Tr></Thead>
    <Tbody><Tr><Td>md table</Td><Td textRight>default</Td></Tr></Tbody>
  </Table>
  <Table lg>
    <Thead><Tr><Th scope="col">Size</Th><Th scope="col" textRight>Value</Th></Tr></Thead>
    <Tbody><Tr><Td>lg table</Td><Td textRight>spacious</Td></Tr></Tbody>
  </Table>
</Stack>

Per-cell and per-row size

A size on a Th, Td, or Tr overrides the table for that cell or row. Here an xs table keeps one xl cell and one lg row. An explicit md cell also holds md against a differently sized table.

Metric	xl cell
tiny row	large
lg row	lg row

<Table xs>
  <Thead><Tr><Th scope="col">Metric</Th><Th scope="col" xl textRight>xl cell</Th></Tr></Thead>
  <Tbody>
    <Tr><Td>tiny row</Td><Td xl textRight>large</Td></Tr>
    <Tr lg><Td>lg row</Td><Td textRight>lg row</Td></Tr>
  </Tbody>
</Table>

Column alignment

Set textLeft (default), textCenter, or textRight per cell. Right-align numeric columns so the digits line up.

Plan	Seats	Price
Starter	3	$0
Team	25	$99
Business	100	$499

<Table>
  <Thead>
    <Tr>
      <Th scope="col">Plan</Th>
      <Th scope="col" textCenter>Seats</Th>
      <Th scope="col" textRight>Price</Th>
    </Tr>
  </Thead>
  <Tbody>
    <Tr><Td>Starter</Td><Td textCenter>3</Td><Td textRight>$0</Td></Tr>
    <Tr><Td>Team</Td><Td textCenter>25</Td><Td textRight>$99</Td></Tr>
    <Tr><Td>Business</Td><Td textCenter>100</Td><Td textRight>$499</Td></Tr>
  </Tbody>
</Table>

Footer row

Add a Tfoot for totals or summary rows. Header cells (Th) carry the semibold treatment, so they read well for a total.

Item	Amount
Compute	$120
Storage	$30
Total	$150

<Table>
  <Thead>
    <Tr><Th scope="col">Item</Th><Th scope="col" textRight>Amount</Th></Tr>
  </Thead>
  <Tbody>
    <Tr><Td>Compute</Td><Td textRight>$120</Td></Tr>
    <Tr><Td>Storage</Td><Td textRight>$30</Td></Tr>
  </Tbody>
  <Tfoot>
    <Tr><Th scope="row">Total</Th><Th textRight>$150</Th></Tr>
  </Tfoot>
</Table>

Caption

Caption renders a <caption> element that titles the table for screen readers. Its text follows the table size and accepts its own size to override.

Monthly active users by region
Region	Users
Europe	18,400
North America	22,100

<Table>
  <Caption>Monthly active users by region</Caption>
  <Thead>
    <Tr><Th scope="col">Region</Th><Th scope="col" textRight>Users</Th></Tr>
  </Thead>
  <Tbody>
    <Tr><Td>Europe</Td><Td textRight>18,400</Td></Tr>
    <Tr><Td>North America</Td><Td textRight>22,100</Td></Tr>
  </Tbody>
</Table>

Outer border

Table has no border by default. Add border for an appearance-colored outer border. The table uses collapsed borders, so the corners stay square and there is no shape prop.

Name	Role
Ada	Engineer
Grace	Architect

<Table border>
  <Thead><Tr><Th scope="col">Name</Th><Th scope="col">Role</Th></Tr></Thead>
  <Tbody>
    <Tr><Td>Ada</Td><Td>Engineer</Td></Tr>
    <Tr><Td>Grace</Td><Td>Architect</Td></Tr>
  </Tbody>
</Table>

Components in cells

Cells accept any VaneUI component. Drop a Badge into a status column.

Service	Region	Status
api-gateway	europe-west	Healthy
worker	us-east	Degraded
scheduler	us-east	Down

<Table>
  <Thead>
    <Tr><Th scope="col">Service</Th><Th scope="col">Region</Th><Th scope="col">Status</Th></Tr>
  </Thead>
  <Tbody>
    <Tr>
      <Td>api-gateway</Td>
      <Td>europe-west</Td>
      <Td><Badge success filled>Healthy</Badge></Td>
    </Tr>
    <Tr>
      <Td>worker</Td>
      <Td>us-east</Td>
      <Td><Badge warning filled>Degraded</Badge></Td>
    </Tr>
    <Tr>
      <Td>scheduler</Td>
      <Td>us-east</Td>
      <Td><Badge danger filled>Down</Badge></Td>
    </Tr>
  </Tbody>
</Table>

Customizing

Set table defaults with ThemeProvider's themeDefaults. The table node has a slot for each part: main, thead, tbody, tfoot, tr, th, td, and caption.

Compact by default
Set the size once on the provider

<ThemeProvider themeDefaults={{
  table: { main: { sm: true } },
}}>
  <Table>
    <Thead><Tr><Th scope="col">Compact by default</Th></Tr></Thead>
    <Tbody><Tr><Td>Set the size once on the provider</Td></Tr></Tbody>
  </Table>
</ThemeProvider>

Table Props

Prop	Category	Default	Description
`accent`	Appearance		Accent color appearance (rose)
`brand`	Appearance		Brand color appearance (blue)
`danger`	Appearance		Danger color appearance (red)
`info`	Appearance		Info color appearance (cyan)
`inherit`	Appearance		Inherit appearance from parent — suppresses own data-appearance/data-variant, uses parent's CSS variables
`link`	Appearance		Link color appearance (blue, for hyperlinks)
`primary`	Appearance		Primary color appearance (gray)
`secondary`	Appearance	✓	Secondary color appearance (gray)
`success`	Appearance		Success color appearance (green)
`tertiary`	Appearance		Tertiary color appearance
`warning`	Appearance		Warning color appearance (amber)
`margin`	Margin		Enable margin on all sides
`marginB`	Margin		Enable only bottom margin
`marginT`	Margin		Enable only top margin
`marginX`	Margin		Enable only horizontal (inline) margin
`marginY`	Margin		Enable only vertical (block) margin
`noMargin`	Margin		Disable margin (reset to 0)
`lg`	Size		Large size
`md`	Size	✓	Medium size (default)
`sm`	Size		Small size
`xl`	Size		Extra large size
`xs`	Size		Extra small size
`textCenter`	Text Align		Align text to center
`textEnd`	Text Align		Align text to the reading-direction end (right in LTR, left in RTL)
`textJustify`	Text Align		Justify text
`textLeft`	Text Align		Align text to left (physical side, does not flip under RTL)
`textRight`	Text Align		Align text to right (physical side, does not flip under RTL)
`textStart`	Text Align		Align text to the reading-direction start (left in LTR, right in RTL)
`filled`	Variant		Filled variant - solid background with contrasting text color
`ghost`	Variant		Ghost variant - transparent background, no border, appearance-colored text, tinted hover background
`outline`	Variant	✓	Outline variant - transparent background with border and colored text (default)

Layout & utility props (gap, padding, hide, items, justify, ...) — documented on Common Props

Prop	Category	Default	Description
`border`	Border		Enable border on all sides
`borderB`	Border		Enable border on bottom
`borderE`	Border		Enable border on the inline-end side (right in LTR, left in RTL)
`borderL`	Border		Enable border on left
`borderR`	Border		Enable border on right
`borderS`	Border		Enable border on the inline-start side (left in LTR, right in RTL)
`borderT`	Border		Enable border on top
`borderX`	Border		Enable border on left and right
`borderY`	Border		Enable border on top and bottom
`noBorder`	Border	✓	Disable all borders
`desktopHide`	Hide		Hide element on desktop devices and below (max-desktop: 80rem)
`mobileHide`	Hide		Hide element on mobile devices and below (max-mobile: 48rem)
`tabletHide`	Hide		Hide element on tablet devices and below (max-tablet: 64rem)
`responsive`	Responsive		Enable responsive sizing - uses breakpoint-specific classes for font size, padding, and gap
`wAuto`	Width		Set width to auto
`wFit`	Width		Set width to fit-content
`wFull`	Width	✓	Set width to 100%
`wScreen`	Width		Set width to 100vw (viewport width), removes max-width constraint