Table
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.
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 |