@reusable-web/data-table v0.2.2

@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'
      },
    ]
  }
)