@ukic/canary-web-components 3.0.0-canary.25 → 3.0.0-canary.27

package/dist/collection/components/ic-data-table/story-data.js

@@ -14,10 +14,10 @@ const ROW_HEADER_TITLES = [
 ];
 const imageIconSVG = '<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 -960 960 960" width="24"><path d="M180-120q-24 0-42-18t-18-42v-600q0-24 18-42t42-18h600q24 0 42 18t18 42v600q0 24-18 42t-42 18H180Zm0-60h600v-600H180v600Zm56-97h489L578-473 446-302l-93-127-117 152Zm-56 97v-600 600Z"/></svg>';
 const userIconSVG = '<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 -960 960 960" width="24"><path d="M480-481q-66 0-108-42t-42-108q0-66 42-108t108-42q66 0 108 42t42 108q0 66-42 108t-108 42ZM160-160v-94q0-38 19-65t49-41q67-30 128.5-45T480-420q62 0 123 15.5t127.921 44.694q31.301 14.126 50.19 40.966Q800-292 800-254v94H160Zm60-60h520v-34q0-16-9.5-30.5T707-306q-64-31-117-42.5T480-360q-57 0-111 11.5T252-306q-14 7-23 21.5t-9 30.5v34Zm260-321q39 0 64.5-25.5T570-631q0-39-25.5-64.5T480-721q-39 0-64.5 25.5T390-631q0 39 25.5 64.5T480-541Zm0-90Zm0 411Z"/></svg>';
