TanStack Table (Depreciated)
Depreciated
TanStack Table has been depreciated and will be removed in the future. Please use the AgGrid Table or Database Studio components instead.
The table component allows you to display a table.
Guide
If you are new to Tables, check out our Introduction guide.
The following section details Table component's specific settings. For more details on the App editor, check the dedicated documentation or the App editor Quickstart:
App editor Documentation
The app editor is a low-code builder to create custom User Interfaces with a mix of drag-and-drop and code.
Apps quickstart
Learn how to build your first app in a matter of minutes.
Table Input
| Type | Connectable | Templatable | Default | Description |
|---|---|---|---|---|
Array<Object> | true | false | The table data. |
info
The columns are automatically generated from all the keys of the objects in the array.
Controls
This component can be controlled by frontend scripts using these functions:
- setSelectedIndex: Use the
setSelectedIndexfunction to select a row in a table or an AG Grid table.
Table configuration
| Name | Type | Connectable | Templatable | Default | Description |
|---|---|---|---|---|---|
| search | 'Disabled', 'By Runnable', 'By component' | false | false | 'Disabled' | The search query to filter the table. |
| Download button | boolean | false | false | false | Whether to display a download button. |
| Initial state | object | false | false | The initial state of the table: any configuration that can be passed to the tanstack table component as initial state (https://tanstack.com/table/v8/docs/api/core/table#initialstate) | |
| Select First Row By Default | boolean | false | false | false | Whether you want the first row to be selected by default. |
Search can be configured in the following ways:
- Disabled: The search is disabled.
- By Runnable: The search is done in the backend.
- By component: The search is done in the frontend.
Table actions
Table can define actions that will be displayed in each row of the table. An action is a Button component that cannot be moved.
Outputs
| Name | Type | Description |
|---|---|---|
| result | Object | The table data. |
| loading | boolean | The loading state of the table component |
| selectedRow | Object | The selected row |
| selectedRowIndex | number | The selected row index |
| search | string | The search query |