ComponentsTable
Version 0.10.0

Table

A flexible table component built on top of TanStack Table with built-in styling, interactions, and pagination support.

Band name
Genre
Year formed
Albums
The Beatles

Rock, Pop, Psychedelic Rock

1960

13

Led Zeppelin

Hard Rock, Heavy Metal, Blues Rock

1968

9

Pink Floyd

Progressive Rock, Psychedelic Rock, Art Rock

1965

15

The Rolling Stones

Rock, Blues Rock, Hard Rock

1962

30

Queen

Rock, Hard Rock, Glam Rock

1970

15

1 - 5 of 10

Usage#

import { Cell, CellText, ..., TableHeader, TablePagination } from '@backstage/ui';

<Table>
  <TableHeader>
    <Column />
  </TableHeader>
  <TableBody>
    <Row>
      <CellText title="Example" />
      <CellProfile />
    </Row>
  </TableBody>
</Table>
<TablePagination />

API reference#

Table#

The main table component that renders data in a structured grid format.

PropTypeDefaultResponsive
selectionBehavior
togglereplace
toggleNo
disabledBehavior
selectionall
selectionNo
disabledKeys
Iterable<Key>
-No
selectionMode
singlemultiple
-No
selectedKeys
allIterable<Key>
-No
defaultSelectedKeys
allIterable<Key>
-No
onRowAction
(key: Key) => void
-No
onSelectionChange
(keys: Selection) => void
-No
onSortChange
(descriptor: SortDescriptor) => any
-No
className
string
-No
style
CSSProperties
-No

TableHeader#

The header section of the table that contains the column definitions.

PropTypeDefaultResponsive
onHoverStart
(e: HoverEvent) => void
-No
onHoverEnd
(e: HoverEvent) => void
-No
onHoverChange
(isHovering: boolean) => void
-No
className
string
-No
style
CSSProperties
-No

Column#

A column definition that describes how a column should be rendered.

PropTypeDefaultResponsive
id
Key
-No
allowsSorting
boolean
-No
isRowHeader
boolean
-No
textValue
string
-No
className
string
-No
style
CSSProperties
-No

TableBody#

The body section of the table that contains the rows.

PropTypeDefaultResponsive
renderEmptyState
(props) => ReactNode
-No
className
string
-No
style
CSSProperties
-No

Row#

A row definition that describes how a row should be rendered.

PropTypeDefaultResponsive
textValue
string
-No
isDisabled
boolean
-No
id
Key
-No
href
string
-No
hrefLang
string
-No
target
string
-No
rel
string
-No
onAction
() => void
-No
onHoverStart
(e: HoverEvent) => void
-No
onHoverEnd
(e: HoverEvent) => void
-No
onHoverChange
(isHovering: boolean) => void
-No
onPress
(e: PressEvent) => void
-No
onPressStart
(e: PressEvent) => void
-No
onPressEnd
(e: PressEvent) => void
-No
onPressChange
(isPressed: boolean) => void
-No
onPressUp
(e: PressEvent) => void
-No
className
string
-No
style
CSSProperties
-No

Cell#

A cell definition that describes how a cell should be rendered.

PropTypeDefaultResponsive
id
Key
-No
textValue
string
-No
leadingIcon
ReactNode
-No
className
string
-No
style
CSSProperties
-No

TablePagination#

A pagination component designed to work with the Table component.

PropTypeDefaultResponsive
offset
number
-No
pageSize
number
-No
setOffset
(offset: number) => void
-No
setPageSize
(pageSize: number) => void
-No
rowCount
number
-No
onNextPage
() => void
-No
onPreviousPage
() => void
-No
onPageSizeChange
(pageSize: number) => void
-No
showPageSizeOptions
boolean
-No
className
string
-No
style
CSSProperties
-No

Examples#

Basic Table#

Coming soon.

Row selection#

Tables support row selection with two configuration options: selection mode and selection behavior.

Selection mode

Use selectionMode to control how many rows can be selected. With single, only one row can be selected at a time. With multiple, any number of rows can be selected, and a header checkbox provides select-all functionality.

Name
Owner
Type

Component Library

Design System

library

API Gateway

Platform

service

Documentation Site

DevEx

website

Selection mode:

Selection behavior

Use selectionBehavior to control how selection is indicated and interacted with. With toggle, checkboxes appear for selection. With replace, selection is indicated by row background color—click to select, Cmd/Ctrl+click for multiple.

Name
Owner
Type

Component Library

Design System

library

API Gateway

Platform

service

Documentation Site

DevEx

website

Selection behavior:

With row actions

With toggle behavior, clicking a row triggers its action when nothing is selected. Once any row is selected, clicking toggles selection instead.

With replace behavior, clicking selects the row and double-clicking triggers the action.

Name
Owner
Type

Component Library

Design System

library

API Gateway

Platform

service

Documentation Site

DevEx

website

Row Clicks#

Coming soon.

Pagination#

Coming soon.

Sorting#

Coming soon.

Asynchronous loading#

Coming soon.

Empty state#

Coming soon.

Column resizing#

This feature is not available yet — let us know if you'd like us to explore it!

Column reordering#

This feature is not available yet — let us know if you'd like us to explore it!

Column pinning#

This feature is not available yet — let us know if you'd like us to explore it!

Column visibility#

This feature is not available yet — let us know if you'd like us to explore it!

Theming#

Our theming system is based on a mix between CSS classes, CSS variables and data attributes. If you want to customise this component, you can use one of these class names below.

  • bui-Table
  • bui-TableHeader
  • bui-TableBody
  • bui-TableRow
  • bui-TableHead
  • bui-TableHeadContent
  • bui-TableHeadSortButton
  • bui-TableCaption
  • bui-TableCell
  • bui-TableCellContentWrapper
  • bui-TableCellContent
  • bui-TableCellIcon
  • bui-TableCellProfileAvatar
  • bui-TableCellProfileAvatarImage
  • bui-TableCellProfileAvatarFallback
  • bui-TableCellProfileName
  • bui-TableCellProfileLink
  • bui-TableHeadSelection
  • bui-TableCellSelection

Changelog#

  • 0.9.0 - Migrated CellProfile component from Base UI Avatar to Backstage UI Avatar component. #31608
  • 0.9.0 - Fixed Table Row component to properly support opening links in new tabs via right-click or Cmd+Click when using the href prop. #31680
  • 0.8.0 - Fix table sorting icon position in Backstage UI. #31393
  • 0.7.0 - We are moving our DataTable component to React Aria. We removed our DataTable to only use Table as a single and opinionated option for tables. This new structure is made possible by using React Aria under the hood. #30654
  • 0.7.0 - We are moving our DataTable component to React Aria. We removed our DataTable to only use Table as a single and opinionated option for tables. This new structure is made possible by using React Aria under the hood. #30654