Data table component
As part of the page builder in App Builder, the data table component allows you to display and manage rows of data in a structured, tabular format. This component is essential for MSPs to handle large datasets efficiently, such as client information, service logs, or performance metrics, providing a clear and interactive view of data.
Why we developed the data table component
The Data Table component facilitates the organization, interaction, and analysis of complex data within web applications. It provides tools for sorting, filtering, and paging through data, which helps users manage large amounts of information without losing track of their data's context or structure. This is particularly useful in environments where quick data retrieval and clear data presentation are crucial for decision-making and operational efficiency.
What the data table component could be used for
Displaying detailed lists of customer tickets and their statuses.
Managing inventory levels across multiple client sites.
Showcasing performance reports with sortable metrics.
Organizing billing and transaction records for easy access and analysis.
Example use case for the data table component
Consider a scenario where an MSP needs to monitor and manage network equipment across various client sites. The Data Table component can be used to list all equipment, displaying columns for device type, status, last service date, and location. Technicians can quickly sort by any column to prioritize devices that require immediate attention or filter to view only certain types of equipment. This use of the Data Table simplifies the management of numerous devices, ensuring that maintenance is timely and no critical issues are overlooked.
Configure the data table component
Select the component: Click on the added 'Data Table' component to select it.
Properties Panel: On the properties panel, you'll find various configurable options:
Data Source
Add\Edit Data Source
Data Load Method: Specify when the chosen workflow will execute; Use Latest Workflow' or 'Run workflow on load'.
Workflow: Specify the workflow to load.
Open in new tab: Open the specified workflow in a new tab.
Workflow Output: Specify the output of the workflow to populate the data table.
Table Configuration
Add a column
Accessor: Specify the accessor (key) to access the data for the column.
Type: Set the data type; 'none', 'string', 'number', 'boolean', 'object', 'array' or 'action'.
Header: Specify the Header for the column.
Button: Select the desired icon for the button.
Button Function: Set the behavior of the button when clicked; 'Run a Workflow', 'Open a link' or 'Run Typescript'.
Workflow: Select the workflow to run
Link: Specify the URL to redirect to.
Run Function on edit: Toggle to run the button function when the component is edited.
Reload Table after function: Toggle to allow a refresh of the data table content once the function has completed.
Edit Column
Accessor: Specify the accessor (key) to access the data for the column.
Type: Set the data type; 'none', 'string', 'number', 'boolean', 'object', 'array' or 'action'.
Header: Specify the Header for the column.
Add a condition: Set rules to dynamically alter the styling of the cell data.
Column Specific Configuration
Enable Editing - Toggle to enable\disable editing of data in the column.
Enable Click To Copy - Toggle to enable\disable copying of data in the column.
Enable Column Dragging - Toggle to enable\disable column resizing.
Enable Column Ordering - Toggle to enable\disable column ordering.
Enable Column Sorting - Toggle to enable\disable column sorting.
Enable Column Actions - Toggle to enable\disable column actions.
Column Aggregation Settings
Aggregate Group Function - Specify a method to group similar values.
Aggregate Footer Function - Specify a method to count\visualize values.
Edit Table Configuration: An array of component specific toggle's to modify the overall look and feel of the data table component.
Live Preview: The canvas provides a live preview of your configured component(s) once you've made changes.
Detailed example: Add data table component to page
Navigate to App Builder > Apps. Click on your Hello World app.
Click Data Table, under Data Visualization. Drag it onto the canvas.
Click No Records Found. Add a Data Source.
Choose Run Workflow on Load.
Whenever the page is loaded, the latest data will pull into it.
Click Submit.
Click Hide View Column. This will hide columns that you don't need to display to the user. Next to View and Trigger ID, click ⋮ and select Hide X Column.
9. Click the Hide Trigger Id column
10. Click on Add a Column
Now let's make sure the user can actually get to the form, rather than just view a list.
11. In the Accessor dropdown, select the view key. By leaving the URL blank later on, the action button will automatically use the value from this key. In the Jinja from the last step, we made sure the value was the link to that form.
12. Change the Type
Change the Type to action.
13. Change the column name. Add a header, which is the column name for this action button.
14. Under the Button Function, select the Open a link option.
15. If you want to make your data table more user friendly, add a tooltip to let them know what's going to happen.
16. Click the Play button in the top right. This is a test button that runs the page as if you navigated to it normally. You should see a list of forms returned with an action column. If you click the link, you should go directly to that form.
17. Click Publish.
18. At the top of the menu bar, you'll see a url that is unique to your app. Clicking this navigates to the page itself, the same one you'll send to your users.
Last updated
Was this helpful?
