Saturday, April 22, 2023

Glimmer DSL for LibUI 0.7.x Table Selection and Sorting API

In the 0.7.x version series, Glimmer DSL for LibUI finally gets the much awaited Table Selection API and Table Sorting API that got added to the underlying libui C library a few months ago. The good news is tables are now sortable by default without having to write a single line of code (Convention Over Configuration). That means all older applications that had tables now have sortable tables. That said, sorting logic can be customized or disabled if needed. Also, table selection is enabled by default, but to consume the selection, an `on_selection_changed` listener can be nested under the `table` control.

The Table Selection API includes the following `table` properties and listeners:

  • `selection_mode` (`Symbol`) [default: `:zero_or_one`]: sets selection mode to `:one`, `:zero_or_one`, `:zero_or_many`, or `:none`
  • `selection` (`Integer` or `Array` of `Integer`s): a single `Integer` row index for `:one` and `:zero_or_one` selection modes, or an `Array` of `Integer` row indexes if selection mode is `:zero_or_many`
  • `on_row_clicked {|table, row| }`: triggered upon clicking a table row
  • `on_row_double_clicked {|table, row| }`: triggered upon double-clicking a table row
  • `on_selection_changed {|table, selection, added_selection, removed_selection| }`: triggered upon selecting a table row

Code mini-example of table single-selection:


Code mini-example of table multi-selection:


The Table Sorting API includes the following for the `table` control:
- `sortable` (Boolean) [default: `true`]: enables automatic table sorting support
- `header_visible` (Boolean): shows or hides column headers

Additionally, if there is a need to do custom sorting, `sortable` could be set to `false`, and the following properties/listeners could be nested underneath `table` column controls (e.g. inside `text_column(name) {}`):
- `sort_indicator` (`Symbol`): sets sort indicator to ascending or descending with the value being `:ascending`, `:descending`, `:asc`, `:desc`, `:a`, or `:d`
- `on_clicked` (`Proc`): this listener is triggered when a table column is clicked so that it can handle sorting

Code mini-example of custom table sorting:

Here is a full code example of table selection and sorting done automatically with reliance on data-binding:



Here is a full code example of table selection and sorting done manually without data-binding:




No comments: