Comment on page
DataTable
The DataTable widget is used to show data in a tabular format. It provides a convenient way to view large amounts of structured data.
For example, you could use it to display a list of employees in a company, with each row representing an individual employee and the columns showing the employee's name, age, department, and salary.
DataTable widget
Let's see how to add a DataTable widget by building an example that shows a list of all employees in a company. Here's how it looks:
DataTable showing employees' list
The steps to add DataTable and display the employees' details are:
- 1.First, click on the + Add Widget, drag the DataTable widget from the Base Elements tab, or add it directly from the widget tree.
- 2.It adds two types of predefined widgets:
- 1.DataTableHeader: This refers to the top row of the table, which displays the names of the columns. To set its name, click on the DataTableHeader > Text widget, move to the properties panel, and give it a name.
- 2.Placeholder: This is used to display the actual data. By default, it comes with the Text widget. However, you can replace it with any other widget based on your requirement.
- 3.By default, it shows two columns. To show more, select the DataTable widget, move to the properties panel, and enter the Number of Columns you want.
- 4.If you increase the columns, you might find the columns are squeezed (especially in a mobile device with portrait orientation). To fix it, move to the properties panel, enter the appropriate Table Width, and Enable Horizontal Scrolling.
- 5.For the demonstration purpose, let's display data from Firestore:
- 1.
- 2.
- 3.
Adding DataTable widget
Showing data from Firebase
Employees collection
Learn how to retrieve and display the data from the backend. Note that the instructions are for the ListView widget, but the process remains the same.
You can customize the appearance and behavior of this widget using the various properties available under the properties panel.
To change the size of the DataTable, select the DataTable, move to the properties panel, and enter the Table Width and Table Height.
- To set it to an exact size, select PX and enter the desired values.
- To set the dimensions as a % of the screen size, select % and enter the desired value.
If you leave the Table Height empty, it will be auto-adjusted depending on the number of items inside.
Changing size
When you increase the Table Width, all columns are given equal space. However, you might want to change the width of a specific column.
To change the column width, select the DataTableHeader (for the column you want to change), move to the properties panel, and enter the Width.
- To set it to an exact size, select PX and enter the desired values.
- To set the width as a % of the screen size, select % and enter the desired value.
Changing column width
- 1.To change the header height, enter the value in the Header Row Height property.
- 2.To change the height of the rows that show the data, enter the value in the Data Row Height property.
Change row height
To change the row color, select the DataTable, move to the properties panel, and change the colors for the following properties:
- Header Row Color: This sets the background color for the header row.
- Data Row Color: This sets the background color for the rows that show the data.
Changing row color
A divider is a visual line that separates rows. By default, its thickness is set to 1.
To change divider thickness, select the DataTable, move to the properties panel, and enter the value in Divider Thickness.
Changing divider thickness
To set the padding around the columns, select the DataTable, move to the properties panel, and enter the value in Column Spacing.
Padding around column
Last modified 4mo ago