@dataloop-ai/components 0.19.141 → 0.19.142

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dataloop-ai/components",
-  "version": "0.19.141",
+  "version": "0.19.142",
   "exports": {
     ".": "./index.ts",
     "./models": "./models.ts",

package/src/components/compound/DlTable/DlTable.vue

@@ -148,16 +148,16 @@
                                             }
                                         "
                                     >
-                                        <dl-ellipsis v-if="fitAllColumns">
+                                        <dl-ellipsis>
                                             {{ col.label }}
                                         </dl-ellipsis>
-                                        <span v-else> {{ col.label }} </span>
                                     </span>
                                 </DlTh>
                             </slot>
                             <DlTh
                                 v-if="showRowActions"
                                 key="visibleColumnsSlot"
+                                :col-index="-1"
                                 no-tooltip
                                 padding="0"
                             >
@@ -390,6 +390,7 @@
                                     v-if="showRowActions"
                                     key="visibleColumnsSlot"
                                     class="visible-columns-justify-end"
+                                    :col-index="-1"
                                     no-tooltip
                                 >
                                     <slot
@@ -540,18 +541,17 @@
                                             }
                                         "
                                     >
-                                        <dl-ellipsis v-if="fitAllColumns">
+                                        <dl-ellipsis>
                                             {{ col.label }}
                                         </dl-ellipsis>
-                                        <span v-else> {{ col.label }} </span>
                                     </span>
                                 </DlTh>
                             </slot>
                             <DlTh
                                 v-if="showRowActions"
                                 key="visibleColumnsSlot"
+                                :col-index="-1"
                                 no-tooltip
-                                style="width: 25px"
                                 :padding="isTreeTable ? '0' : '0 10px'"
                             >
                                 <slot
@@ -794,6 +794,7 @@
                                         v-if="showRowActions"
                                         key="visibleColumnsSlot"
                                         class="visible-columns-justify-end"
+                                        :col-index="-1"
                                         no-tooltip
                                     >
                                         <slot
@@ -883,7 +884,10 @@
                     v-bind="marginalsScope"
                 >
                     <div
-                        v-if="hasBotomSelectionBanner"
+                        v-if="
+                            hasBotomSelectionBanner &&
+                                selectedRowsLabel(rowsSelectedNumber)
+                        "
                         class="dl-table__control"
                     >
                         <div>
