Sortable & filterable grid widget in library

Hi,

I am creating a library with widgets that have the look of our app so we can quickly prototype new screens (the app is a rather large one, Windows desktop, supports light/dark theme, etc).

One main widget that is used everywhere is a sortable and filterable grid. I am having difficulty creating something that is maintainable and easy to use by whoever is going to prototype a new screen.

So far I have a grid that pretty much looks like it should. I’ve added 3 sample columns and some sample rows, and implemented the sorting one 1 column (haven’t figured out how to do the filtering yet). I’ve attached the file.

First concern: how can I make this more re-usable? In the attached file, sort on Col0 is working. Sure, I can duplicate that and modify it for the other columns, but that will a lot of elements. And of no use for anyone actually using the widget to prototype, because column data, name (in header), widths, number of columns, etc. will be different on the screen to prototype. I cannot make a column header a widget, because you cannot use widgets in widgets, and masters also won’t help me here?
CompanyLib.rplib (105.9 KB)

2 Likes

Hi Stiggy

Perhaps try keeping as much as possible in the repeater?

Attached a file that has the header row in the repeater - I’m forcing it to the top of the sorted column by altering the values when it’s clicked. The header has a different appearance / behaviour by using a dynamic panel in the repeater. If the value ID is 1 then it shows the header dynamic panel state - else the cell state. Might consider it a bit of a hack - but it means most/all of the editing can be in the repeater.

all_iin_the_repeater.rp (117.1 KB)

1 Like

That is… creative! Thanks for the approach.
Not sure what it actually solves though. Each column would still have the implementation of a header duplicated? And worse, when adding columns (screens can easily have 20+), the If and Else for Item Loaded of the Repeater would have to be expanded for each added column?

Ideally I would have something like a master for a column header, with that master taking the text for the header cell from the repeater column. And with the header resizing itself to fit the content. So then at least when a screen prototyper adds a column to the repeater, he can do so without having to delve into the implementation of the widget.

1 Like

Also, is there a way to make the filtering?
Each column would have that filter pane as displayed in my file. The filter window will display all distinct values that are in the column preceded by checkboxes. The underlying grid will then only show items for which the checkboxes are select (unless none are selected, that is the same as no filter -> all items are displayed).