npm - @aquera/nile-elements - Versions diffs - 0.1.70-beta-1.0 → 0.1.70-beta-1.2 - Mend

@aquera/nile-elements 0.1.70-beta-1.0 → 0.1.70-beta-1.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (297) hide show

package/README.md CHANGED Viewed

@@ -79,9 +79,24 @@ To run a local development server that serves the basic demo located in `demo/in
 In this section, you can find the updates for each release of `nile-elements`. It's a good practice to maintain detailed release notes to help users and developers understand what changes have been made from one version to another and how these changes might affect their projects.
+#### Version 0.1.69
+- Nile Table: Column resize defect fix [UIF-959]
+#### Version 0.1.68
+-  Nile Code Editor: Code Editor Fixes [UIF-956]
+#### Version 0.1.67
+- New Component: Nile Option Group [UIF-948]
 #### Version 0.1.66
   Nile Virtual Select: Provide option to pass class to `nile-option` [UIF-938]
+#### Version 0.1.55-patch-2
+- Nile Code Editor: Defect fix [UIF-939]
+#### Version 0.1.55-1
+- Nile Code Editor: Added defaultFont property, Enabled tab completion by default [UIF-887]
 #### Version 0.1.65
 - Nile Option: Added a CSS Part (Technical Change) [UIF-937]

package/demo/index.html CHANGED Viewed

@@ -23,355 +23,271 @@
     height: 38px;
   }
-  /* nile-table-row.expandableHeader::part(expandable-icon){visibility: hidden;
-  } */
+  .column-controls {
+    margin-bottom: 20px;
+    padding: 15px;
+    background-color: #f5f5f5;
+    border-radius: 8px;
+    border: 1px solid #ddd;
+  }
-/*
-  .mytable::part(base) {
-    height: 400px;
-    overflow-y: auto;
-    -ms-overflow-style: none;
-    scrollbar-width: none;
+  .column-controls h3 {
+    margin: 0 0 15px 0;
+    font-size: 16px;
+    color: #333;
+  }
+  .checkbox-group {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 15px;
   }
-  .mytable nile-table-header-item {
-    position: sticky;
-    top: 0;
-    z-index: 1;
+  .checkbox-item {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+  }
+  .checkbox-item input[type="checkbox"] {
+    width: 16px;
+    height: 16px;
   }
-  .mytable nile-table-row.expandableHeader {
-    position: sticky;
-    top: 0;
-    z-index: 1;
-  } */
+  .checkbox-item label {
+    font-size: 14px;
+    color: #555;
+    cursor: pointer;
+  }
+  .hidden-column {
+    display: none !important;
+  }
+  /* Column width adjustments to fit all columns */
+  nile-table-header-item[data-column="product"],
+  nile-table-cell-item[data-column="product"] {
+    min-width: 120px;
+    max-width: 120px;
+  }
-  /* First Name & Last Name - 15% each */
- /* nile-table-header-item:nth-child(3),  nile-table-cell-item:nth-child(3)  {
-	width: 100px;
-} */
-</style>
+  nile-table-header-item[data-column="brand"],
+  nile-table-cell-item[data-column="brand"] {
+    min-width: 80px;
+    max-width: 80px;
+  }
-<body>
+  nile-table-header-item[data-column="category"],
+  nile-table-cell-item[data-column="category"] {
+    min-width: 90px;
+    max-width: 90px;
+  }
-  <nile-table-body class="mytable" expandableRows singleRowExpand>
-    <nile-table-row class="expandableHeader" expandable="false">
-      <nile-table-header-item haveFilter class="header1">First Name</nile-table-header-item>
-      <nile-table-header-item class="header2">Last Name</nile-table-header-item>
-      <nile-table-header-item class="header3">Rating</nile-table-header-item>
-      <nile-table-header-item class="header4">Demo</nile-table-header-item>
-      <nile-table-header-item class="header5">Description</nile-table-header-item>
-    </nile-table-row>
-    <nile-table-row>
-      <nile-table-cell-item>Birat</nile-table-cell-item>
-      <nile-table-cell-item>Doe</nile-table-cell-item>
-      <nile-table-cell-item>4.5</nile-table-cell-item>
-      <nile-table-cell-item>Yes</nile-table-cell-item>
-      <nile-table-cell-item>Something</nile-table-cell-item>
-      <div slot="expanded" style="padding: 40px;">
-        <nile-table-body>
-          <nile-table-row>
-            <nile-table-header-item>First Name</nile-table-header-item>
-            <nile-table-header-item>Last Name</nile-table-header-item>
-            <nile-table-header-item>Rating</nile-table-header-item>
-            <nile-table-header-item>Demo</nile-table-header-item>
-            <nile-table-header-item>Description</nile-table-header-item>
-          </nile-table-row>
-          <nile-table-row>
-            <nile-table-cell-item>John</nile-table-cell-item>
-            <nile-table-cell-item>Doe</nile-table-cell-item>
-            <nile-table-cell-item>4.5</nile-table-cell-item>
-            <nile-table-cell-item>Yes</nile-table-cell-item>
-            <nile-table-cell-item>Something</nile-table-cell-item>
-          </nile-table-row>
-          <nile-table-row>
-            <nile-table-cell-item>John</nile-table-cell-item>
-            <nile-table-cell-item>Doe</nile-table-cell-item>
-            <nile-table-cell-item>4.5</nile-table-cell-item>
-            <nile-table-cell-item>No</nile-table-cell-item>
-            <nile-table-cell-item>Something</nile-table-cell-item>
-          </nile-table-row>
-          <nile-table-row>
-            <nile-table-cell-item>John</nile-table-cell-item>
-            <nile-table-cell-item>Doe</nile-table-cell-item>
-            <nile-table-cell-item>4.5</nile-table-cell-item>
-            <nile-table-cell-item>Yes</nile-table-cell-item>
-            <nile-table-cell-item>Something</nile-table-cell-item>
-          </nile-table-row>
-          <nile-table-row>
-            <nile-table-cell-item>John</nile-table-cell-item>
-            <nile-table-cell-item>Doe</nile-table-cell-item>
-            <nile-table-cell-item>4.5</nile-table-cell-item>
-            <nile-table-cell-item>No</nile-table-cell-item>
-            <nile-table-cell-item>Something</nile-table-cell-item>
-          </nile-table-row>
-        </nile-table-body>
-      </div>
-    </nile-table-row>
-    <nile-table-row>
-      <nile-table-cell-item>John</nile-table-cell-item>
-      <nile-table-cell-item>Doe</nile-table-cell-item>
-      <nile-table-cell-item>4.5</nile-table-cell-item>
-      <nile-table-cell-item>No</nile-table-cell-item>
-      <nile-table-cell-item>Something</nile-table-cell-item>
-      <div slot="expanded" style="padding: 40px;">
-        <nile-table-body>
-          <nile-table-row>
-            <nile-table-header-item>First Name</nile-table-header-item>
-            <nile-table-header-item>Last Name</nile-table-header-item>
-            <nile-table-header-item>Rating</nile-table-header-item>
-            <nile-table-header-item>Demo</nile-table-header-item>
-            <nile-table-header-item>Description</nile-table-header-item>
-          </nile-table-row>
-          <nile-table-row>
-            <nile-table-cell-item>John</nile-table-cell-item>
-            <nile-table-cell-item>Doe</nile-table-cell-item>
-            <nile-table-cell-item>4.5</nile-table-cell-item>
-            <nile-table-cell-item>Yes</nile-table-cell-item>
-            <nile-table-cell-item>Something</nile-table-cell-item>
-          </nile-table-row>
-          <nile-table-row>
-            <nile-table-cell-item>John</nile-table-cell-item>
-            <nile-table-cell-item>Doe</nile-table-cell-item>
-            <nile-table-cell-item>4.5</nile-table-cell-item>
-            <nile-table-cell-item>No</nile-table-cell-item>
-            <nile-table-cell-item>Something</nile-table-cell-item>
-          </nile-table-row>
-          <nile-table-row>
-            <nile-table-cell-item>John</nile-table-cell-item>
-            <nile-table-cell-item>Doe</nile-table-cell-item>
-            <nile-table-cell-item>4.5</nile-table-cell-item>
-            <nile-table-cell-item>Yes</nile-table-cell-item>
-            <nile-table-cell-item>Something</nile-table-cell-item>
-          </nile-table-row>
-          <nile-table-row>
-            <nile-table-cell-item>John</nile-table-cell-item>
-            <nile-table-cell-item>Doe</nile-table-cell-item>
-            <nile-table-cell-item>4.5</nile-table-cell-item>
-            <nile-table-cell-item>No</nile-table-cell-item>
-            <nile-table-cell-item>Something</nile-table-cell-item>
-          </nile-table-row>
-        </nile-table-body>
-      </div>
-    </nile-table-row>
-    <nile-table-row>
-      <nile-table-cell-item>John</nile-table-cell-item>
-      <nile-table-cell-item>Doe</nile-table-cell-item>
-      <nile-table-cell-item>4.5</nile-table-cell-item>
-      <nile-table-cell-item>No</nile-table-cell-item>
-      <nile-table-cell-item>Something</nile-table-cell-item>
-      <div slot="expanded" style="padding: 40px;">
-        <nile-table-body>
-          <nile-table-row>
-            <nile-table-header-item>First Name</nile-table-header-item>
-            <nile-table-header-item>Last Name</nile-table-header-item>
-            <nile-table-header-item>Rating</nile-table-header-item>
-            <nile-table-header-item>Demo</nile-table-header-item>
-            <nile-table-header-item>Description</nile-table-header-item>
-          </nile-table-row>
-          <nile-table-row>
-            <nile-table-cell-item>John</nile-table-cell-item>
-            <nile-table-cell-item>Doe</nile-table-cell-item>
-            <nile-table-cell-item>4.5</nile-table-cell-item>
-            <nile-table-cell-item>Yes</nile-table-cell-item>
-            <nile-table-cell-item>Something</nile-table-cell-item>
-          </nile-table-row>
-          <nile-table-row>
-            <nile-table-cell-item>John</nile-table-cell-item>
-            <nile-table-cell-item>Doe</nile-table-cell-item>
-            <nile-table-cell-item>4.5</nile-table-cell-item>
-            <nile-table-cell-item>No</nile-table-cell-item>
-            <nile-table-cell-item>Something</nile-table-cell-item>
-          </nile-table-row>
-          <nile-table-row>
-            <nile-table-cell-item>John</nile-table-cell-item>
-            <nile-table-cell-item>Doe</nile-table-cell-item>
-            <nile-table-cell-item>4.5</nile-table-cell-item>
-            <nile-table-cell-item>Yes</nile-table-cell-item>
-            <nile-table-cell-item>Something</nile-table-cell-item>
-          </nile-table-row>
-          <nile-table-row>
-            <nile-table-cell-item>John</nile-table-cell-item>
-            <nile-table-cell-item>Doe</nile-table-cell-item>
-            <nile-table-cell-item>4.5</nile-table-cell-item>
-            <nile-table-cell-item>No</nile-table-cell-item>
-            <nile-table-cell-item>Something</nile-table-cell-item>
-          </nile-table-row>
-        </nile-table-body>
-      </div>
-    </nile-table-row> <nile-table-row>
-      <nile-table-cell-item>John</nile-table-cell-item>
-      <nile-table-cell-item>Doe</nile-table-cell-item>
-      <nile-table-cell-item>4.5</nile-table-cell-item>
-      <nile-table-cell-item>No</nile-table-cell-item>
-      <nile-table-cell-item>Something</nile-table-cell-item>
-    </nile-table-row> <nile-table-row>
-      <nile-table-cell-item>John</nile-table-cell-item>
-      <nile-table-cell-item>Doe</nile-table-cell-item>
-      <nile-table-cell-item>4.5</nile-table-cell-item>
-      <nile-table-cell-item>No</nile-table-cell-item>
-      <nile-table-cell-item>Something</nile-table-cell-item>
-    </nile-table-row> <nile-table-row>
-      <nile-table-cell-item>John</nile-table-cell-item>
-      <nile-table-cell-item>Doe</nile-table-cell-item>
-      <nile-table-cell-item>4.5</nile-table-cell-item>
-      <nile-table-cell-item>No</nile-table-cell-item>
-      <nile-table-cell-item>Something</nile-table-cell-item>
-    </nile-table-row> <nile-table-row>
-      <nile-table-cell-item>John</nile-table-cell-item>
-      <nile-table-cell-item>Doe</nile-table-cell-item>
-      <nile-table-cell-item>4.5</nile-table-cell-item>
-      <nile-table-cell-item>No</nile-table-cell-item>
-      <nile-table-cell-item>Something</nile-table-cell-item>
-    </nile-table-row> <nile-table-row>
-      <nile-table-cell-item>John</nile-table-cell-item>
-      <nile-table-cell-item>Doe</nile-table-cell-item>
-      <nile-table-cell-item>4.5</nile-table-cell-item>
-      <nile-table-cell-item>No</nile-table-cell-item>
-      <nile-table-cell-item>Something</nile-table-cell-item>
-    </nile-table-row>
-    <nile-table-row>
-      <nile-table-cell-item>John</nile-table-cell-item>
-      <nile-table-cell-item>Doe</nile-table-cell-item>
-      <nile-table-cell-item>4.5</nile-table-cell-item>
-      <nile-table-cell-item>No</nile-table-cell-item>
-      <nile-table-cell-item>Something</nile-table-cell-item>
-    </nile-table-row>
-    <nile-table-row>
-      <nile-table-cell-item>John</nile-table-cell-item>
-      <nile-table-cell-item>Doe</nile-table-cell-item>
-      <nile-table-cell-item>4.5</nile-table-cell-item>
-      <nile-table-cell-item>Yes</nile-table-cell-item>
-      <nile-table-cell-item>Something</nile-table-cell-item>
-    </nile-table-row>
-    <nile-table-row>
-      <nile-table-cell-item>John</nile-table-cell-item>
-      <nile-table-cell-item>Doe</nile-table-cell-item>
-      <nile-table-cell-item>4.5</nile-table-cell-item>
-      <nile-table-cell-item>No</nile-table-cell-item>
-      <nile-table-cell-item>Something Something Something Something Something Something Something Something Something
-        Something Something Something Something Something Something Something Something Something Something Something
-        Something Something Something Something Something Something Something Something Something Something Something
-        Something Something
-      </nile-table-cell-item>
-      <div slot="expanded" style="padding: 40px;">
-        <nile-table-body>
-          <nile-table-row>
-            <nile-table-header-item>First Name</nile-table-header-item>
-            <nile-table-header-item>Last Name</nile-table-header-item>
-            <nile-table-header-item>Rating</nile-table-header-item>
-            <nile-table-header-item>Demo</nile-table-header-item>
-            <nile-table-header-item>Description</nile-table-header-item>
-          </nile-table-row>
-          <nile-table-row>
-            <nile-table-cell-item>John</nile-table-cell-item>
-            <nile-table-cell-item>Doe</nile-table-cell-item>
-            <nile-table-cell-item>4.5</nile-table-cell-item>
-            <nile-table-cell-item>Yes</nile-table-cell-item>
-            <nile-table-cell-item>Something</nile-table-cell-item>
-          </nile-table-row>
-          <nile-table-row>
-            <nile-table-cell-item>John</nile-table-cell-item>
-            <nile-table-cell-item>Doe</nile-table-cell-item>
-            <nile-table-cell-item>4.5</nile-table-cell-item>
-            <nile-table-cell-item>No</nile-table-cell-item>
-            <nile-table-cell-item>Something</nile-table-cell-item>
-          </nile-table-row>
-          <nile-table-row>
-            <nile-table-cell-item>John</nile-table-cell-item>
-            <nile-table-cell-item>Doe</nile-table-cell-item>
-            <nile-table-cell-item>4.5</nile-table-cell-item>
-            <nile-table-cell-item>Yes</nile-table-cell-item>
-            <nile-table-cell-item>Something</nile-table-cell-item>
-          </nile-table-row>
-          <nile-table-row>
-            <nile-table-cell-item>John</nile-table-cell-item>
-            <nile-table-cell-item>Doe</nile-table-cell-item>
-            <nile-table-cell-item>4.5</nile-table-cell-item>
-            <nile-table-cell-item>No</nile-table-cell-item>
-            <nile-table-cell-item>Something</nile-table-cell-item>
-          </nile-table-row>
-        </nile-table-body>
-      </div>
-    </nile-table-row>
-    <nile-table-row class="cancel" .expandable="false">
-      <nile-table-cell-item>John</nile-table-cell-item>
-      <nile-table-cell-item>Doe</nile-table-cell-item>
-      <nile-table-cell-item>4.5</nile-table-cell-item>
-      <nile-table-cell-item>No</nile-table-cell-item>
-      <nile-table-cell-item>Something </nile-table-cell-item>
+  nile-table-header-item[data-column="price"],
+  nile-table-cell-item[data-column="price"] {
+    min-width: 70px;
+    max-width: 70px;
+  }
-      <div slot="expanded" style="padding: 40px;">
-        <nile-table-body>
-          <nile-table-row>
-            <nile-table-header-item>First Name</nile-table-header-item>
-            <nile-table-header-item>Last Name</nile-table-header-item>
-            <nile-table-header-item>Rating</nile-table-header-item>
-            <nile-table-header-item>Demo</nile-table-header-item>
-            <nile-table-header-item>Description</nile-table-header-item>
-          </nile-table-row>
-          <nile-table-row>
-            <nile-table-cell-item>John</nile-table-cell-item>
-            <nile-table-cell-item>Doe</nile-table-cell-item>
-            <nile-table-cell-item>4.5</nile-table-cell-item>
-            <nile-table-cell-item>Yes</nile-table-cell-item>
-            <nile-table-cell-item>Something</nile-table-cell-item>
-          </nile-table-row>
-          <nile-table-row>
-            <nile-table-cell-item>John</nile-table-cell-item>
-            <nile-table-cell-item>Doe</nile-table-cell-item>
-            <nile-table-cell-item>4.5</nile-table-cell-item>
-            <nile-table-cell-item>No</nile-table-cell-item>
-            <nile-table-cell-item>Something</nile-table-cell-item>
-          </nile-table-row>
-          <nile-table-row>
-            <nile-table-cell-item>John</nile-table-cell-item>
-            <nile-table-cell-item>Doe</nile-table-cell-item>
-            <nile-table-cell-item>4.5</nile-table-cell-item>
-            <nile-table-cell-item>Yes</nile-table-cell-item>
-            <nile-table-cell-item>Something</nile-table-cell-item>
-          </nile-table-row>
-          <nile-table-row>
-            <nile-table-cell-item>John</nile-table-cell-item>
-            <nile-table-cell-item>Doe</nile-table-cell-item>
-            <nile-table-cell-item>4.5</nile-table-cell-item>
-            <nile-table-cell-item>No</nile-table-cell-item>
-            <nile-table-cell-item>Something</nile-table-cell-item>
-          </nile-table-row>
+  nile-table-header-item[data-column="rating"],
+  nile-table-cell-item[data-column="rating"] {
+    min-width: 70px;
+    max-width: 70px;
+  }
-        </nile-table-body>
-      </div>
-    </nile-table-row>
+  nile-table-header-item[data-column="stock"],
+  nile-table-cell-item[data-column="stock"] {
+    min-width: 80px;
+    max-width: 80px;
+  }
+  nile-table-header-item[data-column="release-date"],
+  nile-table-cell-item[data-column="release-date"] {
+    min-width: 90px;
+    max-width: 90px;
+  }
+  nile-table-header-item[data-column="warranty"],
+  nile-table-cell-item[data-column="warranty"] {
+    min-width: 70px;
+    max-width: 70px;
+  }
+  nile-table-header-item[data-column="availability"],
+  nile-table-cell-item[data-column="availability"] {
+    min-width: 80px;
+    max-width: 80px;
+  }
+  nile-table-header-item[data-column="actions"],
+  nile-table-cell-item[data-column="actions"] {
+    min-width: 60px;
+    max-width: 60px;
+  }
+  /* Ensure table doesn't overflow */
+  nile-table-body {
+    width: 100%;
+    overflow-x: auto;
+  }
-  </nile-table-body>
+  /* Make text smaller to fit in compact columns */
+  nile-table-header-item,
+  nile-table-cell-item {
+    font-size: 12px;
+    padding: 8px 4px;
+  }
+</style>
+<body>
+    <div style="padding: 30px; width: 500px;">
+        <!-- Column Visibility Controls -->
+        <div class="column-controls">
+            <h3>Column Visibility</h3>
+            <div class="checkbox-group">
+                <div class="checkbox-item">
+                    <input type="checkbox" id="col-product" checked>
+                    <label for="col-product">Product</label>
+                </div>
+                <div class="checkbox-item">
+                    <input type="checkbox" id="col-brand" checked>
+                    <label for="col-brand">Brand</label>
+                </div>
+                <div class="checkbox-item">
+                    <input type="checkbox" id="col-category" checked>
+                    <label for="col-category">Category</label>
+                </div>
+                <div class="checkbox-item">
+                    <input type="checkbox" id="col-price" checked>
+                    <label for="col-price">Price</label>
+                </div>
+                <div class="checkbox-item">
+                    <input type="checkbox" id="col-rating" checked>
+                    <label for="col-rating">Rating</label>
+                </div>
+                <div class="checkbox-item">
+                    <input type="checkbox" id="col-stock" checked>
+                    <label for="col-stock">Stock</label>
+                </div>
+                <div class="checkbox-item">
+                    <input type="checkbox" id="col-release-date" checked>
+                    <label for="col-release-date">Release Date</label>
+                </div>
+                <div class="checkbox-item">
+                    <input type="checkbox" id="col-warranty" checked>
+                    <label for="col-warranty">Warranty</label>
+                </div>
+                <div class="checkbox-item">
+                    <input type="checkbox" id="col-availability" checked>
+                    <label for="col-availability">Availability</label>
+                </div>
+                <div class="checkbox-item">
+                    <input type="checkbox" id="col-actions" checked>
+                    <label for="col-actions">Actions</label>
+                </div>
+            </div>
+        </div>
+        <nile-table-body >
+  <nile-table-row>
+    <nile-table-header-item resizable data-column="product">Product</nile-table-header-item>
+    <nile-table-header-item resizable data-column="brand">Brand</nile-table-header-item>
+    <nile-table-header-item resizable data-column="category">Category</nile-table-header-item>
+    <nile-table-header-item resizable data-column="price">Price</nile-table-header-item>
+    <nile-table-header-item resizable data-column="rating">Rating</nile-table-header-item>
+    <nile-table-header-item resizable data-column="stock">Stock</nile-table-header-item>
+    <nile-table-header-item resizable data-column="release-date">Release Date</nile-table-header-item>
+    <nile-table-header-item resizable data-column="warranty">Warranty</nile-table-header-item>
+    <nile-table-header-item resizable data-column="availability">Availability</nile-table-header-item>
+    <nile-table-header-item resizable data-column="actions">Actions</nile-table-header-item>
+  </nile-table-row>
+  <nile-table-row>
+    <nile-table-cell-item resizable data-column="product">MacBook Pro 16"</nile-table-cell-item>
+    <nile-table-cell-item resizable data-column="brand">Apple</nile-table-cell-item>
+    <nile-table-cell-item resizable data-column="category">Electronics</nile-table-cell-item>
+    <nile-table-cell-item resizable data-column="price">$2,499</nile-table-cell-item>
+    <nile-table-cell-item resizable data-column="rating">4.8/5</nile-table-cell-item>
+    <nile-table-cell-item resizable data-column="stock">15 units</nile-table-cell-item>
+    <nile-table-cell-item resizable data-column="release-date">Oct 2023</nile-table-cell-item>
+    <nile-table-cell-item resizable data-column="warranty">1 Year</nile-table-cell-item>
+    <nile-table-cell-item resizable data-column="availability">In Stock</nile-table-cell-item>
+    <nile-table-cell-item resizable data-column="actions">Edit</nile-table-cell-item>
+  </nile-table-row>
+  <nile-table-row>
+    <nile-table-cell-item resizable data-column="product">iPhone 15 Pro</nile-table-cell-item>
+    <nile-table-cell-item resizable data-column="brand">Apple</nile-table-cell-item>
+    <nile-table-cell-item resizable data-column="category">Electronics</nile-table-cell-item>
+    <nile-table-cell-item resizable data-column="price">$999</nile-table-cell-item>
+    <nile-table-cell-item resizable data-column="rating">4.7/5</nile-table-cell-item>
+    <nile-table-cell-item resizable data-column="stock">42 units</nile-table-cell-item>
+    <nile-table-cell-item resizable data-column="release-date">Sep 2023</nile-table-cell-item>
+    <nile-table-cell-item resizable data-column="warranty">1 Year</nile-table-cell-item>
+    <nile-table-cell-item resizable data-column="availability">In Stock</nile-table-cell-item>
+    <nile-table-cell-item resizable data-column="actions">Edit</nile-table-cell-item>
+  </nile-table-row>
+  <nile-table-row>
+    <nile-table-cell-item resizable data-column="product">AirPods Pro</nile-table-cell-item>
+    <nile-table-cell-item resizable data-column="brand">Apple</nile-table-cell-item>
+    <nile-table-cell-item resizable data-column="category">Audio</nile-table-cell-item>
+    <nile-table-cell-item resizable data-column="price">$249</nile-table-cell-item>
+    <nile-table-cell-item resizable data-column="rating">4.6/5</nile-table-cell-item>
+    <nile-table-cell-item resizable data-column="stock">78 units</nile-table-cell-item>
+    <nile-table-cell-item resizable data-column="release-date">Sep 2022</nile-table-cell-item>
+    <nile-table-cell-item resizable data-column="warranty">1 Year</nile-table-cell-item>
+    <nile-table-cell-item resizable data-column="availability">In Stock</nile-table-cell-item>
+    <nile-table-cell-item resizable data-column="actions">Edit</nile-table-cell-item>
+  </nile-table-row>
+  <nile-table-row>
+    <nile-table-cell-item resizable data-column="product">Samsung Galaxy S24</nile-table-cell-item>
+    <nile-table-cell-item resizable data-column="brand">Samsung</nile-table-cell-item>
+    <nile-table-cell-item resizable data-column="category">Electronics</nile-table-cell-item>
+    <nile-table-cell-item resizable data-column="price">$799</nile-table-cell-item>
+    <nile-table-cell-item resizable data-column="rating">4.5/5</nile-table-cell-item>
+    <nile-table-cell-item resizable data-column="stock">28 units</nile-table-cell-item>
+    <nile-table-cell-item resizable data-column="release-date">Jan 2024</nile-table-cell-item>
+    <nile-table-cell-item resizable data-column="warranty">2 Years</nile-table-cell-item>
+    <nile-table-cell-item resizable data-column="availability">Limited</nile-table-cell-item>
+    <nile-table-cell-item resizable data-column="actions">Edit</nile-table-cell-item>
+  </nile-table-row>
+  <nile-table-row>
+    <nile-table-cell-item resizable data-column="product">Sony WH-1000XM5</nile-table-cell-item>
+    <nile-table-cell-item resizable data-column="brand">Sony</nile-table-cell-item>
+    <nile-table-cell-item resizable data-column="category">Audio</nile-table-cell-item>
+    <nile-table-cell-item resizable data-column="price">$399</nile-table-cell-item>
+    <nile-table-cell-item resizable data-column="rating">4.9/5</nile-table-cell-item>
+    <nile-table-cell-item resizable data-column="stock">12 units</nile-table-cell-item>
+    <nile-table-cell-item resizable data-column="release-date">May 2022</nile-table-cell-item>
+    <nile-table-cell-item resizable data-column="warranty">1 Year</nile-table-cell-item>
+    <nile-table-cell-item resizable data-column="availability">In Stock</nile-table-cell-item>
+    <nile-table-cell-item resizable data-column="actions">Edit</nile-table-cell-item>
+  </nile-table-row>
+</nile-table-body>
+    </div>
-  </div>
-  <script>
-    document.addEventListener('nile-body-load', () => {
-      const cancel = document.querySelector('.expandableHeader');
-      // console.log(cancel.expandable);
-      setTimeout(() => {
-        // cancel.expandable = false;
-      });
-      // setTimeout(() => {
-      //   cancel.expandable = false;
-      //   setTimeout(() => {
-      //     cancel.expandable = true;
-      //   }, 3000);
-      // }, 4000);
-    });
-  </script>
+    <script>
+        // Column visibility functionality
+        document.addEventListener('DOMContentLoaded', function() {
+            const checkboxes = document.querySelectorAll('.checkbox-item input[type="checkbox"]');
+            checkboxes.forEach(checkbox => {
+                checkbox.addEventListener('change', function() {
+                    const columnName = this.id.replace('col-', '');
+                    const isVisible = this.checked;
+                    // Find all table cells with matching data-column attribute
+                    const columnCells = document.querySelectorAll(`[data-column="${columnName}"]`);
+                    columnCells.forEach(cell => {
+                        if (isVisible) {
+                            cell.classList.remove('hidden-column');
+                        } else {
+                            cell.classList.add('hidden-column');
+                        }
+                    });
+                });
+            });
+        });
+    </script>
 </body>
-</html>
+</html>