refactor: CTable: delete indexColumn prop

Author: woothu

src/components/index.d.ts

@@ -562,7 +562,6 @@ export declare class CTable extends Vue {
   fields: Array<any>
   itemsPerPage: number
   activePage: number
-  indexColumn: boolean
   filterRow: boolean
   pagination: [boolean, object]
   addTableClasses: [string, Array<any>, object]

src/components/table/CTable.vue

@@ -47,7 +47,6 @@
       <table :class="tableClasses">
         <thead>
           <tr>
-            <th v-if="indexColumn" style="width:40px"></th>
             <template v-for="(name, index) in columnNames">
               <th
                 @click="changeSort(rawColumnNames[index], index)"
@@ -74,7 +73,6 @@
           </tr>
 
           <tr v-if="columnFilter" class="table-sm">
-            <th v-if="indexColumn"></th>
             <template v-for="(colName, index) in rawColumnNames" >
               <th :class="headerClass(index)" :key="index">
                 <slot :name="`${rawColumnNames[index]}-filter`">
@@ -102,16 +100,6 @@
               @click="rowClicked(item, itemIndex + firstItemIndex)"
               :key="itemIndex"
             >
-                <slot
-                  v-if="indexColumn"
-                  name="index-column"
-                  :pageIndex="itemIndex"
-                  :index="firstItemIndex + itemIndex"
-                >
-                  <td>
-                    {{ firstItemIndex + itemIndex + 1 }}
-                  </td>
-                </slot>
               <template v-for="(colName, index) in rawColumnNames" >
                 <slot
                   v-if="$scopedSlots[colName]"
@@ -165,9 +153,8 @@
         </tbody>
 
 
-        <tfoot v-if="footer && currentItems.length > 3">
+        <tfoot v-if="footer && currentItems.length > 0">
           <tr>
-            <th v-if="indexColumn" style="width:40px"></th>
             <template v-for="(name, index) in columnNames">
               <th
                 @click="changeSort(rawColumnNames[index], index)"
@@ -240,7 +227,6 @@ export default {
       default: 10
     },
     activePage: Number,    
-    indexColumn: Boolean,
     columnFilter: Boolean,
     pagination: [Boolean, Object],
     addTableClasses: [String, Array, Object],
@@ -375,7 +361,7 @@ export default {
       return {'position-relative pr-4' : this.sortable }
     },
     colspan () {
-      return this.rawColumnNames.length + (this.indexColumn ? 1 : 0)
+      return this.rawColumnNames.length
     },
     isFiltered () {
       return this.tableFilterVal || Object.values(this.columnFilterVal).join('')

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

@@ -29,7 +29,6 @@ const customWrapper = mount(Component, {
       { key: 'show_details' , label:'', _style:'width:1%', sortable: false, filterable: false },
     ],
 
-    indexColumn: true,
     tableFilter: true,
     itemsPerPageSelect: true,
     addTableClasses: 'additional-table-class',
@@ -61,26 +60,26 @@ describe(ComponentName, () => {
   })
   it('changes sorting correctly', () => {
     expect(customWrapper.vm.sortedItems[0].username).toBe('Yiorgos Avraamu')
-    customWrapper.find('tr').findAll('th').at(4).trigger('click')
+    customWrapper.find('tr').findAll('th').at(3).trigger('click')
     expect(customWrapper.vm.sortedItems[0].status).toBe('Active')
 
-    customWrapper.find('tr').findAll('th').at(4).trigger('click')
+    customWrapper.find('tr').findAll('th').at(3).trigger('click')
     expect(customWrapper.vm.sortedItems[0].status).toBe('Pending')
   })
-  it('doesnt change sorter when clicked on noSortable column', () => {
+  it('doesnt change sorter when clicked on not sortable column', () => {
     const oldSorterColumn = customWrapper.vm.sorter.column
-    customWrapper.find('tr').findAll('th').at(5).trigger('click')
+    customWrapper.find('tr').findAll('th').at(4).trigger('click')
     expect(customWrapper.vm.sorter.column).toBe(oldSorterColumn)
   })
   it('renders pretified column names when fields are not defined', () => {
     customWrapper.setProps({ fields: undefined })
     expect(customWrapper.vm.columnNames[0]).toBe('Username')
   })
-  it('changes colspan when indexColumn is switched', () => {
-    const colspanWithIndexColumn = customWrapper.vm.colspan
-    customWrapper.setProps({ indexColumn: false })
-    expect(customWrapper.vm.colspan).toBe(colspanWithIndexColumn - 1)
-  })
+  // it('changes colspan when indexColumn is switched', () => {
+  //   const colspanWithIndexColumn = customWrapper.vm.colspan
+  //   customWrapper.setProps({ indexColumn: false })
+  //   expect(customWrapper.vm.colspan).toBe(colspanWithIndexColumn - 1)
+  // })
   it('table filter works correctly', () => {
     customWrapper.setData({ tableFilterVal: 'Yiorgos' })
     expect(customWrapper.vm.sortedItems.length).toBe(1)

src/components/table/tests/__snapshots__/CTable.spec.js.snap

@@ -11,10 +11,7 @@ exports[`CTable renders correctly 1`] = `
       class="table"
     >
       <thead>
-        <tr>
-          <!---->
-           
-        </tr>
+        <tr />
          
         <!---->
       </thead>
@@ -159,10 +156,6 @@ exports[`CTable renders correctly 2`] = `
     >
       <thead>
         <tr>
-          <th
-            style="width: 40px;"
-          />
-           
           <th
             class="user-custom-class position-relative pr-4"
             style="cursor: pointer; width: 40%;"
@@ -308,8 +301,6 @@ exports[`CTable renders correctly 2`] = `
         <tr
           class="table-sm"
         >
-          <th />
-           
           <th
             class="user-custom-class"
           >
@@ -352,12 +343,6 @@ exports[`CTable renders correctly 2`] = `
         class="position-relative"
       >
         <tr>
-          <td>
-            
-                  1
-                
-          </td>
-           
           <td
             class="user-custom-class"
           >
@@ -397,12 +382,6 @@ exports[`CTable renders correctly 2`] = `
          
         <!---->
         <tr>
-          <td>
-            
-                  2
-                
-          </td>
-           
           <td
             class="user-custom-class"
           >
@@ -442,12 +421,6 @@ exports[`CTable renders correctly 2`] = `
          
         <!---->
         <tr>
-          <td>
-            
-                  3
-                
-          </td>
-           
           <td
             class="user-custom-class"
           >
@@ -487,12 +460,6 @@ exports[`CTable renders correctly 2`] = `
          
         <!---->
         <tr>
-          <td>
-            
-                  4
-                
-          </td>
-           
           <td
             class="user-custom-class"
           >
@@ -532,12 +499,6 @@ exports[`CTable renders correctly 2`] = `
          
         <!---->
         <tr>
-          <td>
-            
-                  5
-                
-          </td>
-           
           <td
             class="user-custom-class"
           >
@@ -582,10 +543,6 @@ exports[`CTable renders correctly 2`] = `
        
       <tfoot>
         <tr>
-          <th
-            style="width: 40px;"
-          />
-           
           <th
             class="user-custom-class position-relative pr-4"
             style="cursor: pointer; width: 40%;"
@@ -739,7 +696,7 @@ exports[`CTable renders correctly 2`] = `
     style="display: none;"
   >
     <ul
-      class="pagination pagination-md justify-content-start"
+      class="pagination  justify-content-start"
     >
       <li
         class="page-item disabled"