SurfaceBootstrap.Table.Column (surface_bootstrap v0.2.5)
Defines a column for the parent table component.
The column instance is automatically added to the table's
cols
slot.
Properties
- color :string, values: @colors - The color of the column.
- label :string, required: true - Column header text.
- footer :string - Footer text.
- width :integer, values: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12] - Col sizes from https://getbootstrap.com/docs/5.0/layout/columns/ .
- sort_by :any, default: nil - This prop takes a sort field, the following values are valid:
- A string that is a valid field on the table
- A function of arity 1 (uses default sorter)
- A tuple of {sorter_function/1, compare_function/2} All three options are sent as-is to Enum.sort_by/3
If function it will be used as such:
Enum.sort_by(data, sorter_function)
Clicking the column again will simply reverse the sort, after using the same sorter function whether it is a prop sorter or function sorter.
To do compound sorts based on for example .name and .last_name, you would supply a function like this:
fn i -> {Map.get(i, :name), Map.get(i, :last_name)} end
This would sort the data by first name first, then last name.
If you need to sort things that do not compare properly with the
built in <=
etc, then you can supply a sorter function. For dates
you would most likely want to supply the following tuple:
{fn i -> Map.get(i, :datefield) end, &Date.compare/2}
.
Link to this section Summary
Functions
Callback implementation for Phoenix.LiveComponent.mount/1
.
Callback implementation for Phoenix.LiveComponent.render/1
.
Callback implementation for Phoenix.LiveComponent.update/2
.
Link to this section Functions
mount(socket)
Callback implementation for Phoenix.LiveComponent.mount/1
.
render(arg)
Callback implementation for Phoenix.LiveComponent.render/1
.
update(assigns, socket)
Callback implementation for Phoenix.LiveComponent.update/2
.