I will be honest, I have never really liked using data tables. I almost always resort to galleries. However, recently there was a use case that required many values/columns to be displayed that wasn't possible across the width of the screen using a gallery. This is where data tables came to the rescue. Data tables add a horizontal scroll bar allowing users to scroll to the right to view additional information that may not be visible initially on the screen. I might have been able to replicate a similar experience (using a horizontal gallery) but it would have been difficult, if not impossible, to use a vertical gallery and have the column headers scroll along with the gallery. With data tables, the column headers also scroll along with the rest of the table. These two benefits were good enough for me to switch to data tables for this use case.
That being said, I didn't like the fact that there would be a horizontal scroll bar all the time and the users would have to scroll to the right to see those hidden columns even if the columns that were already on the screen were not useful to the user. To improve this user experience, I wanted to provide the user with the ability to hide/show columns as needed.
The approach was pretty straightforward:
- I needed a way for users to specify the preferences or choices of the columns that they wanted to show in a list
- I then needed to hide/show (control the Visible property) of the data table columns based on the values in the list
- Last, I had to modify the Width of the columns to adapt according to the number of columns that were visible
I used 3 different approaches to capture user's preferences: combo box, checkbox, and list box. Combo box and list box are pretty similar in their approaches. In either of them, the selected columns can be accessed by using:
ComboBox.SelectedItems or ListBox.SelectedItemsWith check boxes, the OnCheck property as defined below will add the column to the list of selected columns:
Collect(columnColl, "Column Name")And the following OnUncheck property will remove the column from the list of selected columns:
Remove(columnColl, {Value: "Column Name"})Once the preferences have been captured, the visibility of the columns can be controlled by the following expression:
If("Column Name" in ComboBox.SelectedItems, true, false)If("Column Name" in columnColl, true, false)If("Column Name" in ListBox.SelectedItems, true, false)The width of each column (assuming there are a total of 6 columns) can be adjusted using the following expression:
If(CountRows(columnColl)=6, 227.3, If(CountRows(columnColl)=5, 273.2, If(CountRows(columnColl)=4,341.5, If(CountRows(columnColl)=3, 453.3, If(CountRows(columnColl)=2, 683, 1366))))) columnColl (used for check boxes) can be replaced with ComboBox.SelectedItems for combo box and ListBox.SelectedItems for list box.
Here is a working demo of all 3 approaches (click to enlarge):
Hope this helps to make data tables user experience better for users!
Have fun! Get addicted!
I tried but it wouldn’t work.
I used a combobox with some of the fields from my data table.
Set the item’s property to Filter(source, combobox.selecteditems) , didn’t work.
Can you please explain it in more depth?
Thank you!
Hi Gautham,
Thanks for pointing this out. I will add one more step to the post. For now, I have a couple of points.
1. The combo box (or list box or check box) values need to be the column names or any other text that represent the different columns within your data table.
2. Not sure I completely understand the Items property you have shared above. Is that for the combo box or your data table? Your data table needs to show the data that it is supposed to and the combo box needs to be populated with column names.
Let me know if you have more questions and/or if I can provide more details.
Thanks,
Hardit
Can you share the app to have possibility to investigate it better?