Working with Table Grid Control

In this article, we will dive into working with the Table Grid control of the studio and look into its various functionalities and operations to handle data from the database.

The Table grid control is a Display control that is used to fetch the data from a Sheet or connector or any other data source and display the contents in a tabular grid format. You can read about properties and using table grid control from here.

Prerequisite

You should have a studio account and be familiar with using controls. You will need data to display and work with, in the table grid control. We will be using the PostgreSQL connector to connect to the database.

Fetching data for table grid

There are several options under the Bind Data section of the table grid control which enable us to bind/fetch data to the table grid.

We will use Connectors to fetch the data. Choose Connector > Select Connector and now select the connector which contains your database.

After selecting the query to get all the data, choose the environment. Now, select the columns to bind as keys in the table grid control.

Click Test & Finish .

You can now view the changes in the table grid control in the builder view itself with new data.

Select format types for columns

When you save the data in the table grid control, the formats of each column can be changed manually using the Bind data > Format data option.

Once you have done data formatting click Finish. You can view instant changes in the format of data with respect to the columns of the table grid control in the builder view itself.

You can check out different formats of columns and more in this article.

Table grid columns’ reordering and visibility

From the Top Bar properties, you can enable Column reorder and visibility under the Buttons section. This helps to reorder the columns and toggle the visibility of columns on the client-side of the app.

With this property, you can make any column invisible in app but you have to make sure that if the visibility of the columns during configuration is set to off then it won’t be visible in the client-side app to toggle it on for visibility.

Data presentation – Filter, Quick Filter, and Sorting

Presentation of data in table grid according to user’s requirement has a critical role to provide maximum output with ease and rapidity.

In the table grid, from the Top Bar properties, you can enable filter, quick filter, and sorting under the Buttons section. Each one provides different ways to present data.

Using the Filter toggle, you can refine the details to be displayed in rows based on certain conditions applied on single or multiple columns.

Quick Filter allows you to add a quick filter for the selected column. After you toggle to switch ON the Quick filter option you need to select the column here based on which the filter is to be applied.

The quick filter would be applied on columns that are of type Single Tag or Multi-Tag.

With the Sort Data toggle you can provide the ascending or descending manner of sorting the data based on single or multiple selected columns. If there are multiple sorting for different columns the sorting will happen from the first given condition.

Editable table columns

Table grid control has the property of Choose columns that will be editable under Top Bar properties. This property helps you to choose one or more than one columns from the table grid and make it editable. With this, you can edit and make changes in the columns of the table grid from the end-user side of the app after the publishing of the app.

First, simply select the columns you want to make editable.

You will notice that edit symbol over the selected columns for editable.

You can now make changes in the rows of the editable columns. After any edits we get a button of Save Changes with trigger dependency which can help to fire an event to save the edits in the backend database. You can read more about editing rows in table grid and use case here.

Adding new table rows

Under the Top Bar properties section, you get a toggle button of Add new row which enables us to add new rows of details respective to each column into our database. This helps in inserting data, making it very easy and fast, directly from the table grid control.

You can even select which columns to make editable of the newly added row using the Choose columns that will be editable in new rows dropdown. Only the selected columns for edits can take input from the user for new row details.

add row

A button of + Add Row is to be found at the bottom of the table grid data. Click on it and then you will observe that a new row with empty values is added. Fill the row with new details under the editable columns.

Table grid header and data visual properties

In the Properties section, we can change the display/ visual properties of data of the table grid control. Such as providing different font sizes, font weight font color, text alignment, background color, and more.

These simple properties create swift changes to make the table grid look decent.

Data display properties

Map view of the data

We have a toggle for Map view which is very useful at times when you have the longitude and latitude of locations in your data. This property enables you to view the location on the map within the table grid control.

Detailed viewing of data

Sometimes we are required to analyze a single row of data in detail and for this, we have a toggle of Detailed view. This enables us to view a single selected row of data in a detailed view. You can also select columns you want to view according to your need under the Custom toggle and also can choose to map the data to key-value pairs.

Grouping of data

With the help of the Group data toggle, you can select a column with respect to which you can group the data in accordion style. You can select the column to group by and also can choose the accordion style the first time of open table grid control.

Aggregated information of data

With the Show Aggregation Footer checkbox, it allows you to generate an aggregate value of different distinct information such as unique values, the number of values, the sum of values, empty values, checked values, and more, then displays the result at the bottom of its respective columns.

Once toggled on you can see the option as well as a button on hover to calculate values at the bottom of each column.

Pagination

The Pagination toggle button allows you to enable pagination for your data. When you allow pagination some more properties would be added to your list of properties. You can have Limit Offset based pagination or Cursor Based Pagination.

This is useful when you have more than 25 entries and you want to display it in table grid control in pages. The no. of available pages will be visible near the control.

Make sure that you already have a query to fetch data with limit and offset variables. To know more about pagination, you can refer here.

Table grid actions

To make table grid control more dynamic we can use Action properties of table grid control. The action property of table grid control covers a wide area of functions, from action trigger on row select to add new columns and icons in the table grid control.

We will be adding a call button with respect to the Contact column. It will have an icon of calling too.

After specifying the action you get several options to choose from. You can select the icon and its color for the action. We can also decide whether to make it visible on hover to a row or on a specific column or to make it visible as a column and specify its position on the display as a column.