Important
If you create a CRUD table, make sure to include all columns which are defined as mandatory in your table definition, otherwise your database will reject any changed or newly added records!
In Datably, Column Stacks represent the fields of a table. There are many different Column types available which are used for different data types or special features.
This section explains the general process of placing and configuring the Basic Column Stack.
The different Column types available in Datably are described in detail here.
This section explains the general process of placing and configuring the Basic Column Stack.
The different Column types available in Datably are described in detail here.
Field Name (DB) - enter the field name exactly as on the database
Field Title - enter the name as you want to see it on the web page
Visible - Enable or disable the display of this column
Editable - Make this column editable. The Primary Key should not be editable if it is a self incrementing number!
Max. Length - Set the maximum length of the input field if Editable is selected. Should be the same value as in the field definition in your database
Orderable - Enable or disable ordering on this column
Searchable - Enable or disable search on the data in this column
Field Title - enter the name as you want to see it on the web page
Visible - Enable or disable the display of this column
Editable - Make this column editable. The Primary Key should not be editable if it is a self incrementing number!
Max. Length - Set the maximum length of the input field if Editable is selected. Should be the same value as in the field definition in your database
Orderable - Enable or disable ordering on this column
Searchable - Enable or disable search on the data in this column
Required - Marks this field as required in the edit/add modal window and validates if an entry is present
The settings in this section override the table-wide layout options and are therefore optional.
Override Alignment - Instructs the Column stack to apply its own alignment settings, thus overriding the table-wide settings
Hdr. Hoz. Align - Choose the alignment option for the header - Default, Left, Center, Right
Cell Hoz. Align - Choose the alignment option for the cell - Default, Left, Center, Right
Cell Vert. Align - Choose the vertical alignment option for the cell in relation to the other cells in the table - Top, Middle, Bottom
Hdr. Hoz. Align - Choose the alignment option for the header - Default, Left, Center, Right
Cell Hoz. Align - Choose the alignment option for the cell - Default, Left, Center, Right
Cell Vert. Align - Choose the vertical alignment option for the cell in relation to the other cells in the table - Top, Middle, Bottom
All Column Stacks are responsive by default. If you have specific requirements, you can set them in this section.
Hide Extra Columns - Enable and configure the Responsive extension for Datably.
Datably will automatically hide columns in a table so that the table fits horizontally into the space given to it.
Priority - If Datably removes columns from the display, it does so, by default, from right to left (i.e. the rightmost column will be removed first). You may wish to assign your own column visibility priority to the columns, telling Datably which columns it should remove before others
Datably will automatically hide columns in a table so that the table fits horizontally into the space given to it.
Priority - If Datably removes columns from the display, it does so, by default, from right to left (i.e. the rightmost column will be removed first). You may wish to assign your own column visibility priority to the columns, telling Datably which columns it should remove before others
Override Column Width - Instructs Datably to use this manual setting instead of automatically calculating the optimal width
Width - Enter the relevant width
Width Units - Select the appropriate unit (px, %, em, rem)
Width - Enter the relevant width
Width Units - Select the appropriate unit (px, %, em, rem)
With "Font-Set" and "Style-Set" you can use fonts and styles which you have defined either with the Font and/or Style stacks in Platform to with the Gutenberg Stack.
Under "Custom CSS Class" you enter the name of a CSS class which you have defined with either the Gutenberg Stack or the Font and/or Style stacks included in Platform. FontPro should also work, although this has not been tested.
For example, if you set the scope of your Style set to "Selector" and entered the name ".myCSSClass", you could enter this name here and thus have these settings applied to the stack(s) which you have put inside Wrap.
You can even target more detailed CSS elements: if you wanted to target an h3 headline with an individual CSS selector, you would for example enter the name ".myCSSClass h3" in Stilo and "myCSSClass" (no dot!) in Wrap. This will target any h3 element within Wrap. Font or Style settings work exactly the same way.
Under "Custom CSS Class" you enter the name of a CSS class which you have defined with either the Gutenberg Stack or the Font and/or Style stacks included in Platform. FontPro should also work, although this has not been tested.
For example, if you set the scope of your Style set to "Selector" and entered the name ".myCSSClass", you could enter this name here and thus have these settings applied to the stack(s) which you have put inside Wrap.
You can even target more detailed CSS elements: if you wanted to target an h3 headline with an individual CSS selector, you would for example enter the name ".myCSSClass h3" in Stilo and "myCSSClass" (no dot!) in Wrap. This will target any h3 element within Wrap. Font or Style settings work exactly the same way.
