Overview
Getting Started
Installation
About
Changelog
Core Concepts
Iconography
Layout
Responsive
Theming
Layout Components
Box
Alpha
Container
Alpha
Grid
Alpha
Flex
Alpha
Components
Avatar
Alpha
Button
Alpha
ButtonIcon
Alpha
ButtonLink
Alpha
Card
Alpha
Checkbox
Alpha
Collapsible
Alpha
Header
Alpha
HeaderPage
Alpha
Icon
Alpha
Link
Alpha
Menu
Alpha
RadioGroup
Alpha
SearchField
Alpha
Select
Alpha
Skeleton
Alpha
Switch
Alpha
Table
Alpha
Tabs
Alpha
TagGroup
Alpha
Text
Alpha
TextField
Alpha
Tooltip
Alpha
Version 0.7.0 - Alpha
Table
component

Table

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

Band nameGenreYear formedAlbums
T
The Beatles

Rock, Pop, Psychedelic Rock

1960

13

L
Led Zeppelin

Hard Rock, Heavy Metal, Blues Rock

1968

9

P
Pink Floyd

Progressive Rock, Psychedelic Rock, Art Rock

1965

15

T
The Rolling Stones

Rock, Blues Rock, Hard Rock

1962

30

Q
Queen

Rock, Hard Rock, Glam Rock

1970

15

1 - 5 of 10

Usage

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

<Table>
  <TableHeader>
    <Column />
  </TableHeader>
  <TableBody>
    <Row>
      <Cell />
      <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
className
string
-No
style
CSSProperties
-No

TablePagination

A pagination component designed to work with the Table component.

PropTypeDefaultResponsive
pageIndex
number
-No
pageSize
number
-No
setPageIndex
(pageIndex: 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

Coming soon.

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.

Changelog