Art Data
Art Data allows you to create 2 types of tables and 12 types of charts. Custom templates can be created to control the look of your tables and charts. Quickly populate a table or chart using our built in dataset spreadsheet or you can load a dataset from SQL Query, HTML or CSV file.
Creating a Table Template
Note: This guide only covers Art Data v2.2.0 and above. If you haven't migrated to Art Data v2.2.0 yet, please make sure to get the latest version and complete the migration. For more information about the scope of differences between Art Data v2.2.0 and previous versions please see here.
First, the base template settings and preview will load.
A base template will not have any table modifiers switched on. Table modifiers are used to apply global style changes to the table.
When you toggle the "Striped" table modifier to the on position it will add a background color to every other table row. The color used here with Striped can be set with a colorpicker under the "Table Data" tab.
When you toggle the "Condensed" table modifier to the on position it will modify the table's padding making the table appear much tighter with less space between data, rows and headers.
Table percentages can also be set under the "Table Modifiers" tab. The percentages set here are added to the table element which will change the table's width relative to its parent container. For example, if you are placing a table in a module position that spans the full width of your site's webpage and you give the table template a 50% width, the table will take up 50% of the space of the webpage. Likewise, if your module position is in a sidebar and you set the table template to a 50% width then your table will only take up 50% of the width of the sidebar module position which would not look good. For most use cases the table template width should be set at 100% so that it can fill out the space of its container element. As the table's container element get's smaller or larger so will the table. This will enable the table to behave in a mobile responsive manner. However, setting the width here may be useful in some cases but not all.
The template fields shown in the rest of the screenshots are applied to your table template as CSS. Each of these fields are actually CSS properties such as: text-align, padding, font-size, font-weight, color, border-bottom and more. Googling any of these CSS properties will give you the possible values that can be used here. This type of granular control over table CSS properties gives you unlimited ability to style the table any way you desire
Under the "Table Headers" tab you can control several display properties of the table's headers. Set the alignment to left, center or right; Set padding values, font size, font weight, font color and the border bottom.
Under the "Table Data" tab you can control several display properties of the table's body. Set the alignment to left, center or right; Set padding values, font size, striped background and border bottom. Note: striped background is not a CSS value. Just use the color picker to select a background color for the "Striped" table modifier.
Under the "Pagination" tab you can control the colors of the pagination. Note: pagination only shows on Dynamic Tables. There is no pagination, pagination limit selects or search on a static table.
After you have finished creating your custom table template, give the template a name and hit save. Your template is ready to use!
Other articles in this category...