cba-list

Documentation

Markup

    
<!-- Basic -->
<cba-list heading="Heading" subheading="Column"></cba-list>
<!-- Sortable -->
<cba-list sort="true" id="sortable" heading="Heading" subheading="Column"></cba-list>
<!-- Rows with tooltip -->
<cba-list id="functions" heading="Functions" drag="true" tooltip-text="tooltip.text" tooltip-link="tooltip.link"></cba-list>
    
  

Add items

    
const cbaList = document.querySelector("cba-list");

cbaList.items = [
  {
    id: "row1",
    data: "Info",
    text: "List1"
  },
  {
    id: "row2",
    data: "Info",
    text: "List2",
    subItems: [
      {
        id: "subrow1",
        data: "Info",
        text: "Sub List1"
      },
      {
        data: "Info",
        text: "Sub List2"
      }
    ]
  },
  {
    id: "row3",
    data: "Info",
    text: "List3"
  },
];
    
  

Add row - addRow()

    
cbaList.addRow({
  data: "Info",
  text: "List item1",
  id: "optional_id"
});
    
  

Add subitem - addRow()

    
const {id} = cbaList.getSelectedItem();
cbaList.addRow({
  data: "Sub Info",
  text: "Sub List item",
  id: "optional_sub_id"
}, id);
    
  

Delete row - deleteRow()

    
const item = cbaList.getSelectedItem();
cbaList.deleteRow(item.id);
    
  

Update row - updateRow()

    
const item = cbaList.getSelectedItem();
item.text = "New value";
cbaList.updateRow(item, item.id);
    
  

onSelect

    
cbaList.addEventListener("select", () =>
{
  const {info, test} = cbaList.getSelectedItem();
});