Table — Davaux UI

Default

Name	Role	Status
Alice	Engineer	Active
Bob	Designer	Active
Carol	Manager	Inactive
Dave	Engineer	Active

<Table>
  <Table.Thead>
    <Table.Tr>
      <Table.Th>Name</Table.Th>
      <Table.Th>Role</Table.Th>
      <Table.Th>Status</Table.Th>
    </Table.Tr>
  </Table.Thead>
  <Table.Tbody>
    {rows.map((row) => (
      <Table.Tr key={row.name}>
        <Table.Td>{row.name}</Table.Td>
        <Table.Td>{row.role}</Table.Td>
        <Table.Td>{row.status}</Table.Td>
      </Table.Tr>
    ))}
  </Table.Tbody>
</Table>

Striped rows

Name	Role	Status
Alice	Engineer	Active
Bob	Designer	Active
Carol	Manager	Inactive
Dave	Engineer	Active

<Table striped>...</Table>

Selected rows

Add selected to any <Table.Tr> to apply the themed selected-row highlight.

Name	Role	Status
Alice	Engineer	Active
Bob	Designer	Active
Carol	Manager	Inactive
Dave	Engineer	Active

<Table>
  <Table.Tbody>
    <Table.Tr selected>
      <Table.Td>Alice</Table.Td>
      <Table.Td>Engineer</Table.Td>
      <Table.Td>Active</Table.Td>
    </Table.Tr>
    <Table.Tr>
      <Table.Td>Bob</Table.Td>
      ...
    </Table.Tr>
  </Table.Tbody>
</Table>

With borders and hover

Name	Role	Status
Alice	Engineer	Active
Bob	Designer	Active
Carol	Manager	Inactive
Dave	Engineer	Active

<Table withTableBorder withColumnBorders highlightOnHover>
  ...
</Table>

Table Props

Prop	Type	Default	Description
`striped`	`boolean\|'odd'\|'even'`	—	Applies alternating row background colors
`highlightOnHover`	`boolean`	—	Applies hover background to rows
`captionSide`	`'top'\|'bottom'`	—	Positions the `<caption>` element
`withTableBorder`	`boolean`	—	Adds a border around the entire table
`withColumnBorders`	`boolean`	—	Adds vertical borders between columns
`withRowBorders`	`boolean`	`true`	Shows horizontal borders between rows
`borderColor`	`string`	—	CSS color applied to all table border lines
`horizontalSpacing`	`'xs'\|'sm'\|'md'\|'lg'\|'xl'\|string`	—	Padding left/right of each cell
`verticalSpacing`	`'xs'\|'sm'\|'md'\|'lg'\|'xl'\|string`	—	Padding top/bottom of each cell
`layout`	`'auto'\|'fixed'`	—	CSS `table-layout` algorithm
`class`	`string`	—	Additional CSS class names on `<table>`
`style`	`object`	—	Inline styles

Sub-components

Export	Renders	Description
`Table.Thead` / `TableThead`	`<thead>`	Table header section
`Table.Tbody` / `TableTbody`	`<tbody>`	Table body section
`Table.Tfoot` / `TableTfoot`	`<tfoot>`	Table footer section
`Table.Tr` / `TableTr`	`<tr>`	Table row; accepts `selected` to apply the selected-row highlight
`Table.Th` / `TableTh`	`<th>`	Header cell; accepts `align` and `width`
`Table.Td` / `TableTd`	`<td>`	Data cell; accepts `align` and `width`
`Table.Caption` / `TableCaption`	`<caption>`	Table caption