Table list

<pm-table>
  <template sort="domain">
    <div>
      <div class="data-container">
        <span data-text="domain" class="domainName"></span>
        <span data-text="cookienum" class="cookiesNumber"></span>
      </div>
      <button class="icon delete"></button>
    </div>
    </template>
    <template sort="name$reverse">
      <div>
        <button class="icon edit"></button>
        <div class="data-container">
          <span data-text="name"></span>
          <span data-text="value"></span>
        </div>
        <button role="checkbox"></button>
      </div>
    </template>
</pm-table>
                

const dataObj = {
  id:    "example1.com",
  texts: {"domain": "example1.com", "cookienum": "3 Cookies"}
};
const dataSubObj = {
  id:    "subexample1.com",
  texts: {"domain": "subexample1.com", "cookienum": "3 Cookies"}
};
tableList.addItem(dataObj);
tableList.addItem(dataSubObj, "example1");
                  

const dataObjUpdate = {
  id:     "example2.com",
  texts: {"domain": "example2.com", "cookienum": "3 Cookies"}
};
tableList.updateItem(dataObjUpdate, "example1");
const dataObjUpdateSub = {
  id:    "subexample2.com",
  texts: {"domain": "subexample2.com", "cookienum": "3 Cookies"}
};
tableList.updateItem(dataObjUpdate, "subexample1.com", "example2.com");
                

// Removing sub item
tableList.removeItem("subexample2.com", "example2.com");
// Removing top item
tableList.removeItem("example2.com");