The basic DataGrid or DataTable component inside MockFlow helps to quickly create rows and columns of data with shortcuts. The editable text in the DataGrid component can be used for adding certain special functionalities apart from its settings panel.
Sample Text inside Data Grid components
[] / 100px,Country/200px,Company
[x],USA,Apple Inc
[],Sweden,IKEA Furnitures
[x],Finland,Nokia Communications
Special text is marked in Bold.
Check out this quick tutorial video on how to add a data table to your wireframe.
Column Sizes
The top row in DataGrid acts as the column names. In addition to each column name, column size can be added optionally in pixels like:
Col A / 100px. Add a backslash and specify column size in pixels.
Checkboxes
Checkboxes can be created in any cell
[] - For creating unselected checkbox
[x] - For creating a 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
