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

package/README.md

@@ -79,6 +79,9 @@ 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.70
+- Nile Table: Table body custom part added [UIF-959]
+
 #### Version 0.1.69
 - Nile Table: Column resize defect fix [UIF-959]
 

package/demo/index.html

@@ -23,271 +23,235 @@
     height: 38px;
   }
 
-  .column-controls {
-    margin-bottom: 20px;
-    padding: 15px;
-    background-color: #f5f5f5;
-    border-radius: 8px;
-    border: 1px solid #ddd;
-  }
-
-  .column-controls h3 {
-    margin: 0 0 15px 0;
-    font-size: 16px;
-    color: #333;
-  }
+  /* nile-table-row.expandableHeader::part(expandable-icon){visibility: hidden;
+  } */
 
-  .checkbox-group {
-    display: flex;
-    flex-wrap: wrap;
-    gap: 15px;
-  }
 
-  .checkbox-item {
-    display: flex;
-    align-items: center;
-    gap: 8px;
-  }
+  .mytable::part(base) {
+    /* height: 400px; */
+    overflow-y: auto;
+    -ms-overflow-style: none;
+    scrollbar-width: none;
 
-  .checkbox-item input[type="checkbox"] {
-    width: 16px;
-    height: 16px;
   }
 
-  .checkbox-item label {
-    font-size: 14px;
-    color: #555;
-    cursor: pointer;
-  }
+  .mytable nile-table-header-item {
+    position: sticky;
+    top: 0;
+    z-index: 3;
 
-  .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;
+  .mytable nile-table-row.expandableHeader {
+    position: sticky;
+    top: 0;
+    z-index: 3;
   }
 
-  nile-table-header-item[data-column="brand"],
-  nile-table-cell-item[data-column="brand"] {
-    min-width: 80px;
-    max-width: 80px;
-  }
 
-  nile-table-header-item[data-column="category"],
-  nile-table-cell-item[data-column="category"] {
-    min-width: 90px;
-    max-width: 90px;
+  .checkbox nile-table-cell-item:nth-child(1), .checkbox nile-table-header-item:nth-child(1) {
+    width: 64px;
   }
 
-  nile-table-header-item[data-column="price"],
-  nile-table-cell-item[data-column="price"] {
-    min-width: 70px;
-    max-width: 70px;
-  }
-
-  nile-table-header-item[data-column="rating"],
-  nile-table-cell-item[data-column="rating"] {
-    min-width: 70px;
-    max-width: 70px;
-  }
-
-  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;
+  .checkbox nile-table-cell-item:nth-child(2), .checkbox nile-table-header-item:nth-child(2) {
+    display: flex;
+    align-items: center;
+    gap: 4px;
   }
 
-  nile-table-header-item[data-column="warranty"],
-  nile-table-cell-item[data-column="warranty"] {
-    min-width: 70px;
-    max-width: 70px;
+  .checkbox nile-table-header-item:nth-child(1)::part(nile__table-header-cell) {
+    padding: 16px 0px 16px 24px;
   }
 
-  nile-table-header-item[data-column="availability"],
-  nile-table-cell-item[data-column="availability"] {
-    min-width: 80px;
-    max-width: 80px;
+  .checkbox nile-table-cell-item:nth-child(1) {
+    padding: 16px 0px 16px 24px; 
   }
 
-  nile-table-header-item[data-column="actions"],
-  nile-table-cell-item[data-column="actions"] {
-    min-width: 60px;
-    max-width: 60px;
+  .checkbox nile-table-header-item:nth-child(2)::part(nile__table-header-cell) {
+    padding: 12px 24px 12px 0px;
   }
 
-  /* Ensure table doesn't overflow */
-  nile-table-body {
-    width: 100%;
-    overflow-x: auto;
+  .checkbox nile-table-cell-item:nth-child(2) {
+    padding: 16px 50px 16px 0px;
   }
 
-  /* Make text smaller to fit in compact columns */
-  nile-table-header-item,
-  nile-table-cell-item {
-    font-size: 12px;
-    padding: 8px 4px;
-  }
+  /* First Name & Last Name - 15% each */
+ /* nile-table-header-item:nth-child(3),  nile-table-cell-item:nth-child(3)  {
+	width: 100px;
+} */
 </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>
+
+  <nile-table>
+    <nile-table-body class="mytable" expandableRows>
+      <nile-table-row class="expandableHeader" expandable="false">
+        <nile-table-header-item 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>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>
+    
+        <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-body>
+  </nile-table>
 
-        <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>
 
-    <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>
+  </div>
+  <script>
+    // document.addEventListener('nile-body-load', () => {
+    //   const cancel = document.querySelector('.cancel');
+    //   cancel.expandable = true;
+    //   // setTimeout(() => {
+    //   //   cancel.expandable = false;
+    //   //   setTimeout(() => {
+    //   //     cancel.expandable = true;
+    //   //   }, 3000);
+    //   // }, 4000);
+    // });
+  </script>
 </body>
 
-</html>
+</html>