Table

The inevitable HTML table


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


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 data={{ album <- @albums }} rowClass={{ &rowClass/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
data Required. The data that populates the table.

: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
rowClass 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