@likable-hair/svelte 4.0.39 → 4.0.40

package/dist/components/composed/list/DynamicTable.css

@@ -19,4 +19,6 @@
   --dynamic-table-default-end-line-background-color: transparent;
   --dynamic-table-default-end-line-color: rgb(var(--global-color-contrast-500));
   --dynamic-table-default-end-line-text-color: rgb(var(--global-color-contrast-500));
+  --dynamic-table-default-border-collapse: separate;
+  --dynamic-table-default-cell-border: 1px solid transparent;
 }

package/dist/components/composed/list/DynamicTable.svelte

@@ -11,7 +11,6 @@ import InfiniteScroll from "../../simple/common/InfiniteScroll.svelte";
 import Divider from "../../simple/common/Divider.svelte";
 import VerticalDraggableList from "../../simple/common/VerticalDraggableList.svelte";
 import Button from "../../simple/buttons/Button.svelte";
-import SimpleTextField from "../../simple/forms/SimpleTextField.svelte";
 import Autocomplete from "../../simple/forms/Autocomplete.svelte";
 import LabelAndSelect from "../forms/LabelAndSelect.svelte";
 import LabelAndTextField from "../forms/LabelAndTextField.svelte";
@@ -1055,7 +1054,7 @@ function resizeHeader(th, header) {
   </div>
   {/if}
 
-  <div class="outer-container">
+  <div class="outer-container {clazz.container}">
     <div class="inner-container" class:hide-scrollbar={hideScrollbar} bind:this={tableContainer} {onscroll}>
     <InfiniteScroll
       onloadMore={handleLoadBackward}
@@ -1064,7 +1063,7 @@ function resizeHeader(th, header) {
       direction='backward'
     />
     <table style="display: table;" class="dynamic-table" bind:this={tableHTML}>
-      <thead class="table-header" bind:this={mainHeader}>
+      <thead class="table-header {clazz.header}" bind:this={mainHeader}>
         <tr>
           {#if !!showSelect && !showExpand && rows.length > 0}
             <th
@@ -1213,7 +1212,7 @@ function resizeHeader(th, header) {
         {:else}
           {#each renderedRows as row, indexRow}
             <tr
-              class="item-row"
+              class="item-row {clazz.row}"
               class:pointer={!!onrowClick}
               data-key={row.item[uniqueKey]}
               style:background-color={
@@ -1280,6 +1279,7 @@ function resizeHeader(th, header) {
                       false
                     );
                   }}
+                  class={clazz.cell}
                 >
                   {#if header.type.key == "custom"}
                     {@render customRowSnippet?.({ index: indexRow, columnIndex: indexHeader, header, row })}
@@ -1894,7 +1894,10 @@ function resizeHeader(th, header) {
       --dynamic-table-background-color,
       var(--dynamic-table-default-background-color)
     );
-    border-collapse: separate;
+    border-collapse: var(
+      --dynamic-table-border-collapse,
+      var(--dynamic-table-default-border-collapse)
+    );
   }
 
   .dynamic-table.dynamic-resizable {
@@ -1986,7 +1989,10 @@ function resizeHeader(th, header) {
   }
 
   table {
-    border-collapse: separate;
+    border-collapse: var(
+      --dynamic-table-border-collapse,
+      var(--dynamic-table-default-border-collapse)
+    );
     width: 100%;
   }
 
@@ -2001,7 +2007,10 @@ function resizeHeader(th, header) {
 
   td {
     padding-left: 10px;
-    border: 1px solid transparent;
+    border: var(
+      --dynamic-table-cell-border,
+      var(--dynamic-table-default-cell-border)
+    );
   }
   table.dynamic-table > tbody > tr > td {
     overflow: hidden;
@@ -2014,8 +2023,8 @@ function resizeHeader(th, header) {
   }
 
   table.dynamic-table > tbody > tr > td.expanded-row {
-  overflow: visible;
-}
+    overflow: visible;
+  }
 
   .hover-cell:hover, .hover-cell:focus, .cell-edit-activator {
     cursor: pointer;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@likable-hair/svelte",
   "description": "A Svelte component for likablehair and others",
-  "version": "4.0.39",
+  "version": "4.0.40",
   "scripts": {
     "host": "vite --host",
     "dev": "vite dev",