How Can We Help?

Grid

You are here:

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.

Please note that before adding a Grid component you will need to define a data source.

 

Step 1: Add the Grid Component
  1. Drag and drop the Grid icon from the container on the left of your dashboard when in design view.
  2. Adjust the grid according to the required size.

Adding and Resizing Grid

 

Step 2: Naming the Component 
  1. 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
  1. 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
  1. From the properties pane, you can select Assign Data.
  2. 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
  1. 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.
  2. It is possible to reorganise the data by dragging and dropping the data in the order your wish it to appear.
  3. 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’
  4. 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.

Table of Contents

Newsletter sign-up