@reusable-web/data-table
Project and documentation are a WIP
Variables
:root {
--data-table-border-colour: silver;
--data-table-cell-padding: 0.5em;
--data-table-header-bg-colour;
--data-table-header-colour;Examples
$('data-table[one]').setData([
{ one: 1, two: 2, three: false },
{ one: 10, two: 20, three: true },
],
{
columnOptions: [
{
column: 'one'
},
{
column: 'two'
},
{
column: 'three',
input: 'checkbox'
},
]
}
)
$('data-table[editable]').setData([
{ one: 1, three: false },
{ one: 10, three: true },
],
{
columnOptions: [
{
column: 'one',
editable: true
},
{
column: 'three',
input: 'checkbox'
}
]
}
)
$('data-table[action]').setData([
{ one: 1, button: 'select' },
{ one: 10, button: 'select'},
],
{
columnOptions: [
{
column: 'one',
editable: true
},
{
column: 'button',
action: 'select',
actionDisabledIf: (row) => row.one === 10
}
]
}
)
$('data-table[css]').setData([
{ one: 1, two: 2, three: false },
{ one: 10, two: 20, three: true },
],
{
columnOptions: [
{
column: 'one'
},
{
column: 'two'
},
{
column: 'three',
input: 'checkbox'
},
]
}
)