This Forge component is accompagnied by a series of 3 Medium articles explaining what it is supposed to do and how it is doeing that.

A standard table widget in an OutSystems Reactive application can be sorted by clicking on a column header. We will use CSS styling to give a bit more information about sorting to the user.

In part 1, we explore how this sorting feature is styled, what we would like to change about it, and what elements and classes we are dealing with.

In part 2, we add some lines of CSS (and a few other bits and bobs) to improve on the styling.

In part 3, we expand the styling to already reflect sorting on the initial opening of the screen.

USAGE

drag the webblock to your screen

place the standard table inside the placeholder

pass the tablesort variable into the input of the webblock

pass the location of the initially sorted column (if any) into the webblock