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
| Name | Description | Default |
|---|---|---|
| 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
| Name | Description |
|---|---|
| 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 |