feat(data-table): add no-data slot

epicmaxco · May 22, 2024 · 4fc7833 · 4fc7833
1 parent 13f786b
commit 4fc7833
Show file tree

Hide file tree

Showing 2 changed files with 43 additions and 4 deletions.
diff --git a/packages/ui/src/components/va-data-table/VaDataTable.stories.ts b/packages/ui/src/components/va-data-table/VaDataTable.stories.ts
@@ -197,3 +197,34 @@ export const ExpandableRow = () => ({
   </VaDataTable>
   `,
 })
+
+export const NoDataText = () => ({
+  components: { VaDataTable, VaPagination },
+  data: () => ({ columns, items }),
+
+  template: `
+    <VaDataTable :items="[]" :columns="columns" no-data-html="Test no data" />
+  `,
+})
+
+export const NoDataTextSlot = () => ({
+  components: { VaDataTable, VaPagination },
+  data: () => ({ columns, items }),
+
+  template: `
+    <VaDataTable :items="[]" :columns="columns">
+      <template #no-data>
+        <div class="text-center">No data Test</div>
+      </template>
+    </VaDataTable>
+  `,
+})
+
+export const NoFilteredDataText = () => ({
+  components: { VaDataTable, VaPagination },
+  data: () => ({ columns, items }),
+
+  template: `
+    <VaDataTable :items="[]" :columns="columns" filter="Aaa" no-data-filtered-html="Test no filtered data" />
+  `,
+})
diff --git a/packages/ui/src/components/va-data-table/VaDataTable.vue b/packages/ui/src/components/va-data-table/VaDataTable.vue
@@ -76,8 +76,11 @@
                 <td
                   class="va-data-table__table-td no-data"
                   colspan="99999"
-                  v-html="noDataHtml"
-                />
+                >
+                  <slot name="no-data">
+                    <div v-html="noDataHtml" />
+                  </slot>
+                </td>
               </tr>
 
               <tr
@@ -88,8 +91,13 @@
                 <td
                   class="va-data-table__table-td no-data"
                   colspan="99999"
-                  v-html="noDataFilteredHtml"
-                />
+                >
+                  <slot name="no-filtered-data">
+                    <slot name="no-data">
+                      <div v-html="noDataFilteredHtml" />
+                    </slot>
+                  </slot>
+                </td>
               </tr>
 
               <template