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.
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.
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.
Data query: Select the method for searching data.
From data source: Performs precise searches.
In the Data Filters section, click the condition button to filter the data from the selected data list.
From search engine: Conducts full-text searches.
In the Data query section, enables the configuration of full-text search fields associated with another precise search.
Set the Primary Order and Secondary Order to sort your data properly.
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.
There are 3 types of the layouts which you can select from:
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.
Card View: Choose this option will show the items one by one with separate area.
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.
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.
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.
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 , %, em, rem, vw, calc.
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.
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.
New item form: 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).
Open in: There are four opening options available: pop-up window, Slide-in, Full page, and New page.
Size: For pop-up window and Slide-in options, you can also customize the page size.
Show more options: Turn this ON to show more options button, while users can import/export data from the dropdown list menu.
4. Set the View Detail page
View item form: 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.
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
Start at: Start displaying from which data record.
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.
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.
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.
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 , %, em, rem, vw, calc.
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.
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.
2. Card View
Margin: Set the Margin of the card view area in PX , %, em, rem, vw, calc.
Padding: Set the Padding of the content insider in the card view area in PX , %, em, rem, vw, calc.
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.
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.
Card Content
Margin: Set the Margin of the Content card area in PX , %, em, rem, vw, calc.
Padding: Set the Padding of the content insider in the Content card area in PX , %, em, rem, vw, calc.
BackgroundColor: 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.
Style of Caption
Margin: Set the Margin of the Caption in PX , %, em, rem, vw, calc.
Padding: Set the Padding of the Caption in PX , %, em, rem, vw, calc.
Background Type: Select the background color. You may use a solid or gradient color.
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.
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.
Style of Search Bar
Margin: Set the Margin of the Search Bar in PX , %, em, rem, vw, calc.
Padding: Set the Padding of the Search Bar in PX , %, em, rem, vw, calc.
Placeholder Color: Choose the color of the placeholder text.
Typography: Change the default typography options for the text of Search Bar.
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
Style of New Item Button
Margin: Set the Margin of the New Item button in PX , %, em, rem, vw, calc.
Padding: Set the Padding of the New Item button in PX , %, em, rem, vw, calc.
Typography: Change the default typography options for the text of New Item button.
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
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 , %, em, rem, vw, calc.
Padding: Set the Padding of the content insider in the operation button in PX , %, em, rem, vw, calc.
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
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.
Advanced Settings
Set the Advanced options that are applicable to this control.