Table

Use bo-table when columns and rows are data-driven. Columns define the order and alignment of the headers and cells; rows provide values by column key. Cell and action slots let you add presentation without changing the data model.

Basic Usage

columns and rows are required. Add caption to describe the table, and wrap very wide tables in an overflow container when the surrounding layout is narrow.

Projects

Project

Owner

Status

Bamboo docs

Mina

Ready

Design tokens

Alex

In review

Website

Sam

Draft

<bo-table>
  :columns="columns"
  :rows="rows"
  striped
  bordered
  caption="Projects"
/>

Aligned Headers and Columns

Set align on each column to align both its header and its cells. Set width to a percentage of the table width; column widths are defined directly on each column object and should total 100. Supported alignments are start, center, and end.

Aligned project data

Project

Owner

Status

Bamboo docs

Mina

Ready

Design tokens

Alex

In review

Website

Sam

Draft

<bo-table>
  :columns="columns"
  :rows="rows"
  striped
  bordered
  caption="Projects"
/>

Cell Slots

Cell slots use the naming pattern cell-{key}. Each slot receives value, row, and index; values without a matching slot render as text.

Projects

Project

Owner

Status

Bamboo docs

Mina

Ready

Design tokens

Alex

In review

Website

Sam

Draft

<bo-table :columns="columns" :rows="rows" caption="Projects">
  <template #cell-status="{ value }">
    <span class="font-medium">{{ value }}</span>
  </template>
  <template #cell-owner="{ value }">
    <span class="text-neutral-500">{{ value }}</span>
  </template>
</bo-table>

Built-In Row Actions

Pass actions to render a final actions column. Each action can define a label, accessible label, button variant, button kind, disabled state, and onClick callback.

Projects

Project

Owner

Status

Project actions

Bamboo docs

Mina

Ready

Design tokens

Alex

In review

Website

Sam

Draft

No row action selected

<bo-table>
  :columns="columns"
  :rows="rows"
  :actions="actions"
  actions-label="Project actions"
  caption="Projects"
/>

Actions Slot

Use the actions scoped slot when the row action layout needs custom content. It receives the configured actions, row, and row index. A table with this slot still renders an actions column even when the actions prop is empty.

Projects

Project

Owner

Status

Actions

Bamboo docs

Mina

Ready

Design tokens

Alex

In review

Website

Sam

Draft

No row action selected

<bo-table :columns="columns" :rows="rows" caption="Projects">
  <template #actions="{ row }">
    <bo-button size="sm" kind="outline" @click="actionMessage = String(row.name)">
      Inspect
    </bo-button>
  </template>
</bo-table>

Empty State

When rows is empty, the table renders one empty row spanning all columns. Replace the default No results. text with the empty slot.

Projects

Project

Owner

Status

No projects match this filter.

<bo-table :columns="columns" :rows="emptyRows" caption="Projects">
  <template #empty>No projects match this filter.</template>
</bo-table>

Loading-Like State

The current table API has no loading prop or loading slot. While data is being fetched, keep rows empty and use the empty slot for a temporary live message, then replace it with the actual empty state or rows when the request finishes.

Projects

Project

Owner

Status

Loading projects...

<bo-table :columns="columns" :rows="emptyRows" caption="Projects">
  <template #empty>
    <span aria-live="polite">Loading projects...</span>
  </template>
</bo-table>

Usage Guidance

• Keep column keys stable and make them match the keys in every row.
• Add a caption or ariaLabel so the table has a useful accessible name.
• Use cell-{key} for formatting and actions for row-specific commands.
• Use striped and bordered to improve scanning, not as a substitute for clear column labels.

API Reference

Props

Prop	Type	Default	Description
id	string	Autogenerated	The table root id.
dataTestId	string	Autogenerated	The test id attribute.
columns	BoTableColumn[]	required	Ordered column definitions.
rows	Record<string, unknown>[]	required	Data rows keyed by column key.
caption	string	-	Visible table caption.
striped	boolean	false	Applies alternating row backgrounds.
bordered	boolean	false	Adds cell borders.
ariaLabel	HTMLAttributes['aria-label']	-	Accessible table name.
actions	BoTableAction[]	[]	Built-in actions rendered in a final column.
actionsLabel	string	Actions	Header label for the actions column.

BoTableColumn

Field	Type	Default	Description
key	string	required	Row property used for the column.
label	string	required	Header text.
align	'start' | 'center' | 'end'	start	Header and cell alignment.
width	number	-	Column width as a percentage of the table width.

BoTableAction

Field	Type	Default	Description
label	string	required	Button label.
ariaLabel	string	label	Accessible button name.
variant	BoButtonVariant	-	Button color variant.
kind	BoButtonKind	-	Button surface kind.
disabled	boolean	false	Disables the action.
onClick	(row, index) => void	-	Callback invoked with the row and index.

Slots

Name	Props	Description
cell-{key}	{ value, row, index }	Custom content for a data column.
actions	{ actions, row, index }	Custom content for a row actions cell.
empty	-	Content for an empty rows array.