Spreadsheet JS

Renders a TableGrid as a spreadsheet where each cell is an input. 

new Spreadsheet({
    records: [{
        name: 'Adrian Beltre',
        team: 'Texas Rangers',
        team_url: 'https://www.mlb.com/rangers',
        position: '3B'
    }, {
        name: 'Michael Young',
        team: 'Texas Rangers',
        captain: true,
        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: {
        name: {
            order: true
        },
        team: {},
        captain: {
            input: {
                type: 'checkbox'
            }
        },
        team_url: {
            render: r => "<a href=\"" + r.team_url + "\">URL</a>",
            input: {
                load: v => v.replace(/https?\:\/\//, ""),
                dump: v => "https://" + v
            }
        },
        position: {
            input: {
                type: 'select',
                load: v => v.toUpperCase(),
                dump: v => v.toUpperCase(),
                options: ['C', '1B', '2B', '3B', 'SS', 'LF', 'RF', 'CF', 'P']
            }
        },
        notes: {
            input: (r, done) => {
                const content = document.createElement('form');
                content.classList.add('bg-white', 'rounded', 'pad')
                content.innerHTML = "<h2>Notes</h2>"
                content.append(new window.Uniform.BoundInput({
                    type: 'textarea',
                    attribute: 'notes',
                    record: r,
                    rows: "10",
                    class: "uniformInput min-width-300-px block"
                }).el)
                const modal = new window.Uniform.Modal({
                    content: content
                }).render()
                
                const button = document.createElement('button')
                button.classList.add('uniformButton', '-green', 'margin-top')
                button.innerHTML = "Update"
                button.addEventListener('click', e => {
                    modal.close()
                })
                content.append(button)
                modal.addEventListener('closed', done)
            }
        }
    }
}).el

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
input function(record) || options Function or options to use to render an input over top of cell when activated.
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