<baht-edit-table>

A table whose cells are edited in place. A changed row shows Save (baht-row-save with { key, row }); removable adds Remove (baht-row-delete); addable adds a blank first row (baht-row-add with { row }). Feeding new rows clears the edits.

Basic

HTMLReactAngular

Copy

<baht-edit-table addable="true" removable="true"></baht-edit-table>

<script>
  const el = document.querySelector('baht-edit-table');
  el.columns = [
    {
      "key": "key",
      "label": "Key",
      "type": "readonly"
    },
    {
      "key": "label",
      "label": "Label"
    },
    {
      "key": "active",
      "label": "Active",
      "type": "checkbox"
    }
  ];
  el.rows = [
    {
      "id": 1,
      "key": "br-0001",
      "label": "Head Office",
      "active": true
    }
  ];
</script>

Props

Name	Type	Default	Description
columnsJS	EditColumn[]	[]	{ key, label, type?: 'text'|'number'|'checkbox'|'select'|'readonly', options? }
rowsJS	EditRow[]	[]	The records
row-key	string	'id'
addable	boolean	false	Show the add row
removable	boolean	false	Show Remove on each row
label	string	'Table'
rowKey	string	'id'	Field that identifies a row