The Data Grid Collection can be used to display your data in a layout that is similar to the way it appears in the Data Editor. You can even allow users to edit the data straight from the grid view. This can be very useful if you need to display many columns on a single page.
Adding and Setting up a Data Grid Collection
In the Layout Editor of your app, select the tab you want to edit.
Click on the plus (+) symbol in the Components panel.
Find Collections in the menu and select Data Grid.
In the General tab on the right side of the Layout Editor, locate the Columns section. To add columns to your Data Grid, click the +Add item button. You can add as many columns as you like.
For each item (or column) that you add, you can configure the Title, Value, and Display as properties.
Title is the column header. By default this will be the name of the column.
Value is the underlying value from your Data Source
Display as can be used to display the values in the column in a different format.
In the Options menu, you can Limit the number of items in your Data Grid, include Row markers (or row numbers for every row that is shown), and configure the Page Size.
Data Grid Actions
Adding Items
If you’d like users to add rows to your Data Grid, you can configure an action in the Title Bar above your collection. In the Actions tab on the right side of the Layout Editor, toggle on Allow users to add items. This will create a Show Form Screen action that you can configure.
Inline Editing
The Data Grid can display static data, but you can also allow users to edit data directly from the grid. This can be done in two ways:
Enable editing of all Basic Columns: In the Actions tab on the right side of the Layout Editor, toggle on Allow users to edit items.
Enable editing of specific columns, but not others: In the Actions tab on the right side of the Layout Editor, Enable advanced actions. Once advanced actions are enabled, any Basic Columns that are added as items in your Data Grid will include a checkbox to allow editing on that specific column.
If the Editable checkbox is selected for an item in your Data Grid, it can be edited by any of your users. If you’d like to give editing access for specific items to specific users, you may need to include multiple Data Grid collections with different Visibility Conditions so that only designated users can access the editable collection.
Only Basic Columns can be edited by users. Computed Columns cannot be edited directly from the Data Grid.
Deleting Items
By default, users cannot delete rows from your Data Grid. If you’d like to allow the deletion of rows, you can toggle on Allow users to delete items. This will add a checkbox in the far left column of your Data Grid. Once a row is selected, it can be deleted by pressing the delete key on your keyboard.
It’s important to note that if a row is deleted from your Data Grid, it is also deleted from your data source. This includes all the data associated with this row in your data source, not just the columns displayed in the Data Grid.