TableGrid JS

Render a sortable table that has resizable and removable columns.

All changes to the table are saved in LocalStorage, so when the user views this table again, it's the same way they left it.

import { TableGrid } from 'uniform';
new TableGrid({
    records: [{
        name: 'Adrian Beltre',
        team: 'Texas Rangers',
            team_url: 'https://www.mlb.com/rangers',
        position: '3B'
    }, {
        name: 'Michael Young',
        team: 'Texas Rangers',
            team_url: 'https://www.mlb.com/rangers',
        position: '2B'
    }, {
        name: 'Elvis Andrus',
        team: 'Texas Rangers',
        team_url: 'https://www.mlb.com/rangers',
        position: 'SS'
    }],
    columns: {
        number: {static: "start"},
        name: [r => r.name, {order: true}],
        team: r => "<a href=\"" + r.team_url + "\">" + r.team + "</a>",
        position: [r => r.position, {
            class: 'text-right',
            order: true
        }]
    }
})

Options

Option Type Description
records Array Row data to pass to columns
columns function or {key: {options}, key2: {options}} Hash of column options used to render columns
storeKey String Key for saving to LocalStorage. Defaults to 'uniform/table' + Object.keys(columns).join("-"). optional
class, name, id, value String Accepts any html attribute that is then rendered on the modal element. optional

Column Options

Option Type Description
render function(record) Function to use to render cell
header string Render as header, defaults to column key optional
static string || boolean Always render column and exclude from removing/adding settings. "start" always prepends column, otherwise it will append optional
class String Render as class of cells of this column optional
order boolean or function(records) If column is orderable. If function passes records as arguments, and expects them to be returned ordered. If simply true, then orders by column key on records (ex. name: {order: true}, r1.name < r2.name) optional