Table

Sortable Table

Selectable Table

HTML

<x-table class="table-stripe" selectable="false">
</x-table>

JavaScript

const cols = [
    {label: 'Id', type: 'string'},
    {label: 'Name', type: 'string', sort: true},
    {label: 'Email', type: 'string', sort: true},
    {label: 'Age', type: 'number', sort: true},
    {label: 'Birthday', type: 'date'}
];
const rows = [
    ['1', 'John Doe', 'johndoe@gmail.com', 58, '1962-12-21'],
    ['2', 'Mary Hopkins', 'maryhopkins@gmail.com', 4, '1984-02-28'],
    ['3', 'Freddie Spenser', 'fastfreddie@gmail.com', 66, '1954-12-20'],
    ['4', 'Kenny Roberts', 'kingkenny@gmail.com', 68, '1952-02-01']
];
const table = document.querySelector('x-table');
const model = new TableDataModel();
model.setColumns(cols);
const ds = new SimpleDataSource(model);
table.setDataSource(ds);
ds.setData(cols, rows);