Database studio

This component allows you to create a database studio. The database studio is a web-based database management tool. It allows you to display and edit the content of a database. It uses Ag Grid to display the table.

For simple data display, check out the Table component or the Ag Grid component.

The following section details Database studio'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.

Features

• Display the content of a table.
• Edit the content of a table by directly editing the cells (only when the cell is editable).
• Add a new row: The form is automatically generated based on the column definitions, and the default values are automatically set. The form opens in a drawer.
• Delete a row: The delete button is displayed on the right of the row. The delete button is only displayed if the Allow delete property is set to true.

Controls

recompute: frontend script helper to recompute the component on demand or automatically.

Configuration

The component can be configured with the following properties:

• Type: Either PostgreSQL, MySQL, MS SQL, Snowflake or BigQuery.
• Resource: The actual resource from the above resource type.
• Table: The table to use. Once the resource is selected, the list will be populated with the tables available in the database.

Once a resource is selected, you can explore the schema: It will open a drawer the schema of the database.

Column definition

When the table is selected, the column definitions will automatically synchronize with the columns of the table.

The column can be configured with the following properties:

• Skip for select and update: By default, all columns are included in the select and update queries. If you want to exclude a column from the select and update queries, you can set this property to true. You cannot skip a primary key.

• Hide from insert: By default, all columns are used to generate the submit form. If you want to exclude a column from the submit form, you can set this property to true. If the column is not nullable or doesn't have a default value, a default value will be required.

• Default input: By default, all columns are used to generate the submit form. If you want to exclude a column from the submit form, you can set this property to true. If the column is not nullable or doesn't have a default value, a default value will be required.

• Editable value: Whether the value is editable. Is overriden by the All editable property on the table.

Furthermore, each column exposes the same configuration as the Ag Chart column definition.

Ag Grid column definition

In this guide, learn how to configure the column definitions

Ag Grid

Learn how to use the Ag Grid table

Database studio configuration

The database studio uses the same configuration as the Ag Chart, expect for the following property.

Name	Type	Connectable	Templatable	Default	Description
Where Clause	string	true	false	Empty	In PostgreSQL, to add additional constraints to the Where clause.
Flex	boolean	true	false	true	Default col flex is 1 (see AgGrid docs).
All Editable	boolean	true	false	false	Allow deleting rows.
Allow Delete	boolean	true	false	false	Whether row deletion is enabled.
Multiple Selectable	boolean	true	false	false	Make multiple rows selectable at once.
Row Multiselect With Click	boolean	true	false	true	Allow multiselect with click.
Select First Row by Default	boolean	true	false	true	Select the first row by default on start.
Extra Config	object	true	false	{}	Any configuration that can be passed to ag-grid top level.
Hide Insert	boolean	true	false	false	Hide the insert button.
Hide Search	boolean	true	false	false	Hide the search bar.

Ag Grid

Learn how to use the Ag Grid table