@dataloop-ai/components 0.16.49 → 0.16.50

package/package.json

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

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

@@ -415,15 +415,18 @@
             v-if="!hideBottom"
             :class="bottomClasses"
         >
-            <div class="dl-table__control">
-                <slot
-                    v-if="nothingToDisplay && !hideNoData"
-                    name="no-data"
-                >
-                    {{ bottomMessage }}
+            <div
+                v-if="nothingToDisplay && !hideNoData"
+                class="dl-table__control"
+            >
+                <slot name="no-data">
+                    {{ noDataMessage }}
                 </slot>
             </div>
-            <div class="dl-table__control">
+            <div
+                v-else
+                class="dl-table__control"
+            >
                 <slot
                     name="bottom"
                     v-bind="marginalsScope"
@@ -438,12 +441,13 @@
                     </div>
 
                     <slot
-                        v-bind="marginalsScope"
                         name="pagination"
+                        v-bind="marginalsScope"
                     >
                         <dl-pagination
                             v-if="displayPagination"
                             v-bind="marginalsScope.pagination"
+                            total-items="rows.length"
                             @update:rowsPerPage="
                                 (v) => setPagination({ rowsPerPage: v })
                             "
@@ -699,7 +703,7 @@ export default defineComponent({
         })
         //
 
-        const bottomMessage = computed(() => {
+        const noDataMessage = computed(() => {
             if (props.loading) {
                 return props.loadingLabel
             }
@@ -1257,7 +1261,7 @@ export default defineComponent({
             bottomClasses,
             hasTopSlots,
             nothingToDisplay,
-            bottomMessage,
+            noDataMessage,
             paginationState,
             hasTopSelectionMode,
             hasBotomSelectionBanner,

package/src/demos/DlTableDemo.vue

@@ -241,7 +241,48 @@
                 </div>
             </div>
             <div>
-                <p>#no-data & #pagination declare together</p>
+                <h3>slots #no-data & #pagination declare together</h3>
+                <h4>case 1: table with data</h4>
+                <p>
+                    rows should appear with slot#pagination, slot#no-data should
+                    not
+                </p>
+                <DlTable
+                    :rows="tableRows"
+                    :selected="selected"
+                    :separator="separator"
+                    :columns="columns"
+                    :bordered="bordered"
+                    :draggable="draggable"
+                    :dense="dense"
+                    class="sticky-header"
+                    :filter="filter"
+                    :selection="selection"
+                    :loading="loading"
+                    :resizable="resizable"
+                    row-key="name"
+                    color="dl-color-secondary"
+                    title="Table Title"
+                    :virtual-scroll="vScroll"
+                    style="height: 200px"
+                    :rows-per-page-options="rowsPerPageOptions"
+                    @row-click="log"
+                    @update:selected="updateSeleted"
+                >
+                    <template #pagination>
+                        <div style="background-color: #4db1d3">
+                            &lt slot#pagination >
+                        </div>
+                    </template>
+                    <template #no-data>
+                        <div style="background-color: #734145">
+                            &lt slot#no-data > should not be visible
+                        </div>
+                    </template>
+                </DlTable>
+                <h4>case 2: table with no data</h4>
+                <p>slot#no-data should appear, slot#pagination not</p>
+
                 <DlTable
                     :selected="selected"
                     :separator="separator"
@@ -264,10 +305,14 @@
                     @update:selected="updateSeleted"
                 >
                     <template #pagination>
-                        pagination slot, no-data slot should be visible too
+                        <div style="background-color: #734145">
+                            &lt slot#pagination > should not be visible
+                        </div>
                     </template>
                     <template #no-data>
-                        no-data slot, pagination slot should be visible too
+                        <div style="background-color: #2f3c4b">
+                            &lt slot#no-data >
+                        </div>
                     </template>
                 </DlTable>
             </div>