Hi,
I am working on displaying a data table using a table component. I have retrieved data from the database using a data action. I would like to add filtering to each column with a filter icon in the header row. When the user clicks the filter icon, it should show a popup with some input fields. How can I implement this?
Yes, ofc:
You can accomplish that with this implementation:
Make sure you don't have any sort attribute defined in the header. Then, add a container with the class "sortable-icon" or use the "sort" icon itself.
Hi @Lukasz Kapron
One possible solution is the following:
Does this solution solves your problem?
AC
Thank you for your reply!
It was helpful, but I can't undestand something. When I try to add a container, HTML tag, or icon component, it appears before the sorting tag. Is it possible to change this?
Here is an example:
It looks like a good solution, but what if I want to use sort attribute?
You can continue to use the onclick action, just pass the attribute directly in the input
Hi @Lukasz Kapron,
You can use a DataGrid instead of a table because it offers these types of features.
https://success.outsystems.com/documentation/11/building_apps/user_interface/patterns/using_mobile_and_reactive_patterns/interaction/outsystems_data_grid/how_to_use_the_outsystems_data_grid/
Thanks,
Vipin Yadav
I found this component, but it seems quite challenging to implement server-side filtering or searching. I will have a lot of data. Do you have any tips on how to do it?
@Vipin Yadav
If you've understood the issue at hand, you’ll see that DataGrid is far from the best solution here—it’s like using a cannon to kill a fly. This issue can be solved with a simple CSS class, and there's no need to manage the complexity of a DataGrid.
@Lukasz Kapron you can use @André Costa solution by adding a filter icon and opening a popup when you click on it.
Hii @Lukasz Kapron
I've attached the .oml file for reference.
Rounak Rawat