Data Table

Yeeflow team
Yeeflow team
  • Updated

With Data Table control, you can get the data from one of the data list that previously created. Query dynamically, fetch the data to columns, and style it up as you need.

DataTable_Sample__1_.jpg

 

Add Date Table to the page

Firstly, find the Data Table control in the controls add panel,. Then, drag and drop it into a section or container on your page.

DataTable_add.jpg

 

Select data source

Select the data list which the data table will show up.

Open the Content > Data Source block, and in the Application section, select the application which is the current application by default. 

Afterward, move on to the List section. Select the data list under the selected application.

In the Data Filters section, click the condition button to filter the data from the selected data list.

Set the Primary Order and Secondary Order to sort your data properly.

DataTable_source.jpg

 

Set content of the table

Move on to the Table Content section. Select the columns which will be displayed in this data table. 3 blank columns are added by default. You are able to add or remove items and this will affect the number of columns. If you need to add more columns, just click the "Add Column" button at the bottom of the column list.  

DataTable_content.jpg

Click each column item to expend setting section. you can choose what will be displayed in the table heading cells and set properties. 

In the List Field section, select the field of the selected data list.

The text of the heading cell will display the field name by default. You can set the custom display name in the Display Name section.

Column Width slider allows you to set the width of the column in pixels or percent.

DataTable_column.jpg

Link: select the detail page of each item (row) in this data table. Detail pages are the forms created in the data list. Select Default Layout will show the default view page you set in the data list. If you've created other custom list forms, those forms will show after the default layout (Like, the new form, view form, and edit form are customize list forms in the following example).  Select Custom URL will allow you to create a dynamic URL. Select None if you just want to show the data in this data table, and data rows are set as unclickable. 

DataTable_link.jpg

Select how would you like to open the detail page with Open in settings. Pop-up window means the detail page will show as a pop-up window, Full Screen means once you click each row, the page will be redirect to the detail page. And New window will open another windows and show the detail page.

Hide if value is empty: If there are no records in this Data table, this control will not show on the page.

Fallback: Use the Fallback field to set default content to be used in case the control has no content or does not exist. 

 

Pagination Settings

Limit Records: Turn this ON if you just want to display certain items in this data table. By default, this option is OFF, which means all records of the selected data source will be displayed in this Data Table. Then you will need to enter the number of items for each page in the following Records per Page, and set the alignment of the pagination by choosing between Right, Center, and Left from the Align section.

DataTable_Pagination1.jpg

If the Limit Records option is set to ON, then enter the number of items you wish to display in the following Limit section. Turn View more records ON will display a hyperlink at the bottom of this data table. You can change the txt in the text box of Customize text. Set the Alignment that this view more link with the settings of Align.

DataTable_Pagination.jpg

 

Appearance Settings

Navigate to the Appearance block of the Content tab. Here you can enable or disable the Hidden Header option to show or hide the header of this table, or enable or disable the Sorting Table option to allow the users to sort through the content of the specific column. 

DataTable_appearance.jpg

 

Styling the Data Table 

It is now time to define the appearance of the table. Go forward to the Style block, where you are able to make your table look more eye-candy. 

General

Table Width: Set the width of the data table as fixed with px or percentage of the container with %.

Column Width: Set how the column width will be allocated for each column. Fixed means the column width will be exactly the value you set for each column in the column settings panel, while Auto means the column width will be scaled based on the total width of the Table Width set above, and allocated with the ratio of each column width. 

Table Alignment: Choose between Right, Center, and Left.

DataTable_width.jpg

Pro Tip: You can select the devices icon at the end of the Table Width, Column Width or Table Alignment to set different style and value for PC, tablet and mobile.

 

Border Type: Select the type of border to use around the table.

Width: Set the width of the border.

Border Color: Select the color of the border.

Hidden border for body container: Turn is ON if you do not want the show this border in the table body.

Radius: Set the border radius to control corner roundness.

Shadow: Set options to apply a box shadow on the Data Table.

DataTable_general.jpg

Table Header

Padding: Change the padding settings of the content inside in each header cell.

Border Type: Select the type of border to use around the table header.

Align: Align the text of the table header to the left, center, or right.

Vertical Align: Vertical align of the table header text to top, middle, or bottom.

Typography: Change the default typography options for the text of table header.

Normal / Hover: Set different color and background color for the state of header.

Color: Select the color of the header’s text for both Normal and Hover states. 

Background color: Select the header's background color for both Normal and Hover states. You may use a solid or gradient color.

DataTable_header.jpg

Table Content

Typography: Change the default typography options for the text of table content.

Normal / Hover: Switch to set different style of table content.

Row Color: Set the text color of each row for both Normal and Hover states.

Row Background Color: Select the background color of each row for both Normal and Hover states. 

Striped Row: Turn is ON to set different colors for even rows for both Normal and Hover states. 

Even Row Color: Set the text color of each even row for both Normal and Hover states. 

Even Row Background Color: Select the background color of each even row for both Normal and Hover states. 

Link Color: Set the color of hyperlink text for each row for both Normal and Hover states. 

Padding: Change the padding settings of the content inside in each content cell.

Border Type: Select the type of border to use around the table header.

Align: Align the text of the table content to the left, center, or right.

Vertical Align: Vertical align of the table content text to top, middle, or bottom.

DataTable_tablecontent.jpg

Pagination

Typography: Change the default typography options for the text of pagination.

Normal / Hover / Active: Switch to set different style of pagination.

Color: Set the text color of the pagination for Normal, Normal  and Active states.

Space Between: Set the space for each number of the paging.

Spacing: Set the space between the table content and the pagination.

DataTable_pagestyle.jpg

 

Advanced Settings

Set the Advanced options that are applicable to this control.

 

 

Was this article helpful?

/

Comments

0 comments

Please sign in to leave a comment.