A Bulma HTML table

You can create a table by passing data to it and defining columns using the Table.Column component.

Look in the documentation for Table.Column for information on how to do sorting.

Album Released Artist
The Dark Side of the Moon March 1, 1973 Pink Floyd
OK Computer June 16, 1997 Radiohead
Disraeli Gears November 2, 1967 Cream
Physical Graffiti February 24, 1975 Led Zeppelin

<Table id="table" data={{ album <- @albums }} row_class={{ &row_class/2 }} bordered>
  <Column label="Album">
    {{ }}
  <Column label="Released">
    {{ album.released }}
  <Column label="Artist">
    <a href="#">{{ album.artist }}</a>

# Public API

Name Description Type Values Default
id Required. The id of the live component (required by LiveView for stateful components).

data Required. The data that populates the table internal.

expanded The table is expanded (full-width).

:boolean true
bordered Add borders to all the cells.

:boolean false
striped Add stripes to the table.

:boolean false
class The CSS class for the wrapping <div> element.

row_class A function that returns a class for the item's underlying <tr> element. The function receives the item and index related to the row.



Defines a column for the parent table component

The column instance is automatically added to the table's cols slot.

# Public API

Name Description Type Values Default
label Required. Column header text.

sort_by 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, &}
:any nil