feat: CDataTable: add noItemsView prop #67

Author: woothu

src/components/index.d.ts

@@ -575,6 +575,9 @@ export declare class CDataTable extends Vue {
   footer: boolean
   loading: boolean
   clickableRows: boolean
+  noItemsView: {
+    noItems?: string, noResults?: string
+  }
 }
 
 export declare class CTabs extends Vue {

src/components/table/CDataTable.vue

@@ -145,7 +145,7 @@
               <slot name="no-items-view">
                 <div class="text-center my-5">
                   <h2>
-                    {{ passedItems.length ? 'No filtering results ' : 'No items' }}
+                    {{ noItemsText }}
                     <CIcon
                       width="30"
                       :content="$options.icons.cilBan"
@@ -263,7 +263,8 @@ export default {
     },
     footer: Boolean,
     loading: Boolean,
-    clickableRows: Boolean
+    clickableRows: Boolean,
+    noItemsView: Object
   },
   data () {
     return {
@@ -439,6 +440,13 @@ export default {
         label: this.itemsPerPageSelect.label || 'Items per page:',
         values: this.itemsPerPageSelect.values || [5, 10, 20, 50]
       }
+    },
+    noItemsText () {
+      const customValues = this.noItemsView || {}
+      if (this.passedItems.length) {
+        return customValues.noResults || 'No filtering results'
+      }
+      return customValues.noItems || 'No items'
     }
   },
   methods: {

src/components/table/tests/CDataTable.spec.js

@@ -46,7 +46,8 @@ function createCustomWrapper () {
       footer: true,
       sorterValue: { column: 'username', asc: false },
       columnFilterValue: { registered: '2', 'non_existing': 'smh' },
-      pagination: true
+      pagination: true,
+      noItemsView: { noResults: 'no results text', noItems: 'no items text'}
     },
     slots: {
       details: '<div class="details">Details slot</div>'
@@ -194,4 +195,15 @@ describe(ComponentName, () => {
     expect(localWrapper.vm.paginationSelect.label).toBe('new label')
     expect(localWrapper.vm.paginationSelect.values[1]).toBe(25)
   })
+  it('Properly sets no items view from prop', () => {
+    const localWrapper = createCustomWrapper()
+    localWrapper.setProps({
+      tableFilterValue: '12322'
+    })
+    expect(localWrapper.text()).toContain('no results text')
+    localWrapper.setProps({
+      items: []
+    })
+    expect(localWrapper.text()).toContain('no items text')
+  })
 })