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.

Data_Table_Overview.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

1. Choose layout of the Data Table control

Move to the "Table Content" section. Select the layout properly from the dropdown list.

Document_Library_Layout.jpg

 

There are 3 types of the layouts which you can select from:

  1. Table View: Choose this option if you want to show the Data Table layout and items as a table. Each item will display as a row with pre-defined columns.

    Data_Table_Overview.jpg

     

  2. Card View: Choose this option will show the items one by one with separate area. 

    Data_Table_Card_View.jpg

     

  3. Dynamic: If the layout is set to Dynamic, the Document Library will be set to Table View on PC and Tablet device, and Card View on Mobile device.  

    Data_Table_Dynamic.jpg

     

  4. Default: The default settings of the Layout is Dynamic.

     

The properties and styles of Table view and Card view can be set separately. So, if the Default/Dynamic layout is selected, you will be able to see all the related settings for both Table view and Card view. Otherwise, you will only see the table view related settings, or the card view related settings.

Data_Table_Styles_for_views.jpg

 

2. Add display fields to Data Table control

To add fields, go find the Display fields settings after Layout. and  click the "Settings" button to open the Select List Field window. Select the fields and set the display orders, then click "OK" button to add those fields.

Data_Table_Fields.jpg

 

You can drag to change the orders of each field, or click the Trash button to remove this field from the Data Table control.

 

Next, click each field to expand the settings panel. In the Table View section, you can set the width of each column in PX or %.

 

And from the Card View section, you can set the width of each control with percentage. For example, To show 4 controls in each row, you can set the width as 25% for each. The Title Layout, Vertical Align, and Title Width settings help to set the positioning of the title for each control. 

 

Data_Table_Field_Settings.jpg

 

 

3. Caption Settings

If you want to show a title text of this Data Table control, allow users to search records, or add new items (only if the users has the proper permissions), you can set the Display Caption option ON. There are couple of the following settings will be available then:

Title: By default the title will be the name of the selected data list. Set customized title with the text here.

Display Search Bar: Turn this ON to allow users search records with the search bar.

Placeholder: Set the customized text as the placeholder of the search bar.

Allow Add Item: Turn this ON to allow users who have the proper permissions to add new items.

Text of new item button: Set the customized text of the new item button.

Default values: When allow users to add new item, the default values settings will be available. You can set one or more fields' default values as needed. 

Show more options: Turn this ON to show more options button, while users can import/export data from the dropdown list menu.

 

3. Set the View Detail page

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

1. Table View

  • 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.

Data_Table_Style_Table_Style.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.
  • Radius: Set the border radius to control corner roundness.
  • Shadow: Set options to apply a box shadow on the Data Table.

Data_Table_Style_Table_View.jpg

 

2. Card View

  • Margin: Set the Margin of the card view area in PX or %.
  • Padding: Set the Padding of the content insider in the card view area in PX or %.

 

3. Fallback

Set the Typography and Color of the text for Fallback.

 

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

 

Card Content

  • Margin: Set the Margin of the Content card area in PX or %.
  • Padding: Set the Padding of the content insider in the Content card area in PX or %.
  • Background Color: Select the background color of the Content card area. 
  • Border Type: Select the type of border to use around the Content card area. 
  • Radius: Set the border radius to control corner roundness.
  • Shadow: Set options to apply a box shadow on the Content card area. 
  • Content Padding: Set the padding of each summary field control inside in the Content card area.
  • Title: Set the Typography and Color for the Title text of each field.
  • Value: Set the Typography and Color for the Value text of each field.

Data_Table_Style_Card_Content.jpg

 

Style of Caption

  1. Margin: Set the Margin of the Caption in PX or %.
  2. Padding: Set the Padding of the Caption in PX or %.
  3. Background Type: Select the background color. You may use a solid or gradient color.
  4. Border Type: Select the type of border, choosing from none, solid, double, dotted, dashed, or grooved.
  5. Radius: Set the border radius to control corner roundness.
  6. Shadow: Adjust box shadow options.
  7. Title: Set the styles of the Title on Caption, 
    • Typography: Set the typography options for the title text.
    • Color: Choose the color of the title text.

Data_Table_Style_Caption.jpg

 

Style of Search Bar

  1. Margin: Set the Margin of the Search Bar in PX or %.
  2. Padding: Set the Padding of the Search Bar in PX or %.
  3. Placeholder Color: Choose the color of the placeholder text.
  4. Typography: Change the default typography options for the text of Search Bar.
  5. Normal / Focus: Set different styles for normal state and focus state of the Search Bar styles below are supported to be set separately for Normal and Focus state.
    • Text Color: Choose the color of the Search Bar text.
    • Background Color: Set background color of the Search Bar. 
    • Border Type: Select the type of border, choosing from none, solid, double, dotted, dashed, or grooved.
    • Radius: Set the border radius to control corner roundness.
    • Shadow: Adjust box shadow options

Data_Table_Style_Search_Bar.jpg

 

Style of New Item Button

  1. Margin: Set the Margin of the New Item button in PX or %.
  2. Padding: Set the Padding of the New Item button in PX or %.
  3. Typography: Change the default typography options for the text of New Item button.
  4. Normal / Focus: Set different styles for normal state and focus state of the New Item button styles below are supported to be set separately for Normal and Focus state.
    • Text Color: Choose the color of the New Item button text.
    • Background Color: Set background color of the New Item button. 
    • Border Type: Select the type of border, choosing from none, solid, double, dotted, dashed, or grooved.
    • Radius: Set the border radius to control corner roundness.
    • Shadow: Adjust box shadow options

Data_Table_Style_New_Item.jpg

 

Style of More options

If you've turn the "Show more options" ON from the Content / Table Content settings, you will be able to set the styles of the operation button and the dropdown options:

 

1. More Options button

  • Margin: Set the Margin of the operation button in PX or %.
  • Padding: Set the Padding of the content insider in the operation button in PX or %.
  • Typography: Change the default typography options for the text of operation button.
  • Text Color: Set the color of operation button text. 
  • Background Color: Select the background color of the operation button. 
  • Border Type: Select the type of border, choosing from none, solid, double, dotted, dashed, or grooved.
  • Radius: Set the border radius to control corner roundness.
  • Shadow: Adjust box shadow options

 

2. Dropdown

  • Typography: Change the default typography options for the text of dropdown list.
  • Normal / Focus: Set different styles for normal state and focus state of the dropdown list. Styles below are supported to be set separately for Normal and Focus state.
    • Color: Choose the color of the dropdown list items text.
    • Background Color: Set background color of the dropdown list. By default, the background color is set as transparent.
    • Border Type: Select the type of border, choosing from none, solid, double, dotted, dashed, or grooved.
    • Radius: Set the border radius to control corner roundness.
    • Shadow: Adjust box shadow options

 

Data_Table_Style_More_Options.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, Hover 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.