Table

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">
    {{ album.name }}
  </Column>
  <Column label="Released">
    {{ album.released }}
  </Column>
  <Column label="Artist">
    <a href="#">{{ album.artist }}</a>
  </Column>
</Table>

# Public API

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

:string
data Required. The data that populates the table internal.

:list
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.

:css_class
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.

:fun


Table.Column

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.

:string
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, &Date.compare/2}
:any nil