faster sortable table

[michaelglass]

What changes does this release include?

Adds a more performant sortable table by caching sorted data in the state.

easiest to review commit-by-commit

How has the API changed?

Please paste the output of elm diff run on latest master in the code block:

This is a MINOR change.

---- ADDED MODULES - MINOR ----

    Nri.Ui.SortableTable.V6

Rejiggers the API for SortableTable a bit.

• State becomes opaque, and is renamed Model
• because of this, encoders and decoders are included for the Model
• because of caching & opaque model, implements TEA and exposes an update function
• in order to initialize the model, dev now needs to pass in all columns
• when the SortableTable has no model attribute, it is "Loading", else it is loaded.

[bcardiff]

@bcardiff do you want me to support pagination here?

Only if you find a nice way to

• make it optional
• don't make it dependent of a specific pagination control

Another thing I recall is that SortableTable is for client only data, but it has some styling on headers. Is there a way to have a config that would make SortableTable work with a remote data source also? I think that supporting optional pagination and remote data source will allow us to design a better component api.

But, we can always iterate on a V7 with that and leave pagination and remote out of the picture for now.

[michaelglass]

💭 let's make this type opaque

[bcardiff]

Yes!

[bcardiff]

I see we need this to rebuild the model with new entries. The config of the table is usually in the view function.

This is fine, I personally would move into an idiom of having a tableConfig as a top level function that we can use from the view and from the update. That way we avoid the need to store functions in the model. But is fine as is. Just sharing thoughts.

[michaelglass]

can you elaborate here. I don't totally see what you'd do to make this better

[bcardiff]

If we do

type alias Columns id entry msg = List (Column id entry msg)

rebuild : Config data id -> Model id entry -> List entry -> Model id entry
view : Config data id -> List (Attribute id entry msg) -> Html msg -- flip the order of the first two arguments
update : Config data id -> Msg id -> Model id entry -> Model id entry

Then the model no longer needs the sorter. It deviates from other Nri.Ui components a little bit. But the config is usally fixed and bound to a specific "table instance", but we need to wire things manually for each rebuil / view / update.

Otherwise we could give more "essence" to a "table instance"

myTable = 
  let
    config = ...
  in
  { rebulid = SortableTable.rebuild config
  , view = SortableTable.view config
  , update = SortableTable.update config
  }

view = ...
  myTable.view ...

Again, nothing wrong with the current design. Just a thought.

[bcardiff]

Since the init, rebuild haves a mandatory List entry and the config can have a missing state it seems the user will be forced to do some tricky stuff to implement a "refresh button".

Should we make init and rebuild have a Maybe (List entry) instead?

I imagine:

• the app makes a request to load some entries remotely
• we don't have a table model yet.. ok. In the view I will not pass a model doing List.filerMap or something
• the app get the request
• we can initialize a table model now, with some choice of which column to sort with
• the user changes the sorting
• we have a refresh button to refetch things (but preserving the order) how we do that?
  • we need to know that the records are in Loading state, and in that case we don't include a model
  • we then rebuild the table model when the records arrived
  • it works but is odd that we need to leave the table model out of sync. we could at least rebuild it with an empty list of entries...

But if the List entry becomes a Maybe (List entry) we can rebuild things more easily and straight forward from a RemoteData (as anything that is not Succeed is mapped to Nothing).

(Slightly odd that the loading state don't show the arrows in the table header)

Not 100% sure. WDYT?

[michaelglass]

yeah I think this is a good idea.

[bcardiff]

Awesome!