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 — —