cba-table

data

event

value

Documentation

Markup

    
<cba-table caption="Actions">
  <cba-column text="texts.data" width="33%">data</cba-column>
  <cba-column text="texts.event" width="33%">event</cba-column>
  <cba-column text="texts.value" width="33%">value</cba-column>
</cba-table>

"text" property

Specifies property value to be used as cell's text value.

property.subProperty Uses sub property
texts$0 Specific value from array property
property Use property value

    
<cba-column text="texts.data" width="33%">data</cba-column>
<cba-column text="values$0" width="33%">event</cba-column>
<cba-column text="type" width="33%">value</cba-column>

Add items

    
const cbaTable = document.querySelector("cba-table");
const items = [];
for (let index = 0; index < 30; index++) {
  items.push({
    id: "row" + index,
    data: "Info",
    texts: {
      data: "Data" + index,
      event: "Event" + index,
      value: "Value" + index
    }
  });
}

cbaTable.items = items;
cbaTable.selectRow("row0"); // select row

Add row - addRow()

    
cbaTable.addRow({
  data: "Info",
  texts: {
    data: `Data${num}`,
    event: `Event${num}`,
    value: `Value${num}`
  }
});

Delete row - deleteRow()

    
cbaTable.deleteRow("rowId");

const selectedItem = cbaTable.getSelectedItem();
cbaTable.deleteRow(selectedItem.id);

Update row - updateRow()

    
const row = cbaTable.getSelectedItem();
row.texts.value = "New value";
cbaTable.updateRow(row);