Data Display@knitui/components

Table

Table is a compound component that renders structured data. Use the data prop for a quick data-driven table, or compose Table.Thead, Table.Tbody, Table.Tfoot, Table.Tr, Table.Th, Table.Td, and Table.Caption for full control. Boolean flags withTableBorder, withColumnBorders, withRowBorders, striped, and highlightOnHover toggle common visual treatments. Cell padding is tuned via horizontalSpacing and verticalSpacing.

WebiOSAndroid8 style slots9 own props11 examples

Stories Source Tests Open in Storybook

import { Table } from "@knitui/components";

Playground

Loading playground…

withTableBorderDraws a border around the outer table.

false

withColumnBordersDraws borders between columns.

false

withRowBordersDraws borders between rows.

true

stripedStripe rows. `true` is equivalent to `"odd"`.

highlightOnHoverHighlights the row under the pointer.

false

horizontalSpacingHorizontal cell padding — token name or number.

verticalSpacingVertical cell padding — token name or number.

captionSidePlacement of the caption.

shadowElevation — drop shadow from the shared ladder.

Playground

<Table
  withTableBorder={false}
  withColumnBorders={false}
  withRowBorders
  striped={false}
  highlightOnHover={false}
  horizontalSpacing="xs"
  verticalSpacing="xs"
  captionSide="bottom"
/>

Examples

Compound API

Compound API — Table.Thead, Table.Tbody, Table.Tfoot, Table.Tr, Table.Th, Table.Td.

Loading example…

Compound APISource Storybook

Data Prop

Data-driven shorthand via the data prop — no JSX children required.

Loading example…

Data PropSource Storybook

All Borders

Outer table border, column borders, and row borders all enabled together.

Loading example…

All BordersSource Storybook

Striped

Alternating row background — striped="odd" shades the first, third… rows.

Loading example…

StripedSource Storybook

Highlight On Hover

Rows highlight on pointer hover — useful for large scannable tables.

Loading example…

Highlight On HoverSource Storybook

Caption Top

Caption placed above the table via captionSide="top".

Loading example…

Caption TopSource Storybook

Custom Spacing

Custom spacing — wider horizontal padding and taller rows for a spacious layout.

Loading example…

Custom SpacingSource Storybook

Styles

Per-slot styles targets individual parts — here the th, td and table.

Loading example…

StylesSource Storybook

Shadows

The five shadow levels from the shared elevation ladder, mapped over the scale.

Loading example…

ShadowsSource Storybook

Fully Decorated

All decorative features combined: outer border, column borders, striping, and hover.

Loading example…

Fully DecoratedSource Storybook

Props

Prop	Type	Default	Description
`captionSide`	`"bottom" \| "top" \| undefined` top · bottom	`'bottom'`	Placement of the caption.
`data`	`TableData \| undefined`	—	Render the table from a data object (ignored when `children` is set).
`disabled` system	`boolean \| undefined`	—
`highlightOnHover`	`boolean \| undefined`	`false`	Highlights the row under the pointer.
`horizontalSpacing`	`TableSpacing \| undefined` xxs · xs · sm · md · lg · xl · xxl	`'xs'`	Horizontal cell padding — token name or number.
`shadow` system	`"xs" \| "sm" \| "md" \| "lg" \| "xl" \| "xxs" \| "xxl" \| undefined` unset · xs · sm · md · lg · xl	—	Elevation — drop shadow from the shared ladder.
`striped`	`boolean \| Striped \| undefined` false · true · odd · even	`false`	Stripe rows. `true` is equivalent to `"odd"`.
`styles` system	`SlotStyles<TableStyles> \| undefined`	—	Per-slot style sugar — props spread onto the matching parts (data path).
`theme` system	`ThemeName \| null \| undefined`	—	Applies a theme to this element
`verticalSpacing`	`TableSpacing \| undefined` xxs · xs · sm · md · lg · xl · xxl	`'xs'`	Vertical cell padding — token name or number.
`withColumnBorders`	`boolean \| undefined`	`false`	Draws borders between columns.
`withRowBorders`	`boolean \| undefined`	`true`	Draws borders between rows.
`withTableBorder`	`boolean \| undefined`	`false`	Draws a border around the outer table.

Style slots

Every part of Table can be styled through the styles prop. Explicit props on the component always win over slot styles.

Slot	Usage
`caption`	`styles={{ caption: { … } }}`
`table`	`styles={{ table: { … } }}`
`tbody`	`styles={{ tbody: { … } }}`
`td`	`styles={{ td: { … } }}`
`tfoot`	`styles={{ tfoot: { … } }}`
`th`	`styles={{ th: { … } }}`
`thead`	`styles={{ thead: { … } }}`
`tr`	`styles={{ tr: { … } }}`

Accessibility & DOM props (2)

Prop	Type
`key`	`Key \| null \| undefined`
`ref`	`Ref<TamaguiElement> \| undefined`

Plus 498 inherited style props from Box — the full Tamagui/React Native style surface, including token shorthands like p, mx, bg and c. See Tokens for the scales they accept, or the full list.