@@ -927,7 +931,6 @@ import {
     getCurrentInstance,
     ComputedRef,
     onMounted,
-    onBeforeUnmount,
     toRefs,
     nextTick,
     PropType
@@ -1243,7 +1246,7 @@ export default defineComponent({
             default: 'No data'
         },
         stickyColumns: {
-            type: String as PropType<TableStickyPosition>,
+            type: Object as PropType<TableStickyPosition>,
             default: null,
             validator: (value: string) =>
                 ['first', 'last', 'both'].includes(value)
@@ -1281,6 +1284,7 @@ export default defineComponent({
             noDataLabel,
             columns,
             fitAllColumns,
+            stickyColumns,
             resizable,
             hidePagination,
             hideSelectedBanner,
@@ -1413,7 +1417,7 @@ export default defineComponent({
             return computedPagination.value.rowsNumber || rows.value.length
         })
 
-        const updateTableSizing = () => {
+        onMounted(() => {
             tableEl =
                 tableRef.value ||
                 virtScrollRef.value.rootRef.querySelector('table') ||
@@ -1423,19 +1427,10 @@ export default defineComponent({
                 setAllColumnWidths(
                     tableEl,
                     columns.value as DlTableColumn[],
-                    props.stickyColumns,
-                    props.fitAllColumns
+                    stickyColumns.value,
+                    fitAllColumns.value
                 )
             })
-            return tableEl
-        }
-
-        onMounted(() => {
-            const tableEl = updateTableSizing()
-            window.addEventListener(
-                'virtual-scroll-content-update',
-                updateTableSizing
-            )
             if (visibleColumns.value) return
             if (resizable.value) {
                 applyResizableColumns(tableEl, vm)
@@ -1448,12 +1443,6 @@ export default defineComponent({
                 )
             }
         })
-        onBeforeUnmount(() => {
-            window.removeEventListener(
-                'virtual-scroll-content-update',
-                updateTableSizing
-            )
-        })
 
         watch(
             hasVirtScroll,
@@ -1469,8 +1458,8 @@ export default defineComponent({
                     setAllColumnWidths(
                         tableEl,
                         props.columns as DlTableColumn[],
-                        props.stickyColumns,
-                        props.fitAllColumns
+                        stickyColumns.value,
+                        fitAllColumns.value
                     )
                 })
                 if (visibleColumns.value) return
@@ -1509,8 +1498,8 @@ export default defineComponent({
                     setAllColumnWidths(
                         tableRef.value,
                         newColumns as DlTableColumn[],
-                        props.stickyColumns,
-                        props.fitAllColumns
+                        stickyColumns.value,
+                        fitAllColumns.value
                     )
                 })
             },

package/src/components/compound/DlTable/styles/dl-table-styles.scss

@@ -14,14 +14,6 @@
         z-index: 50;
     }
 
-    .dl-th {
-        z-index: 100;
-    }
-
-    .dl-th.sticky-col {
-        z-index: 101;
-    }
-
     .inner-th-wrapper {
         display: flex;
         align-items: center;
@@ -29,13 +21,7 @@
         gap: 6px;
         height: 34px;
         position: relative;
-        line-height: 34px;
-        &--left {
-            left: 0;
-            transform: none;
-        }
     }
-
     .inner-th {
         display: inline-block;
         flex: 0 1 auto;
@@ -45,13 +31,11 @@
         overflow: hidden;
         position: relative;
         line-height: 34px;
-
         &--left {
             left: 0;
             transform: none;
         }
     }
-
     .th-icons {
         display: flex;
         flex: 0 1 auto;
@@ -70,7 +54,7 @@
     border-collapse: separate;
     border-spacing: 0;
 
-    &__drag-icon>div {
+    &__drag-icon > div {
         transition: all ease-in 0.1s;
         opacity: 0;
     }
@@ -124,7 +108,7 @@
         height: 40px;
 
         &:not(.dl-tr--no-hover):hover {
-            .dl-table__drag-icon>div {
+            .dl-table__drag-icon > div {
                 opacity: 1;
             }
             td:not(.dl-td--no-hover) {
@@ -192,7 +176,7 @@
         }
     }
 
-    tbody>tr:not(.dl-tr--no-hover):hover>td:not(.dl-td--no-hover):before {
+    tbody > tr:not(.dl-tr--no-hover):hover > td:not(.dl-td--no-hover):before {
         content: '';
     }
 
@@ -222,7 +206,6 @@
     }
 
     &--no-wrap {
-
         th,
         td {
             white-space: nowrap;
@@ -232,12 +215,12 @@
     &__container {
         position: relative;
 
-        *>div:first-child {
+        * > div:first-child {
             border-top-left-radius: inherit;
             border-top-right-radius: inherit;
         }
 
-        *>div:last-child {
+        * > div:last-child {
             border-bottom-left-radius: inherit;
             border-bottom-right-radius: inherit;
         }
@@ -348,7 +331,7 @@
     td {
         border-color: var(--dl-color-separator);
 
-        &>label {
+        & > label {
             padding: 0;
         }
     }
@@ -482,7 +465,6 @@
     }
 
     .dl-table__select {
-
         .dl-field__control,
         .dl-field__native {
             min-height: 24px;
@@ -513,20 +495,18 @@
 
 .dl-table--horizontal-separator,
 .dl-table--cell-separator {
-
     thead th,
-    tbody tr:not(:last-child)>td {
+    tbody tr:not(:last-child) > td {
         border-bottom-width: 1px;
     }
 
-    tbody:not(:last-child)>tr>td {
+    tbody:not(:last-child) > tr > td {
         border-bottom-width: 1px;
     }
 }
 
 .dl-table--vertical-separator,
 .dl-table--cell-separator {
-
     td,
     th {
         border-left-width: 1px;

package/src/components/shared/DlVirtualScroll/useVirtualScroll.ts

@@ -846,7 +846,6 @@ export function useVirtualScroll({
             ['--dl-virtual-scroll-item-' + paddingSize]:
                 virtualScrollItemSizeComputed.value + 'px'
         }
-        const onUpdate = new Event('virtual-scroll-content-update')
 
         return [
             tag === 'tbody'
@@ -891,10 +890,7 @@ export function useVirtualScroll({
                     ref: styles ? 'grid' : contentRef,
                     tabindex: -1
                 },
-                (() => {
-                    window.dispatchEvent(onUpdate)
-                    return content.flat()
-                })()
+                content.flat()
             ),
 
             tag === 'tbody'

package/src/demos/DlTableDemo.vue

@@ -139,6 +139,7 @@
                     :virtual-scroll="vScroll"
                     style="height: 500px"
                     :rows-per-page-options="rowsPerPageOptions"
+                    :selected-rows-label="(val) => 'Selected rows ' + val"
                     @row-click="log"
                     @th-click="log"
                     @update:selected="updateSeleted"
@@ -256,11 +257,10 @@
             </div>
 
             <div style="margin-top: 100px">
-                With sticky columns: both AND virtual scroll
+                With sticky columns: both
                 <DlTable
                     :columns="[...tableColumns, ...tableColumns]"
                     sticky-columns="both"
-                    :virtual-scroll="true"
                     :rows="tableRows"
                     row-key="id"
                     style="height: 300px"
@@ -552,8 +552,13 @@
                     :visible-columns="
                         tableColumns.slice(0, -1).map((c) => c.name)
                     "
+                    loading
                     :resizable="true"
-                />
+                >
+                    <template #body-cell-row-actions>
+                        <dl-button label="ActionButton" />
+                    </template>
+                </DlTable>
             </div>
             <div>
                 <p>Virtual With editable columns</p>
@@ -748,7 +753,7 @@ const columns = [
         label: 'Calories',
         field: 'calories',
         sortable: true,
-        width: '10%'
+        width: '50px'
     },
     {
         name: 'fat',
@@ -1081,19 +1086,21 @@ export default defineComponent({
 
         const onScroll = ({ to, ref }: { to: number; ref: any }) => {
             const lastIndex = computedRows.value.length - 1
+
             if (
                 infiniteLoading.value !== true &&
                 nextPageNumber.value < lastPageNumber &&
                 to === lastIndex
             ) {
                 infiniteLoading.value = true
+
                 setTimeout(() => {
                     nextPageNumber.value++
                     nextTick(() => {
                         ref.refresh()
                         infiniteLoading.value = false
                     })
-                }, 1500)
+                }, 500)
             }
         }
 

package/src/utils/table-columns.ts

@@ -140,6 +140,9 @@ export function setAllColumnWidths(
     stickyColumns: TableStickyPosition,
     fitAllColumns: boolean
 ) {
+    const hasWidth = columns.some((col) => col.hasOwnProperty('width'))
+    if (!hasWidth) return
+    table.style.tableLayout = 'fixed'
     columns.forEach((col, i) => {
         browseNestedNodes(
             table,
@@ -154,6 +157,7 @@ export function setAllColumnWidths(
                             targetEl.querySelector('.inner-th').scrollWidth) +
                         getIconWidth(targetEl) +
                         35
+
                     // Set the width of the column
                     targetEl.style.width =
                         typeof col.width === 'number' || !col.width