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

Author: m0ksem

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" />
+  `,
+})

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