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:
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.