-const alertIconSVG = '<svg aria-label="alert-icon" xmlns="http://www.w3.org/2000/svg" height="18" width="18" viewBox="0 0 24 24" fill="#000000"><path d="M11,15H13V17H11V15M11,7H13V13H11V7M12,2C6.47,2 2,6.5 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2M12,20A8,8 0 0,1 4,12A8,8 0 0,1 12,4A8,8 0 0,1 20,12A8,8 0 0,1 12,20Z"/></svg>';
-const copyIconSVG = '<svg aria-label="copy-button" xmlns="http://www.w3.org/2000/svg"  width="24" height="24" viewBox="0 0 24 24" fill="#000000"><path d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"/></svg>';
-const cellphoneIconSVG = '<svg aria-label="cellphone-button" xmlns="http://www.w3.org/2000/svg"  width="24" height="24" viewBox="0 0 24 24" fill="#000000"><path d="M17,19H7V5H17M17,1H7C5.89,1 5,1.89 5,3V21A2,2 0 0,0 7,23H17A2,2 0 0,0 19,21V3C19,1.89 18.1,1 17,1Z"/></svg>';
-const downloadIconSVG = '<svg aria-label="download-button" xmlns="http://www.w3.org/2000/svg"  width="24" height="24" viewBox="0 0 24 24" fill="#000000"><path d="M5,20H19V18H5M19,9H15V3H9V9H5L12,16L19,9Z"/></svg>';
+const alertIconSVG = '<svg xmlns="http://www.w3.org/2000/svg" height="18" width="18" viewBox="0 0 24 24" fill="#000000"><path d="M11,15H13V17H11V15M11,7H13V13H11V7M12,2C6.47,2 2,6.5 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2M12,20A8,8 0 0,1 4,12A8,8 0 0,1 12,4A8,8 0 0,1 20,12A8,8 0 0,1 12,20Z"/></svg>';
+const copyIconSVG = '<svg xmlns="http://www.w3.org/2000/svg"  width="24" height="24" viewBox="0 0 24 24" fill="#000000"><path d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"/></svg>';
+const cellphoneIconSVG = '<svg xmlns="http://www.w3.org/2000/svg"  width="24" height="24" viewBox="0 0 24 24" fill="#000000"><path d="M17,19H7V5H17M17,1H7C5.89,1 5,1.89 5,3V21A2,2 0 0,0 7,23H17A2,2 0 0,0 19,21V3C19,1.89 18.1,1 17,1Z"/></svg>';
+const downloadIconSVG = '<svg xmlns="http://www.w3.org/2000/svg"  width="24" height="24" viewBox="0 0 24 24" fill="#000000"><path d="M5,20H19V18H5M19,9H15V3H9V9H5L12,16L19,9Z"/></svg>';
 // TODO: Add columnOptions
 export const COLS = [
     {
@@ -912,49 +912,39 @@ export const COLS_ELEMENTS_SINGLE_ACTION = [
 ];
 export const DATA_ELEMENTS = [
     {
-        actions: `<ic-button variant='destructive' onClick='this.closest("tr").remove()'>Delete</ic-button>`,
         firstName: {
             data: "Joe",
             href: "https://www.example.com",
             target: "_blank",
             rel: "noopener noreferrer",
         },
-        actions2: `<ic-button aria-label="Delete row" variant='icon' onClick='this.closest("tr").remove()'><svg viewBox="0 0 24 24" role="presentation" style="width: 1.5rem; height: 1.5rem;"><path d="M19,4H15.5L14.5,3H9.5L8.5,4H5V6H19M6,19A2,2 0 0,0 8,21H16A2,2 0 0,0 18,19V7H6V19Z" style="fill: currentcolor;"></path></svg></ic-button>`,
         age: 30,
         jobTitle: "Developer",
         address: "1 Main Street, Town, County, Postcode",
     },
     {
-        actions: `<ic-button variant='destructive' onClick='this.closest("tr").remove()'>Delete</ic-button>`,
         firstName: {
             data: "Sarah",
             href: "https://www.example.org",
         },
-        actions2: `<ic-button aria-label="Delete row" variant='icon' onClick='this.closest("tr").remove()'><svg viewBox="0 0 24 24" role="presentation" style="width: 1.5rem; height: 1.5rem;"><path d="M19,4H15.5L14.5,3H9.5L8.5,4H5V6H19M6,19A2,2 0 0,0 8,21H16A2,2 0 0,0 18,19V7H6V19Z" style="fill: currentcolor;"></path></svg></ic-button>`,
         age: 28,
         jobTitle: "Senior Software Developer, Site Reliability Engineering",
         address: "2 Main Street, Town, Country, Postcode",
     },
     {
-        actions: `<ic-button variant='destructive' onClick='this.closest("tr").remove()'>Delete</ic-button>`,
         firstName: "Mark",
-        actions2: `<ic-button aria-label="Delete row" variant='icon' onClick='this.closest("tr").remove()'><svg viewBox="0 0 24 24" role="presentation" style="width: 1.5rem; height: 1.5rem;"><path d="M19,4H15.5L14.5,3H9.5L8.5,4H5V6H19M6,19A2,2 0 0,0 8,21H16A2,2 0 0,0 18,19V7H6V19Z" style="fill: currentcolor;"></path></svg></ic-button>`,
         age: 45,
         jobTitle: "Team Lead",
         address: "12 Key Street, Town, Country, Postcode",
     },
     {
-        actions: `<ic-button variant='destructive' onClick='this.closest("tr").remove()'>Delete</ic-button>`,
         firstName: "Naomi",
-        actions2: `<ic-button aria-label="Delete row" variant='icon' onClick='this.closest("tr").remove()'><svg viewBox="0 0 24 24" role="presentation" style="width: 1.5rem; height: 1.5rem;"><path d="M19,4H15.5L14.5,3H9.5L8.5,4H5V6H19M6,19A2,2 0 0,0 8,21H16A2,2 0 0,0 18,19V7H6V19Z" style="fill: currentcolor;"></path></svg></ic-button>`,
         age: 32,
         jobTitle: "Analyst",
         address: "8 Side Street, Town, Country, Postcode",
     },
     {
-        actions: `<ic-button variant='destructive' onClick='this.closest("tr").remove()'>Delete</ic-button>`,
         firstName: "Luke",
-        actions2: `<ic-button aria-label="Delete row" variant='icon' onClick='this.closest("tr").remove()'><svg viewBox="0 0 24 24" role="presentation" style="width: 1.5rem; height: 1.5rem;"><path d="M19,4H15.5L14.5,3H9.5L8.5,4H5V6H19M6,19A2,2 0 0,0 8,21H16A2,2 0 0,0 18,19V7H6V19Z" style="fill: currentcolor;"></path></svg></ic-button>`,
         age: 18,
         jobTitle: "Junior Developer",
         address: "5 New Street, Town, Country, Postcode",
@@ -962,7 +952,6 @@ export const DATA_ELEMENTS = [
 ];
 export const DATA_ELEMENTS_PAGINATION = [
     {
-        actions: `<ic-button onClick='console.log("1")'>1</ic-button>`,
         firstName: {
             data: "Joe",
             href: "https://www.example.com",
@@ -974,7 +963,6 @@ export const DATA_ELEMENTS_PAGINATION = [
         address: "1 Main Street, Town, County, Postcode",
     },
     {
-        actions: `<ic-button onClick='console.log("2")'>2</ic-button>`,
         firstName: {
             data: "Sarah",
             href: "https://www.example.org",
@@ -984,56 +972,48 @@ export const DATA_ELEMENTS_PAGINATION = [
         address: "2 Main Street, Town, Country, Postcode",
     },
     {
-        actions: `<ic-button onClick='console.log("3")'>3</ic-button>`,
         firstName: "Mark",
         age: 45,
         jobTitle: "Team Lead",
         address: "12 Key Street, Town, Country, Postcode",
     },
     {
-        actions: `<ic-button onClick='console.log("4")'>4</ic-button>`,
         firstName: "Naomi",
         age: 32,
         jobTitle: "Analyst",
         address: "8 Side Street, Town, Country, Postcode",
     },
     {
-        actions: `<ic-select placeholder="Placeholder goes here"></ic-select>`,
         firstName: "Luke",
         age: 18,
         jobTitle: "Junior Developer",
         address: "5 New Street, Town, Country, Postcode",
     },
     {
-        actions: `<ic-button onClick='console.log("6")'>6</ic-button>`,
         firstName: "Dave",
         age: 33,
         jobTitle: "Analyst",
         address: "4 Extra Street, Town, County, Postcode",
     },
     {
-        actions: `<ic-button onClick='console.log("7")'>7</ic-button>`,
         firstName: "Amy",
         age: 27,
         jobTitle: "Analyst",
         address: "3 Main Street, Town, Country, Postcode",
     },
     {
-        actions: `<ic-button onClick='console.log("8")'>8</ic-button>`,
         firstName: "Mary",
         age: 31,
         jobTitle: "Developer",
         address: "8 Main Street, Town, County, Postcode",
     },
     {
-        actions: `<ic-button onClick='console.log("9")'>9</ic-button>`,
         firstName: "Alice",
         age: 38,
         jobTitle: "Team Lead",
         address: "10 High Street, Town, Country, Postcode",
     },
     {
-        actions: `<ic-select placeholder="Placeholder goes here"></ic-select>`,
         firstName: "Ben",
         age: 40,
         jobTitle: "Team Lead",
@@ -1296,26 +1276,31 @@ export const DATA_ELEMENTS_WITH_DESCRIPTIONS = [
         address: "5 New Street, Town, Country, Postcode",
     },
 ];
-export const createDataTableElement = (caption, columns = COLS, data = DATA) => {
+export const createDataTableElement = (id, caption, columns = [], data = []) => {
+    var _a;
+    const existingTable = document.querySelector(`ic-data-table#${id}`);
+    if (existingTable)
+        (_a = existingTable.parentElement) === null || _a === void 0 ? void 0 : _a.removeChild(existingTable);
     const dataTable = document.createElement("ic-data-table");
+    dataTable.setAttribute("id", id);
     dataTable.setAttribute("caption", caption);
     dataTable.columns = columns;
     dataTable.data = data;
     return dataTable;
 };
 export const Basic = () => {
-    const dataTable = createDataTableElement("Basic Table");
+    const dataTable = createDataTableElement("basic", "Basic Table", COLS, DATA);
     dataTable.setAttribute("sortable", "true");
     return dataTable;
 };
 export const DataTableSizing = () => {
-    const dataTable = createDataTableElement("Basic Table", COLS_WIDTH, DATA);
+    const dataTable = createDataTableElement("data-table-sizing", "Basic Table", COLS_WIDTH, DATA);
     dataTable.setAttribute("width", "800px");
     dataTable.setAttribute("table-layout", "auto");
     return dataTable;
 };
 export const HiddenCol = () => {
-    const dataTable = createDataTableElement("Basic Table", COLS_HIDDEN, DATA);
+    const dataTable = createDataTableElement("hidden-col", "Basic Table", COLS_HIDDEN, DATA);
     const setColumnVisible = (visible) => {
         const cols = [...COLS_HIDDEN];
         cols[2].hidden = !visible;
@@ -1349,27 +1334,27 @@ export const HiddenCol = () => {
 //   return wrapper;
 // }
 export const LargeDataSet = () => {
-    const dataTable = createDataTableElement("Basic Table", LONG_COLS, LONG_DATA);
+    const dataTable = createDataTableElement("large-data-set", "Basic Table", LONG_COLS, LONG_DATA);
     dataTable.setAttribute("sortable", "true");
     return dataTable;
 };
 export const Embedded = () => {
-    const dataTable = createDataTableElement("Embedded Table");
+    const dataTable = createDataTableElement("embedded", "Embedded Table", COLS, DATA);
     dataTable.setAttribute("embedded", "true");
     return dataTable;
 };
 export const Dense = () => {
-    const dataTableDense = createDataTableElement("Dense Table");
+    const dataTableDense = createDataTableElement("dense", "Dense Table", COLS, DATA);
     dataTableDense.setAttribute("density", "dense");
     return dataTableDense;
 };
 export const Spacious = () => {
-    const dataTableSpacious = createDataTableElement("Spacious Table");
+    const dataTableSpacious = createDataTableElement("spacious", "Spacious Table", COLS, DATA);
     dataTableSpacious.setAttribute("density", "spacious");
     return dataTableSpacious;
 };
 export const Scrollable = () => {
-    const dataTable = createDataTableElement("Scrollable Table", LONG_COLS, LONG_DATA);
+    const dataTable = createDataTableElement("scrollable", "Scrollable Table", LONG_COLS, LONG_DATA);
     dataTable.setAttribute("embedded", "true");
     dataTable.style["height"] = "366px";
     const setStickyHeaders = (sticky) => {
@@ -1393,15 +1378,15 @@ export const Scrollable = () => {
     return wrapper;
 };
 export const HeaderTruncation = () => {
-    const dataTable = createDataTableElement("Column Header Truncation", COLS, DATA);
+    const dataTable = createDataTableElement("header-truncation", "Column Header Truncation", COLS, DATA);
     dataTable.setAttribute("column-header-truncation", "true");
     dataTable.style["height"] = "400px";
     dataTable.style["width"] = "500px";
     return dataTable;
 };
-export const RowHeaders = () => createDataTableElement("Row Header Table", ROW_HEADER_COLS, ROW_HEADER_DATA);
+export const RowHeaders = () => createDataTableElement("row-headers", "Row Header Table", ROW_HEADER_COLS, ROW_HEADER_DATA);
 export const Sort = () => {
-    const dataTable = createDataTableElement("Sort", COLS, DATA);
+    const dataTable = createDataTableElement("sort", "Sort", COLS, DATA);
     dataTable.setAttribute("sortable", "true");
     dataTable.addEventListener("icSortChange", (event) => {
         console.log("Sort changed", event.detail);
@@ -1409,7 +1394,7 @@ export const Sort = () => {
     return dataTable;
 };
 export const SortOptions = () => {
-    const dataTable = createDataTableElement("Sort Order", COLS, DATA);
+    const dataTable = createDataTableElement("sort-options", "Sort Order", COLS, DATA);
     dataTable.setAttribute("sortable", "true");
     dataTable.sortOptions = {
         sortOrders: ["descending", "unsorted"],
@@ -1422,7 +1407,7 @@ export const SortOptions = () => {
 };
 export const DisableSort = () => {
     const originalData = [...DATA];
-    const dataTable = createDataTableElement("Sort", COLS, DATA);
+    const dataTable = createDataTableElement("disable-sort", "Sort", COLS, DATA);
     dataTable.setAttribute("sortable", "true");
     dataTable.setAttribute("disable-auto-sort", "true");
     dataTable.addEventListener("icSortChange", (event) => {
@@ -1456,7 +1441,7 @@ export const DisableSort = () => {
 };
 export const DisableAutoSortColumns = () => {
     const originalData = [...DATA];
-    const dataTable = createDataTableElement("Disable sort on columns", COLS_DISABLE_AUTO_SORT, DATA);
+    const dataTable = createDataTableElement("disable-auto-sort-columns", "Disable sort on columns", COLS_DISABLE_AUTO_SORT, DATA);
     dataTable.setAttribute("sortable", "true");
     dataTable.addEventListener("icSortChange", (event) => {
         const { columnName, sorted } = event.detail;
@@ -1482,12 +1467,12 @@ export const DisableAutoSortColumns = () => {
     return dataTable;
 };
 export const ExcludeColumnsFromSort = () => {
-    const dataTable = createDataTableElement("Sort", COLS_EXCLUDE_SORT, DATA);
+    const dataTable = createDataTableElement("exclude-sort", "Sort", COLS_EXCLUDE_SORT, DATA);
     dataTable.setAttribute("sortable", "true");
     return dataTable;
 };
 export const Pagination = () => {
-    const dataTable = createDataTableElement("Pagination", LONG_COLS, LONG_DATA);
+    const dataTable = createDataTableElement("pagination", "Pagination", LONG_COLS, LONG_DATA);
     dataTable.setAttribute("show-pagination", "true");
     dataTable.paginationBarOptions = {
         itemsPerPageOptions: [
@@ -1500,12 +1485,45 @@ export const Pagination = () => {
     };
     return dataTable;
 };
-export const ColumnOverrides = () => createDataTableElement("Column Overrides", COLS_ALIGNMENT, DATA);
-export const RowOverrides = () => createDataTableElement("Row Overrides", ROW_HEADER_COLS, ROW_ALIGNMENT);
-export const CellOverrides = () => createDataTableElement("Cell Overrides", COLS, DATA_CELL_ALIGNMENT);
-export const LinksHTMLElements = () => createDataTableElement("Links and HTML Elements Overrides", COLS_ELEMENTS, DATA_ELEMENTS);
+export const ColumnOverrides = () => createDataTableElement("column-overrides", "Column Overrides", COLS_ALIGNMENT, DATA);
+export const RowOverrides = () => createDataTableElement("row-overrides", "Row Overrides", ROW_HEADER_COLS, ROW_ALIGNMENT);
+export const CellOverrides = () => createDataTableElement("cell-overrides", "Cell Overrides", COLS, DATA_CELL_ALIGNMENT);
+export const LinksHTMLElements = () => {
+    const dataTable = createDataTableElement("links-html-elements", "Links and HTML Elements Overrides", COLS_ELEMENTS, DATA_ELEMENTS);
+    DATA_ELEMENTS.map((_, index) => {
+        const button1 = document.createElement("ic-button");
+        button1.setAttribute("slot", "actions-" + index);
+        button1.setAttribute("variant", "destructive");
+        button1.innerHTML = "Delete";
+        dataTable.appendChild(button1);
+        button1.addEventListener("click", (e) => {
+            const btn = e.target;
+            btn.assignedSlot.closest("tr").remove();
+        });
+        const button2 = document.createElement("ic-button");
+        button2.setAttribute("slot", "actions2-" + index);
+        button2.setAttribute("variant", "icon-tertiary");
+        button2.setAttribute("aria-label", "Delete row");
+        button2.innerHTML = `<svg
+        viewBox="0 0 24 24"
+        role="presentation"
+        style="width: 1.5rem; height: 1.5rem;"
+      >
+        <path
+          d="M19,4H15.5L14.5,3H9.5L8.5,4H5V6H19M6,19A2,2 0 0,0 8,21H16A2,2 0 0,0 18,19V7H6V19Z"
+          style="fill: currentcolor;"
+        ></path>
+      </svg>`;
+        dataTable.appendChild(button2);
+        button2.addEventListener("click", (e) => {
+            const btn = e.target;
+            btn.assignedSlot.closest("tr").remove();
+        });
+    });
+    return dataTable;
+};
 export const SlottedElementsWithPagination = () => {
-    const dataTable = createDataTableElement("Slotted elements with pagination", COLS_ELEMENTS_SINGLE_ACTION, DATA_ELEMENTS_PAGINATION);
+    const dataTable = createDataTableElement("slotted-els-with-pagination", "Slotted elements with pagination", COLS_ELEMENTS_SINGLE_ACTION, DATA_ELEMENTS_PAGINATION);
     dataTable.setAttribute("show-pagination", "true");
     dataTable.paginationBarOptions = {
         itemsPerPageOptions: [
@@ -1516,11 +1534,29 @@ export const SlottedElementsWithPagination = () => {
         showGoToPageControl: true,
         selectedItemsPerPage: 5,
     };
+    DATA_ELEMENTS_PAGINATION.map((_, index) => {
+        if (index === 4 || index === 9) {
+            const select = document.createElement("ic-select");
+            select.setAttribute("slot", "actions-" + index);
+            select.setAttribute("placeholder", "Placeholder goes here");
+            dataTable.appendChild(select);
+        }
+        else {
+            const button = document.createElement("ic-button");
+            button.setAttribute("slot", "actions-" + index);
+            button.innerHTML = String(index);
+            dataTable.appendChild(button);
+            button.addEventListener("click", (e) => {
+                const btn = e.target;
+                console.log(btn.innerText);
+            });
+        }
+    });
     return dataTable;
 };
-export const Empty = () => createDataTableElement("Empty State", COLS, undefined);
+export const Empty = () => createDataTableElement("empty-state", "Empty State", COLS);
 export const EmptySlotted = () => {
-    const dataTable = createDataTableElement("Empty State", COLS, undefined);
+    const dataTable = createDataTableElement("empty-slotted", "Empty State", COLS);
     const emptyState = document.createElement("ic-empty-state");
     emptyState.setAttribute("aligned", "left");
     emptyState.setAttribute("heading", "Data source error");
@@ -1534,12 +1570,12 @@ export const EmptySlotted = () => {
     return dataTable;
 };
 export const Loading = () => {
-    const dataTable = createDataTableElement("Loading State", COLS, DATA);
+    const dataTable = createDataTableElement("loading", "Loading State", COLS, DATA);
     dataTable.setAttribute("loading", "true");
     return dataTable;
 };
 export const EmptyLoading = () => {
-    const dataTable = createDataTableElement("Empty and Loading State", COLS, undefined);
+    const dataTable = createDataTableElement("empty-loading", "Empty and Loading State", COLS);
     setTimeout(() => {
         dataTable.setAttribute("loading", "true");
         setTimeout(() => (dataTable.data = DATA), 10);
@@ -1547,14 +1583,18 @@ export const EmptyLoading = () => {
     return dataTable;
 };
 export const Updating = () => {
-    const dataTable = createDataTableElement("Updating State", COLS, DATA);
+    const dataTable = createDataTableElement("updating", "Updating State", COLS, DATA);
     dataTable.updatingOptions = { progress: 30 };
     dataTable.setAttribute("updating", "true");
     return dataTable;
 };
-export const CustomIcons = () => createDataTableElement("Custom icons", ICON_COLS, ICON_DATA);
-export const CustomRowHeights = () => {
-    const dataTable = createDataTableElement("Custom Row Heights", COLUMNS_NO_TEXT_WRAP, LONG_DATA_VALUES);
+export const CustomIcons = () => createDataTableElement("custom-icons", "Custom icons", ICON_COLS, ICON_DATA);
+export const CustomRowHeights = (id) => {
+    var _a;
+    const existing = document.querySelector(`div#${id}`);
+    if (existing)
+        (_a = existing.parentElement) === null || _a === void 0 ? void 0 : _a.removeChild(existing);
+    const dataTable = createDataTableElement(id, "Custom Row Heights", COLUMNS_NO_TEXT_WRAP, LONG_DATA_VALUES);
     dataTable.globalRowHeight = 80;
     dataTable.variableRowHeight = ({ name, age }) => name === "John Smith" || age === 41 ? 200 : null;
     const resetButton = document.createElement("ic-button");
@@ -1573,12 +1613,17 @@ export const CustomRowHeights = () => {
     buttonWrapper.insertAdjacentElement("afterbegin", setButton);
     buttonWrapper.insertAdjacentElement("beforeend", resetButton);
     const wrapper = document.createElement("div");
+    wrapper.setAttribute("id", id);
     wrapper.insertAdjacentElement("afterbegin", dataTable);
     wrapper.insertAdjacentElement("beforeend", buttonWrapper);
     return wrapper;
 };
 export const TruncationShowHide = () => {
-    const dataTable = CustomRowHeights().querySelector("ic-data-table");
+    var _a;
+    const existing = document.querySelector(`div#truncation-show-hide-wrapper`);
+    if (existing)
+        (_a = existing.parentElement) === null || _a === void 0 ? void 0 : _a.removeChild(existing);
+    const dataTable = CustomRowHeights("truncation-show-hide").querySelector("ic-data-table");
     dataTable.globalRowHeight = 40;
     dataTable.variableRowHeight = undefined;
     dataTable.truncationPattern = "show-hide";
@@ -1605,20 +1650,23 @@ export const TruncationShowHide = () => {
     buttonWrapper.insertAdjacentElement("beforeend", resetButton);
     buttonWrapper.insertAdjacentElement("beforeend", updateDataButton);
     const wrapper = document.createElement("div");
+    wrapper.setAttribute("id", "truncation-show-hide-wrapper");
     wrapper.insertAdjacentElement("afterbegin", dataTable);
     wrapper.insertAdjacentElement("beforeend", buttonWrapper);
     return wrapper;
 };
 export const TruncationTextWrap = () => {
-    const dataTable = createDataTableElement("Text Wrap", COLUMNS_TEXT_WRAP, TEXT_WRAP_LONG_DATA);
+    const dataTable = createDataTableElement("text-wrap", "Text Wrap", COLUMNS_TEXT_WRAP, TEXT_WRAP_LONG_DATA);
     dataTable.globalRowHeight = 40;
     dataTable.variableRowHeight = undefined;
-    const wrapper = document.createElement("div");
-    wrapper.insertAdjacentElement("afterbegin", dataTable);
-    return wrapper;
+    return dataTable;
 };
 export const TruncationTooltip = () => {
-    const dataTable = CustomRowHeights().querySelector("ic-data-table");
+    var _a;
+    const existing = document.querySelector(`div#truncation-tooltip-wrapper`);
+    if (existing)
+        (_a = existing.parentElement) === null || _a === void 0 ? void 0 : _a.removeChild(existing);
+    const dataTable = CustomRowHeights("truncation-tooltip").querySelector("ic-data-table");
     dataTable.globalRowHeight = 40;
     dataTable.variableRowHeight = undefined;
     dataTable.setAttribute("truncation-pattern", "tooltip");
@@ -1638,12 +1686,13 @@ export const TruncationTooltip = () => {
     buttonWrapper.insertAdjacentElement("afterbegin", setButton);
     buttonWrapper.insertAdjacentElement("beforeend", resetButton);
     const wrapper = document.createElement("div");
+    wrapper.setAttribute("id", "truncation-tooltip-wrapper");
     wrapper.insertAdjacentElement("afterbegin", dataTable);
     wrapper.insertAdjacentElement("beforeend", buttonWrapper);
     return wrapper;
 };
 export const CustomTitleBar = () => {
-    const dataTable = createDataTableElement("Custom Title Bar", COLS, DATA);
+    const dataTable = createDataTableElement("custom-title-bar", "Custom Title Bar", COLS, DATA);
     const titleBar = document.createElement("ic-data-table-title-bar");
     titleBar.setAttribute("description", "Data table description that describes the purpose of the table.");
     titleBar.setAttribute("metadata", "128 items | 32gb | Updated: 01/02/03");
@@ -1672,7 +1721,11 @@ export const CustomTitleBar = () => {
     return dataTable;
 };
 export const UpdatingData = () => {
-    const dataTable = createDataTableElement("Updating Data", LONG_COLS, []);
+    var _a;
+    const existing = document.querySelector(`div#updating-data-wrapper`);
+    if (existing)
+        (_a = existing.parentElement) === null || _a === void 0 ? void 0 : _a.removeChild(existing);
+    const dataTable = createDataTableElement("updating-data", "Updating Data", LONG_COLS, []);
     const pageOptions = [{ label: "5", value: "5" }];
     dataTable.showPagination = true;
     dataTable.paginationBarOptions = {
@@ -1714,13 +1767,14 @@ export const UpdatingData = () => {
     buttonWrapper.insertAdjacentElement("beforeend", updatePaginationButton);
     buttonWrapper.insertAdjacentElement("beforeend", resetPaginationButton);
     const wrapper = document.createElement("div");
+    wrapper.setAttribute("id", "updating-data-wrapper");
     wrapper.insertAdjacentElement("afterbegin", dataTable);
     wrapper.insertAdjacentElement("beforeend", buttonWrapper);
     return wrapper;
 };
 export const SlottedPagination = () => {
     let itemsPerPage = 5;
-    const dataTable = createDataTableElement("slotted-pagination", LONG_COLS, LONG_DATA);
+    const dataTable = createDataTableElement("slotted-pagination", "slotted-pagination", LONG_COLS, LONG_DATA);
     const paginationBar = document.createElement("ic-pagination-bar");
     paginationBar.setAttribute("total-items", `${LONG_DATA.length}`);
     paginationBar.setAttribute("show-items-per-page-control", "true");
@@ -1741,7 +1795,7 @@ export const SlottedPagination = () => {
     return dataTable;
 };
 export const ActionElement = () => {
-    const dataTable = createDataTableElement("Action Element", COLS, DATA);
+    const dataTable = createDataTableElement("action-element", "Action Element", COLS, DATA);
     const actionElement = document.createElement("div");
     actionElement.setAttribute("slot", "firstName-0-action-element");
     actionElement.setAttribute("style", "display: flex");
@@ -1769,9 +1823,9 @@ export const ActionElement = () => {
     dataTable.appendChild(actionElement);
     return dataTable;
 };
-export const MissingCellData = () => createDataTableElement("Missing Cell Data", COLS, DATA_WITH_EMPTY_VALUES);
+export const MissingCellData = () => createDataTableElement("missing-cell-data", "Missing Cell Data", COLS, DATA_WITH_EMPTY_VALUES);
 export const SelectWithCheckbox = () => {
-    const dataTable = createDataTableElement("Select using checkboxes", COLS, DATA);
+    const dataTable = createDataTableElement("select-using-checkboxes", "Select using checkboxes", COLS, DATA);
     dataTable.setAttribute("row-selection", "true");
     dataTable.addEventListener("icSelectedRowChange", (event) => {
         console.log("Selected row changed", event.detail);
@@ -1782,7 +1836,11 @@ export const SelectWithCheckbox = () => {
     return dataTable;
 };
 export const DevArea = () => {
-    const dataTable = createDataTableElement("Basic Table", COLS, VERY_LONG_DATA(5));
+    var _a;
+    const existing = document.querySelector(`div#dev-area-wrapper`);
+    if (existing)
+        (_a = existing.parentElement) === null || _a === void 0 ? void 0 : _a.removeChild(existing);
+    const dataTable = createDataTableElement("dev-area", "Basic Table", COLS, VERY_LONG_DATA(5));
     dataTable.sortable = true;
     dataTable.variableRowHeight = undefined;
     dataTable.showPagination = true;
@@ -1850,18 +1908,19 @@ export const DevArea = () => {
     buttonWrapper.insertAdjacentElement("beforeend", resetButton);
     buttonWrapper.insertAdjacentElement("beforeend", updateRows200Btn);
     const wrapper = document.createElement("div");
+    wrapper.setAttribute("id", "dev-area-wrapper");
     wrapper.insertAdjacentElement("beforeend", description);
     wrapper.insertAdjacentElement("beforeend", buttonWrapper);
     wrapper.insertAdjacentElement("beforeend", dataTable);
     return wrapper;
 };
 export const CellDescriptions = () => {
-    const dataTable = createDataTableElement("Cell descriptions data table", COLS, DATA_ELEMENTS_WITH_DESCRIPTIONS);
+    const dataTable = createDataTableElement("cell-descriptions", "Cell descriptions data table", COLS, DATA_ELEMENTS_WITH_DESCRIPTIONS);
     dataTable.setAttribute("sortable", "true");
     return dataTable;
 };
 export const LongCellDescriptions = () => {
-    const dataTable = createDataTableElement("Cell descriptions data table auto with tooltip", COLS, LONG_DATA_ELEMENTS_WITH_DESCRIPTIONS);
+    const dataTable = createDataTableElement("long-cell-descriptions", "Cell descriptions data table auto with tooltip", COLS, LONG_DATA_ELEMENTS_WITH_DESCRIPTIONS);
     const tooltipTruncationBtn = document.createElement("ic-button");
     tooltipTruncationBtn.textContent = "truncationPattern: tooltip";
     tooltipTruncationBtn.addEventListener("click", () => {