riot-md-table

Material Design table component, for Riot.js

Work In Progress / Incomplete

Installation

bower install riot-md-table

or

npm install riot-md-table

Usage

<md-table data="{ data }" search="true" actions="4" onclick="{ onClick }">
    <md-table-col label="Col1" key="key1" order="desc" />
    <md-table-col label="Col2" key="key2" />
    <md-table-col label="Col3" key="key3" render="{ toDollars }" />
    <md-table-col label="Col4" key="key4" sorter="{ string }" />
    <md-table-col label="Actions" />
</md-table>
 
this.data = [
    { id: "id1", key1: "val1", key2: "val2", key3: "val3", key4: "val4" },
    { id: "id2", key1: "val1", key2: "val2", key3: "val3", key4: "val4" },
    { key1: "val1", key2: "val2", key3: "val3", key4: "val4" },
    { key1: "val1", key2: "val2", key3: "val3", key4: "val4" }
]
 
this.string = function (a, b) {
    return a.localeStringCompare(b);
}
 
this.toDollars = function (val) {
    return '$' + val;
}
 
this.onClick = function (e) {
    console.log('extra `click` listener for each row: ', e.item);
}

Options

For md-table

data

Type: Array
Default: []
Required: true

Table's data, an Array of Objects.

Each data Object should be the key:value pairs for a single row. These key names are used by md-table-col tags to select a data value.

An optional id key may be used to set the id attribute of the <tr> element.

data[ Object.id ]

Type: Mixed
Default: tr-{ index }
Required: false

If not set, the data object's index (within all of data) becomes the row's id: tr-{index}.

this.data = [
    {name: 'John', age: 32, job: 'Worker Bee'},
    {id: 'queen', name: 'Sally', age: 26, job: 'Queen Bee'}
    {name: 'Jack', age: 19, job: 'Worker Bee'},
];

<tbody>
    <tr id="tr-0">
        <td>John</td>
        <td>32</td>
        <td>Worker Bee</td>
    </tr>
    <tr id="queen">
        <td>Sally</td>
        <td>26</td>
        <td>Queen Bee</td>
    </tr>
    <tr id="tr-2">
        <td>Jack</td>
        <td>19</td>
        <td>Worker Bee</td>
    </tr>
</tbody>

search

Type: String
Default: null
Required: false

If set (any string is truthy), displays a search <input> that can be used to search the table rows for values.

Using space and , are synonymous with OR:

"aaa bbb" === "aaa,bbb" === "aaa, bbb" ===> Show any rows whose cells contain `aaa` OR `bbb`

actions

Type: Integer
Default: null
Required: false

If table has an "Actions" column (does not contain data), pass its column index here. 0 based.

onclick

Type: Function
Default: null
Required: false

Event handler for every <td> or <tr> within <tbody>. The event's event.item value will always be a <tr> node, even if a child cell triggered the click.

For md-table-col

label

Type: String
Required: true

The column's title.

width

Type: String
Default: auto
Required: false

The column's width. Pixel or percentage widths are allowed.

key

Type: String
Required: sometimes

The key corresponds to a data object key. Required if the column is meant to display data.

order

Type: String
Default: asc
Options: asc or desc
Required: false

The first direction when sorting.

For example, if desc, the first click on <th> will sort the column values in descending order. The second click will sort the values in ascending order.

render

Type: Function
Required: false

A custom function to manipulate the cell's original value. Useful for applying prefixes or suffixes to values.

The cell's original value will always be assigned as value to the <td> element, even if a render method is used.

<md-table>
  <md-table-col label="Value" render="{ toDollars }" />
</md-table>
<!-- method prepends all values with a '$' and appends '.00' -->
this.toDollars = function (val) {
    return '$' + val + '.00';
}

After mount:

<td width="auto">
    <div class="td__inner">$100.00</div>
</td>

console.log(td.value); // 100

sorter

Type: Function
Required: false

The sorting function used to arrange a column by its values. If not set then no sorting will occur when <th> is clicked.

License

MIT © Luke Edwards