Table Component
Tables are a great component to use when you want users to be able to look up specific information and drill down into the data. To create a table on an Akuko post, begin by going into Edit mode from the post’s horizontal ellipses drop down menu. Add a table component by selecting the plus icon and selecting Table. A blank visual with a watermark table icon should appear, as shown below.
To populate a newly created table, select the pencil icon, left of the blank table, and a hamburger menu will appear to the far right of the page. This menu contains different aspects of the table. The Settings and Layout options contain details about the physical appearance of the table, such as the dimension. The Source, Columns and Filter options control the data that goes into the table.
In the Settings, add a title and a caption (optional) for your table.
The title appears in bold at the top of the table, while the caption appears below the table in regular font. To learn more about data sources, reference our help documentation.
The Source option allows you to select the data source that will populate the table. A data source is essential for the table to display anything. After selecting the source, you can also define the default table ordering by selecting the data field under Inherit context from card. In the example below, the name column defines the default table ordering.
Add columns to your table under the Column option. Click Add to add the desired number of columns to the table. You can select as many columns as necessary. Then, add the specific columns by clicking the plus (+) icon or arrow ( > ) icon to open the options menu.
Select the column data field from the Property dropdown, which has all possible column values in the data source selected, and the selected data field will appear in the table on the post.
You can reorder the column order by dragging the column to the location you would like it to appear. The topmost column will appear first in the table.
To delete the column, select the X between the plus and expansion arrow.
You can easily change the width of the column and the format of column (value or icon). To change the width of the column, type or slide the slider, under Width, to the desired width. To define the column format, select value or icon, under the Format drop down menu. Use the value for a text or numeric field, and use icon for icons, small photos, etc.
For each column, you can add conditional formatting in the table based on the table value using the color mode - Steps, Categories. The Steps color mode will color the column property a certain shade selected if they are less than or equal to (<=) a numerical value. Steps color mode is used for numerical columns. The Categories color mode will color the column property a certain shade selected if the column is equal to a string value. Categories color mode is used for string columns.
After selecting the color mode, click Add to add the desired number of steps or category formatting options. You can create as many formatting options as necessary. Then, add the specific formatting option by clicking the plus (+) icon or arrow ( > ) icon to open the options menu. The default value and color is 0 and red, respectively. You can change this by putting in the numeric or string value in the Value textbox and selecting the desired color for this formatting option in the Color option.
Steps Color Mode
Category Color Mode
To change the color, click on the Color textbox or color selection to reveal a color selection menu. The color selection menu also allows you to add shades of colors using a HTML color code or by typing a color name. Once you have selected the color, close the color selection menu by clicking the X in the upper right corner.
Similar to the columns, you can delete a step or category by selecting the X.
Filters allow the user to generate a table with a portion of the data based on the value(s) selected in the filter. The fields can be categorical, meaning they contain text values, or they can be continuous, meaning they contain numerical data. You can add multiple filters to a table to enable the user to filter down to a particular set of data.
Add filters to your table under the filter option. Click Add to add the desired number of filters to the table. Then, add the specific filters by clicking the plus (+) icon or arrow ( > ) icon to open the options menu.
The filter property is the field with which the data source is to be filtered by. Only one field can be selected per filter. However, multiple filters can be created for a table.
Select an operator to create the desired filter based on the selected property. The different type of operators to choose from include:
- Equal to or Not equal to
- Greater than or Greater than and equal to
- Less than or Less than and equal to
- Contains
- Is null or Not null
The Value attribute of a filter is optional. Click inside the Value box to reveal a list obtained from values of the field selected in the Property attribute of the filter. You can select more than one value from the list.The selected value(s) will be the default value(s) that appear on the filter before anything is selected.
Expose
Check the Expose checkbox to make the filter appear in the post, usually at the top left corner of the table as a dropdown.
Inherit
Check the Inherit checkbox to have the table use filters from other charts within the post that share the same data source as the table.
Multiple
Check the Multiple checkbox to enable multiple inputs values in the default filter (i.e. filter by 'RegionA+RegionB+RegionC')
The number of records on a table are grouped into pages. The Layout option gives you the flexibility to determine the number of records appearing on each page. After selecting Enable Pagation, you can set the Number of records per page with a numeric value.. The number of pages on your table will depend on this setting. By default, the number of rows per page will be 10, which is the recommended number. However, if you have a lot of data, you may need to increase the number of rows per page to minimize user scrolling.
You can also change to a simplier pagation format by toggling Simple pager.
Once done creating your table, set the size of the table as you see fit. Click on the three dots icon on the top right corner of the table and select the appropriate size.
Last modified 7mo ago