Help on DataGrid/Table component


The basic DataGrid or DataTable component helps to quickly create rows and columns of data with shortcuts. The editable text in DataGrid component can be used for adding certain special functionalities apart from its settings panel.

Here is sample text of the above datagrid comp

[] / 100px,Country/200px,Company

[x],USA,Apple Inc

[],Sweden,IKEA Furnitures

[x],Finland,Nokia Communications

Special text is marked in Bold. 

Column Sizes:

The top row in DataGrid act as the column names. In addition to each column name, column size can be added optionally in pixels like: 

Col A / 100px  . Add backslash and specify column size in pixels.


Checkboxes can be created in any cell

[] - For creating unselected checkbox

[x] - For creating selected checkbox

To avoid commas ',' as a column separator

Comma is used as a column separator in the Datagrid component. However if you want to use comma as part of a cell value, then use the escape slash. For example.

Name, Country, Continent

John \, Harris, Germany, Europe  

will produce the following output


Note: This article is for the basic datagrid component. For more advanced features like graphical editing of columns and rows, icons inside cells, cell based linking, use the Advanced Datagrid component present in the same UI pack.

Rate this article
great ok bad
For more questions - Contact Us