Table
A styled table for displaying tabular data.
| Name | Status | Role |
|---|---|---|
| Alice Johnson | Active | Designer |
| Bob Smith | Away | Engineer |
| Carol Davis | Active | Product Manager |
<table class="zui-table">
<thead class="zui-table-header">
<tr class="zui-table-row">
<th class="zui-table-head">Name</th>
<th class="zui-table-head">Status</th>
<th class="zui-table-head">Role</th>
</tr>
</thead>
<tbody class="zui-table-body">
<tr class="zui-table-row">
<td class="zui-table-cell">Alice Johnson</td>
<td class="zui-table-cell">Active</td>
<td class="zui-table-cell">Designer</td>
</tr>
<tr class="zui-table-row">
<td class="zui-table-cell">Bob Smith</td>
<td class="zui-table-cell">Away</td>
<td class="zui-table-cell">Engineer</td>
</tr>
<tr class="zui-table-row">
<td class="zui-table-cell">Carol Davis</td>
<td class="zui-table-cell">Active</td>
<td class="zui-table-cell">Product Manager</td>
</tr>
</tbody>
</table>import { Table, TableHeader, TableBody, TableRow, TableHead, TableCell } from '@mrmartineau/zui/react'
<Table>
<TableHeader>
<TableRow>
<TableHead>Name</TableHead>
<TableHead>Status</TableHead>
<TableHead>Role</TableHead>
</TableRow>
</TableHeader>
<TableBody>
<TableRow>
<TableCell>Alice Johnson</TableCell>
<TableCell>Active</TableCell>
<TableCell>Designer</TableCell>
</TableRow>
<TableRow>
<TableCell>Bob Smith</TableCell>
<TableCell>Away</TableCell>
<TableCell>Engineer</TableCell>
</TableRow>
<TableRow>
<TableCell>Carol Davis</TableCell>
<TableCell>Active</TableCell>
<TableCell>Product Manager</TableCell>
</TableRow>
</TableBody>
</Table>---
import { Table, TableHeader, TableBody, TableRow, TableHead, TableCell } from '@mrmartineau/zui/astro'
---
<Table>
<TableHeader>
<TableRow>
<TableHead>Name</TableHead>
<TableHead>Status</TableHead>
<TableHead>Role</TableHead>
</TableRow>
</TableHeader>
<TableBody>
<TableRow>
<TableCell>Alice Johnson</TableCell>
<TableCell>Active</TableCell>
<TableCell>Designer</TableCell>
</TableRow>
<TableRow>
<TableCell>Bob Smith</TableCell>
<TableCell>Away</TableCell>
<TableCell>Engineer</TableCell>
</TableRow>
<TableRow>
<TableCell>Carol Davis</TableCell>
<TableCell>Active</TableCell>
<TableCell>Product Manager</TableCell>
</TableRow>
</TableBody>
</Table>import { Table, TableHeader, TableBody, TableRow, TableHead, TableCell } from '@mrmartineau/zui/solid'
<Table>
<TableHeader>
<TableRow>
<TableHead>Name</TableHead>
<TableHead>Status</TableHead>
<TableHead>Role</TableHead>
</TableRow>
</TableHeader>
<TableBody>
<TableRow>
<TableCell>Alice Johnson</TableCell>
<TableCell>Active</TableCell>
<TableCell>Designer</TableCell>
</TableRow>
<TableRow>
<TableCell>Bob Smith</TableCell>
<TableCell>Away</TableCell>
<TableCell>Engineer</TableCell>
</TableRow>
<TableRow>
<TableCell>Carol Davis</TableCell>
<TableCell>Active</TableCell>
<TableCell>Product Manager</TableCell>
</TableRow>
</TableBody>
</Table><script lang="ts">
import { Table, TableHeader, TableBody, TableRow, TableHead, TableCell } from '@mrmartineau/zui/svelte'
</script>
<Table>
<TableHeader>
<TableRow>
<TableHead>Name</TableHead>
<TableHead>Status</TableHead>
<TableHead>Role</TableHead>
</TableRow>
</TableHeader>
<TableBody>
<TableRow>
<TableCell>Alice Johnson</TableCell>
<TableCell>Active</TableCell>
<TableCell>Designer</TableCell>
</TableRow>
<TableRow>
<TableCell>Bob Smith</TableCell>
<TableCell>Away</TableCell>
<TableCell>Engineer</TableCell>
</TableRow>
<TableRow>
<TableCell>Carol Davis</TableCell>
<TableCell>Active</TableCell>
<TableCell>Product Manager</TableCell>
</TableRow>
</TableBody>
</Table><template>
<Table>
<TableHeader>
<TableRow>
<TableHead>Name</TableHead>
<TableHead>Status</TableHead>
<TableHead>Role</TableHead>
</TableRow>
</TableHeader>
<TableBody>
<TableRow>
<TableCell>Alice Johnson</TableCell>
<TableCell>Active</TableCell>
<TableCell>Designer</TableCell>
</TableRow>
<TableRow>
<TableCell>Bob Smith</TableCell>
<TableCell>Away</TableCell>
<TableCell>Engineer</TableCell>
</TableRow>
<TableRow>
<TableCell>Carol Davis</TableCell>
<TableCell>Active</TableCell>
<TableCell>Product Manager</TableCell>
</TableRow>
</TableBody>
</Table>
</template>
<script setup>
import { Table, TableHeader, TableBody, TableRow, TableHead, TableCell } from '@mrmartineau/zui/vue'
</script>With Caption
| Name | Status | Role |
|---|---|---|
| Alice Johnson | Active | Designer |
| Bob Smith | Away | Engineer |
| Carol Davis | Active | Product Manager |
<table class="zui-table">
<caption class="zui-table-caption">Team members and their current status.</caption>
<thead class="zui-table-header">
<tr class="zui-table-row">
<th class="zui-table-head">Name</th>
<th class="zui-table-head">Status</th>
<th class="zui-table-head">Role</th>
</tr>
</thead>
<tbody class="zui-table-body">
<tr class="zui-table-row">
<td class="zui-table-cell">Alice Johnson</td>
<td class="zui-table-cell">Active</td>
<td class="zui-table-cell">Designer</td>
</tr>
<tr class="zui-table-row">
<td class="zui-table-cell">Bob Smith</td>
<td class="zui-table-cell">Away</td>
<td class="zui-table-cell">Engineer</td>
</tr>
<tr class="zui-table-row">
<td class="zui-table-cell">Carol Davis</td>
<td class="zui-table-cell">Active</td>
<td class="zui-table-cell">Product Manager</td>
</tr>
</tbody>
</table>import { Table, TableCaption, TableHeader, TableBody, TableRow, TableHead, TableCell } from '@mrmartineau/zui/react'
<Table>
<TableCaption>Team members and their current status.</TableCaption>
<TableHeader>
<TableRow>
<TableHead>Name</TableHead>
<TableHead>Status</TableHead>
<TableHead>Role</TableHead>
</TableRow>
</TableHeader>
<TableBody>
<TableRow>
<TableCell>Alice Johnson</TableCell>
<TableCell>Active</TableCell>
<TableCell>Designer</TableCell>
</TableRow>
<TableRow>
<TableCell>Bob Smith</TableCell>
<TableCell>Away</TableCell>
<TableCell>Engineer</TableCell>
</TableRow>
<TableRow>
<TableCell>Carol Davis</TableCell>
<TableCell>Active</TableCell>
<TableCell>Product Manager</TableCell>
</TableRow>
</TableBody>
</Table>---
import { Table, TableCaption, TableHeader, TableBody, TableRow, TableHead, TableCell } from '@mrmartineau/zui/astro'
---
<Table>
<TableCaption>Team members and their current status.</TableCaption>
<TableHeader>
<TableRow>
<TableHead>Name</TableHead>
<TableHead>Status</TableHead>
<TableHead>Role</TableHead>
</TableRow>
</TableHeader>
<TableBody>
<TableRow>
<TableCell>Alice Johnson</TableCell>
<TableCell>Active</TableCell>
<TableCell>Designer</TableCell>
</TableRow>
<TableRow>
<TableCell>Bob Smith</TableCell>
<TableCell>Away</TableCell>
<TableCell>Engineer</TableCell>
</TableRow>
<TableRow>
<TableCell>Carol Davis</TableCell>
<TableCell>Active</TableCell>
<TableCell>Product Manager</TableCell>
</TableRow>
</TableBody>
</Table>import { Table, TableCaption, TableHeader, TableBody, TableRow, TableHead, TableCell } from '@mrmartineau/zui/solid'
<Table>
<TableCaption>Team members and their current status.</TableCaption>
<TableHeader>
<TableRow>
<TableHead>Name</TableHead>
<TableHead>Status</TableHead>
<TableHead>Role</TableHead>
</TableRow>
</TableHeader>
<TableBody>
<TableRow>
<TableCell>Alice Johnson</TableCell>
<TableCell>Active</TableCell>
<TableCell>Designer</TableCell>
</TableRow>
<TableRow>
<TableCell>Bob Smith</TableCell>
<TableCell>Away</TableCell>
<TableCell>Engineer</TableCell>
</TableRow>
<TableRow>
<TableCell>Carol Davis</TableCell>
<TableCell>Active</TableCell>
<TableCell>Product Manager</TableCell>
</TableRow>
</TableBody>
</Table><script lang="ts">
import { Table, TableCaption, TableHeader, TableBody, TableRow, TableHead, TableCell } from '@mrmartineau/zui/svelte'
</script>
<Table>
<TableCaption>Team members and their current status.</TableCaption>
<TableHeader>
<TableRow>
<TableHead>Name</TableHead>
<TableHead>Status</TableHead>
<TableHead>Role</TableHead>
</TableRow>
</TableHeader>
<TableBody>
<TableRow>
<TableCell>Alice Johnson</TableCell>
<TableCell>Active</TableCell>
<TableCell>Designer</TableCell>
</TableRow>
<TableRow>
<TableCell>Bob Smith</TableCell>
<TableCell>Away</TableCell>
<TableCell>Engineer</TableCell>
</TableRow>
<TableRow>
<TableCell>Carol Davis</TableCell>
<TableCell>Active</TableCell>
<TableCell>Product Manager</TableCell>
</TableRow>
</TableBody>
</Table><template>
<Table>
<TableCaption>Team members and their current status.</TableCaption>
<TableHeader>
<TableRow>
<TableHead>Name</TableHead>
<TableHead>Status</TableHead>
<TableHead>Role</TableHead>
</TableRow>
</TableHeader>
<TableBody>
<TableRow>
<TableCell>Alice Johnson</TableCell>
<TableCell>Active</TableCell>
<TableCell>Designer</TableCell>
</TableRow>
<TableRow>
<TableCell>Bob Smith</TableCell>
<TableCell>Away</TableCell>
<TableCell>Engineer</TableCell>
</TableRow>
<TableRow>
<TableCell>Carol Davis</TableCell>
<TableCell>Active</TableCell>
<TableCell>Product Manager</TableCell>
</TableRow>
</TableBody>
</Table>
</template>
<script setup>
import { Table, TableCaption, TableHeader, TableBody, TableRow, TableHead, TableCell } from '@mrmartineau/zui/vue'
</script>With Footer
| Name | Status | Role |
|---|---|---|
| Alice Johnson | Active | Designer |
| Bob Smith | Away | Engineer |
| Carol Davis | Active | Product Manager |
| Total members | 3 | |
<table class="zui-table">
<thead class="zui-table-header">
<tr class="zui-table-row">
<th class="zui-table-head">Name</th>
<th class="zui-table-head">Status</th>
<th class="zui-table-head">Role</th>
</tr>
</thead>
<tbody class="zui-table-body">
<tr class="zui-table-row">
<td class="zui-table-cell">Alice Johnson</td>
<td class="zui-table-cell">Active</td>
<td class="zui-table-cell">Designer</td>
</tr>
<tr class="zui-table-row">
<td class="zui-table-cell">Bob Smith</td>
<td class="zui-table-cell">Away</td>
<td class="zui-table-cell">Engineer</td>
</tr>
<tr class="zui-table-row">
<td class="zui-table-cell">Carol Davis</td>
<td class="zui-table-cell">Active</td>
<td class="zui-table-cell">Product Manager</td>
</tr>
</tbody>
<tfoot class="zui-table-footer">
<tr class="zui-table-row">
<td class="zui-table-cell" colspan="2">Total members</td>
<td class="zui-table-cell">3</td>
</tr>
</tfoot>
</table>import { Table, TableHeader, TableBody, TableFooter, TableRow, TableHead, TableCell } from '@mrmartineau/zui/react'
<Table>
<TableHeader>
<TableRow>
<TableHead>Name</TableHead>
<TableHead>Status</TableHead>
<TableHead>Role</TableHead>
</TableRow>
</TableHeader>
<TableBody>
<TableRow>
<TableCell>Alice Johnson</TableCell>
<TableCell>Active</TableCell>
<TableCell>Designer</TableCell>
</TableRow>
<TableRow>
<TableCell>Bob Smith</TableCell>
<TableCell>Away</TableCell>
<TableCell>Engineer</TableCell>
</TableRow>
<TableRow>
<TableCell>Carol Davis</TableCell>
<TableCell>Active</TableCell>
<TableCell>Product Manager</TableCell>
</TableRow>
</TableBody>
<TableFooter>
<TableRow>
<TableCell colSpan={2}>Total members</TableCell>
<TableCell>3</TableCell>
</TableRow>
</TableFooter>
</Table>---
import { Table, TableHeader, TableBody, TableFooter, TableRow, TableHead, TableCell } from '@mrmartineau/zui/astro'
---
<Table>
<TableHeader>
<TableRow>
<TableHead>Name</TableHead>
<TableHead>Status</TableHead>
<TableHead>Role</TableHead>
</TableRow>
</TableHeader>
<TableBody>
<TableRow>
<TableCell>Alice Johnson</TableCell>
<TableCell>Active</TableCell>
<TableCell>Designer</TableCell>
</TableRow>
<TableRow>
<TableCell>Bob Smith</TableCell>
<TableCell>Away</TableCell>
<TableCell>Engineer</TableCell>
</TableRow>
<TableRow>
<TableCell>Carol Davis</TableCell>
<TableCell>Active</TableCell>
<TableCell>Product Manager</TableCell>
</TableRow>
</TableBody>
<TableFooter>
<TableRow>
<TableCell colspan="2">Total members</TableCell>
<TableCell>3</TableCell>
</TableRow>
</TableFooter>
</Table>import { Table, TableHeader, TableBody, TableFooter, TableRow, TableHead, TableCell } from '@mrmartineau/zui/solid'
<Table>
<TableHeader>
<TableRow>
<TableHead>Name</TableHead>
<TableHead>Status</TableHead>
<TableHead>Role</TableHead>
</TableRow>
</TableHeader>
<TableBody>
<TableRow>
<TableCell>Alice Johnson</TableCell>
<TableCell>Active</TableCell>
<TableCell>Designer</TableCell>
</TableRow>
<TableRow>
<TableCell>Bob Smith</TableCell>
<TableCell>Away</TableCell>
<TableCell>Engineer</TableCell>
</TableRow>
<TableRow>
<TableCell>Carol Davis</TableCell>
<TableCell>Active</TableCell>
<TableCell>Product Manager</TableCell>
</TableRow>
</TableBody>
<TableFooter>
<TableRow>
<TableCell colSpan={2}>Total members</TableCell>
<TableCell>3</TableCell>
</TableRow>
</TableFooter>
</Table><script lang="ts">
import { Table, TableHeader, TableBody, TableFooter, TableRow, TableHead, TableCell } from '@mrmartineau/zui/svelte'
</script>
<Table>
<TableHeader>
<TableRow>
<TableHead>Name</TableHead>
<TableHead>Status</TableHead>
<TableHead>Role</TableHead>
</TableRow>
</TableHeader>
<TableBody>
<TableRow>
<TableCell>Alice Johnson</TableCell>
<TableCell>Active</TableCell>
<TableCell>Designer</TableCell>
</TableRow>
<TableRow>
<TableCell>Bob Smith</TableCell>
<TableCell>Away</TableCell>
<TableCell>Engineer</TableCell>
</TableRow>
<TableRow>
<TableCell>Carol Davis</TableCell>
<TableCell>Active</TableCell>
<TableCell>Product Manager</TableCell>
</TableRow>
</TableBody>
<TableFooter>
<TableRow>
<TableCell colspan="2">Total members</TableCell>
<TableCell>3</TableCell>
</TableRow>
</TableFooter>
</Table><template>
<Table>
<TableHeader>
<TableRow>
<TableHead>Name</TableHead>
<TableHead>Status</TableHead>
<TableHead>Role</TableHead>
</TableRow>
</TableHeader>
<TableBody>
<TableRow>
<TableCell>Alice Johnson</TableCell>
<TableCell>Active</TableCell>
<TableCell>Designer</TableCell>
</TableRow>
<TableRow>
<TableCell>Bob Smith</TableCell>
<TableCell>Away</TableCell>
<TableCell>Engineer</TableCell>
</TableRow>
<TableRow>
<TableCell>Carol Davis</TableCell>
<TableCell>Active</TableCell>
<TableCell>Product Manager</TableCell>
</TableRow>
</TableBody>
<TableFooter>
<TableRow>
<TableCell colspan="2">Total members</TableCell>
<TableCell>3</TableCell>
</TableRow>
</TableFooter>
</Table>
</template>
<script setup>
import { Table, TableHeader, TableBody, TableFooter, TableRow, TableHead, TableCell } from '@mrmartineau/zui/vue'
</script>CSS custom properties
Set these on :root, on a wrapper, or on the element. See Component custom properties.
| Property | Default | Description |
|---|---|---|
--zui-table-border |
oklch(from currentColor l c h / 15%) |
Row, header and footer border colour |
--zui-table-cell-padding |
var(--space-2xs) |
Cell padding |
--zui-table-hover-bg |
oklch(from currentColor l c h / 10%) |
Row background on hover |
--zui-table-selected-bg |
oklch(from currentColor l c h / 25%) |
Background of a row with data-state="selected" |