Table

Basic usage

A Table displays a list of data rows for each column. The column must contain an accessor - a string or function that returns a string that links the column to a key in a data row that should be displayed for that column.
Loading view...

Task backed

A Table can be backed by an Airplane Task rather than hardcoding the columns and data. Set the task prop to call an Airplane task. The columns and data are automatically inferred from the output of the task.
Loading view...

Customizing data and columns

The columns of a Task backed Table can be customized. Any column information provided via the column prop override the column information inferred from the Task output.
The data of a Task backed Table can be transformed with the outputTransform prop. This prop is a function that receives the Table data and returns new data.
Loading view...

Row selection

Single selection

Single row selection is enabled by setting the rowSelection prop to single. The selected row can be accessed using the selectedRow field on the component state.
Loading view...

Multi selection

Multi row selection is enabled by setting the rowSelection prop to checkbox. The selected rows can be accessed using the selectedRows field on the component state.
Loading view...

Row actions

Row actions are buttons (or other UI) that appear on each row and can take action on that row. Specify to rowActions prop to add an action to every row. This prop is a function that takes a row and returns the row action component.
Loading view...

Task backed row actions

Row actions can call Airplane tasks. Use a task as the row action to generate a button that calls a Task.
Loading view...

Transforming parameters for row actions

If a row's data doesn't match the parameters for a task backed row action, you can use the rowTransform parameter to make it match.
Loading view...

Row action confirmation dialog

To show a confirmation dialog before the row action's action (onClick or task) is executed, set the confirm prop.
The dialog title, body, and buttons can be customized.

Column types

While column types can often be inferred automatically, they can also be manually specified with the column. Different column types are rendered and sorted differently.
Loading view...

Custom components

The component field in the column definition can be used to render custom components in the cells for a column.
Loading view...
If using custom components, make sure that they are defined outside of the component you are using them in. Components defined inline will be re-created on every render, causing performance issues.

Editing rows

Table rows can be edited by setting a column's canEdit field to true.
Use a more specific column type to customize the editable UI.
Loading view...

Component API

NameDescriptionDefault
task
string | { slug: string; params?: Record<string, any>; executeOnMount?: boolean; executeOnWindowFocus?: boolean; executeOnReconnect?: boolean; enabled?: boolean; refetchInterval?: number; onSuccess?: (output?: TOutput) => void; onFailure?: (output?: TOutput, error?: TError) => void; }
The task query to execute when this component loads. The component's data will be populated by the task's output. If the task doesn't require any parameters or special options, you can just pass the task slug as a string. Otherwise, create an object with the given params, and set slug to the task slug.
If the task requires parameters, these can be passed in via params.
The executeOnMount, executeOnWindowFocus, and executeOnReconnect params control when the task is (re)run - on component mount, when the window is (re)focused, and if the network reconnects. All of these options are true by default.
The enabled param can be set to false to disable running the task query automatically.
The refetchInterval param represents how often (in milliseconds) the task query should be rerun to refetch data automatically. By default, the task will not automatically refetch data on a millisecond timer (though it may still refetch data on window refocus or network reconnect).
The onSuccess and onFailure callbacks will run on task success or failure. Note that depending on execute or refetch settings, task queries may be run repeatedly, which can trigger these callbacks multiple times.
outputTransform
(output: TOutput) => TRowData[]
Callback to transform the task output
id
string
The ID referenced by the global component state
defaultSelectedRows
TRowData[]
The selected rows on initial render
rowActions
( string | { slug: string; label?: string; rowTransform?: (row: TRowData) => TParams; confirm?: boolean | { title?: React.ReactNode | string; cancelText?: string; confirmText?: string; body: React.ReactNode | string; }; onSuccess?: () => void, onFailure?: (error?: TError) => void, refetchTasks?: RefetchQuery | RefetchQuery[], } | (props: { row: TRowData }) => JSX.Element )[]
Adds custom components to the end of each row
columns
Column<TRowData>[]
Columns that are merged into columns inferred from the data
columnsTransform
(columns: Column<TRowData>[]) => Column<TRowData>[]
Callback to transform the columns. This can be used to customize any inferred columns.
onRowSelectionChanged
(rows: TRowData[]) => void
Callback on row select
rowSelection
"checkbox" | "single"
"single" enables selection of single row while "checkbox" adds a checkbox one each row and enables selection of multiple rows
loading
boolean
Renders a loading indicator when true
selectedRows
TRowData[]
Selects the provided rows
defaultPageSize
number
Sets the page size on initial render
10
error
string
Renders an error message
noData
string
The message to display when the table has no data
title
string
Sets the title above the table
hiddenColumns
string[]
Columns to hide in the table. Reference columns using the column accessor, or the inferred output field for task backed tables.
shownColumns
string[]
If set, only columns in this list are shown. Columns that are in both hiddenColumns and shownColumns are hidden. Reference columns using the column accessor, or the inferred output field for task backed tables.
showFilter
boolean
Allows for global filtering when true
true
width
number | "content" | "auto" | `${number}%` | `${number}/${number}` | { xs?: ColWidth; sm?: ColWidth; md?: ColWidth; lg?: ColWidth; xl?: ColWidth; }
Width of the component. This component must be a direct child of a <Stack> for this prop to take effect. If an integer is specified, signifies the width in a 12 item grid. 12 means that the component takes up the entire row, 6 is half, 1 is 1/12. If a decimal or fraction is specified, signifies the fractional share of the row. e.g. 1/2 takes up half of the row. If a percentage is specified, signifies the percentage share of the row. e.g. "50%" takes up half of the row. content indicates that the component should take up as much space as its content. auto indicates that the component should take any leftover space on the row. To set width based on the screen size, use an object with a specific width for each breakpoint. e.g. {xs: "100%", md: "50%"} sets the width on xs-md screens to 100% and md and larger screens to 50%.
content
offset
number | `${number}%` | `${number}/${number}` | { xs?: ColOffset; sm?: ColOffset; md?: ColOffset; lg?: ColOffset; xl?: ColOffset; }
Creates a gap to the left of the component. Has the same units as width. This component must be a direct child of a <Stack> for this prop to take effect. If an integer is specified, signifies the offset in a 12 item grid. 6 means the component is offset by half a row, 1 is 1/12 of a row. If a decimal or fraction is specified, signifies the fractional share of the row. e.g. 1/2 offsets a component by half of the row. If a percentage is specified, signifies the percentage share of the row. e.g. "50%" offsets a component by half of the row. To set offset based on the screen size, use an object with a specific offset for each breakpoint. e.g. {xs: "50%", md: "0%"} sets the offset on xs-md screens to 50% and md and larger screens to 0%.
data
TRowData[]
The data, or rows, to display in the table

State API

NameDescription
selectedRows
TRowData[]
Rows that have been selected
selectedRow
TRowData
A single row that has been selected. Only applicable for rowSelection="single"
rowActionResult
{ output?: TOutput; loading?: boolean; error?: ExecuteTaskError }
The result of the latest executed row action
clearSelection
() => void
Clears all selected rows