feat: CDataTable: add header prop and itemsPerPageSelect options

Author: woothu

src/components/index.d.ts

@@ -563,7 +563,9 @@ export declare class CDataTable extends Vue {
   border: boolean
   outlined: boolean
   optionsRow: boolean | string
+  header: boolean
   footer: boolean
+  itemsPerPageSelect: boolean | { label?: string, values?: number[] }
   sorter: boolean | object
   columnFilter: boolean | object
   tableFilter: boolean | object

src/components/table/CDataTable.vue

@@ -22,7 +22,7 @@
         :class="{ 'offset-sm-6': !tableFilter }"
       >
         <div class="form-inline justify-content-sm-end">
-          <label class="mr-2">Items per page:</label>
+          <label class="mr-2">{{paginationSelect.label}}</label>
           <select
             class="form-control"
             @change="paginationChange"
@@ -31,7 +31,7 @@
               {{perPageItems}}
             </option>
             <option
-              v-for="(number, key) in [5,10,20,50]"
+              v-for="(number, key) in paginationSelect.values"
               :val="number"
               :key="key"
             >
@@ -47,7 +47,7 @@
     <div :class="`position-relative ${responsive ? 'table-responsive' : '' }`">
       <table :class="tableClasses">
         <thead>
-          <tr>
+          <tr v-if="header">
             <template v-for="(name, index) in columnNames">
               <th
                 @click="changeSort(rawColumnNames[index], index)"
@@ -245,7 +245,7 @@ export default {
     hover: Boolean,
     border: Boolean,
     outlined: Boolean,
-    itemsPerPageSelect: Boolean,
+    itemsPerPageSelect: [Boolean, Object],
     sorter: [Boolean, Object],
     tableFilter: [Boolean, Object],
     columnFilter: [Boolean, Object],
@@ -255,6 +255,10 @@ export default {
     },
     tableFilterValue: String,
     columnFilterValue: Object,
+    header: {
+      type: Boolean,
+      default: true
+    },
     footer: Boolean,
     loading: Boolean,
     clickableRows: Boolean
@@ -412,6 +416,12 @@ export default {
         label: this.tableFilter.label || 'Filter:',
         placeholder: this.tableFilter.placeholder || 'type string...'
       }
+    },
+    paginationSelect () {
+      return {
+        label: this.itemsPerPageSelect.label || 'Items per page:',
+        values: this.itemsPerPageSelect.values || [5, 10, 20, 50]
+      }
     }
   },
   methods: {

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

@@ -173,4 +173,16 @@ describe(ComponentName, () => {
     click(2)
     expect(localWrapper.vm.sorterState.asc).toBe(false)
   })
+  it('Properly sets itemsPerPageSelect options', () => {
+    const localWrapper = createCustomWrapper()
+
+    localWrapper.setProps({
+      itemsPerPageSelect: {
+        label: 'new label',
+        values: [10, 25, 50]
+      }
+    })
+    expect(localWrapper.vm.paginationSelect.label).toBe('new label')
+    expect(localWrapper.vm.paginationSelect.values[1]).toBe(25)
+  })
 })