Search for answers or browse about Sintel Forms.
Grid
A grid component can display a table with data in your dashboard.
When adding a grid you will need a minimum of one column on your table. It is also possible to add a column but hide it from view on your dashboard. That means the data won’t be visible on your dashboard but it can be used for filtering other components on the dashboard.
Step 1 Add the Grid Component
- Drag and drop the Grid icon from the container on the left of your dashboard when in design view.
- Adjust the grid according to the required size.
Adding and Resizing Grid
Step 2 Naming the Component
- If you select the empty grid component it will open the properties pane on the right-hand side. I always like to start by naming my new component and giving it a description and an icon.
Naming the grid and giving it an icon.
Step 3 Properties Pane – Look & Feel and Basic Settings
- On the properties pane, you can turn on and off many different settings.
To get the hang of these basic settings my recommendation is to assign data to your grid, go back to the basic settings tab and turn on and off the individual options to get a better idea of how they will impact your grid.
| Setting | Description | Enabled by Default |
| Allow Sorting | You can control the sorting of columns in grid control. | No |
| Allow Filtering | This allows you to enable a filter box for each column in the grid for easy filtering of data. | No |
| Allow Column Resizing | This enables you to widen or shorten the width of any column on a grid. | No |
| Allow Searching | Search for an element featured within a grid for example a persons name or date. | No |
| Enable Excel Export | Enabling this allows you to export the data of the grids view to (.xlsx or .xls) format. | No |
| Show Horizontal Lines | You can enable or disable horizontal grid lines in the grid control. | Yes |
| Show Vertical lines | You can enable or disable vertical grid lines in the grid control. | No |
| Choose Page Size | By default, the Page Size value will be set as 20. You decide the page size based on your requirements. | N/A |
| Allow Text Wrapping | This allows you to wrap the text if the text length is high. | No |
|
Group Collapsable |
This enables you to collapse groups so one can choose to view only the relevant | No |
Properties Pane – Look & Feel and Basic Settings
Step 4 Assign the data to the Component
- From the properties pane, you can select Assign Data.
- Here you can select your Data Source. If you are trying to select a data source, but there are no options to select, check out this article which shows you how to define a data source.
Step 5 Organise the Data
- Under visible columns, each column from your data source will be imported to your grid. If you wish to remove any of these columns, simply click the ‘x‘ button. It is advisable not to have too many columns in your grid to avoid a cluttered screen.
- It is possible to reorganise the data by dragging and dropping the data in the order your wish it to appear.
- You can also rename any column by selecting the settings icon beside the column name. For example, in the sample, I renamed the column ‘date’ to ‘date of appointment’
- If you wish you can then sort or group your grids. For example, you can sort the information by name, or you group your data based on status. Again, it is advisable that you play around with these options on your own dashboard to get a feel for them.
Assigning and Organising the Data
| Option within Column Settings | Description |
| Header Text | Allows you to change the columns header from that which was imported. |
| Text Align | You can choose where in the column a text will appear: Left, Right, Center or Justify. Justify means the text will be arranged such that the left and right ends of all lines within paragraphs are aligned. |
| Width | You can choose the minimum width of a column. It is set as 120px as default. |
|
Show as: Value/RAG |
The show as the setting will be set to ‘Value’ as default. However, you can also choose to show the column value with Red, Amber or Green colours assigned to the value. See images below. |
Column settings with Show as ‘Value’
Column settings with Show as ‘RAG’
Once you have added your grid component and assigned data to it, make sure you save your work.
If you liked this article and would like to learn more about other components, click here.
To learn more about Sintel check our features or testimonials.
If you would like to learn more about Sintel Forms or Sintel BI book a no-obligation demo.
For the latest updates follow us on LinkedIn/Twitter & YouTube.