change columns to array in datagrid.

add draggable column.

Author: davidcedres

src/components/compounds/Table/DataGrid.ts

@@ -2,34 +2,39 @@ import { type } from "os";
 import { threadId } from "worker_threads";
 
 class DataGrid {
-  columns: object;
+  columns: any[];
   rows: any[];
   originalRows: object[];
   checkedRows: {id: any}[];
   rowsPerPage: number;
   currentPage: number;
   draggingRow: {id: any};
   draggingRowIdx: number;
+  draggingColumn: {id: any};
+  draggingColumnIdx: number;
 
   constructor() {
-    this.columns = {};
+    this.columns = [];
     this.rows = [];
     this.originalRows = [];
     this.checkedRows = [];
     this.rowsPerPage = 0;
     this.currentPage = 0;
     this.draggingRow = null;
     this.draggingRowIdx = null;
+    this.draggingColumn = null;
+    this.draggingColumnIdx = null;
   }
 
   addColumn(name: string, caption: string, dataType: string, style: string) {
-    this.columns[name] = {
+    this.columns.push({
       name,
       caption,
       dataType,
       style,
-      show: true
-    }
+      show: true,
+      ascendant: true
+    })
   }
 
   addRow(content: object, index: number) {
@@ -80,41 +85,29 @@ class DataGrid {
     this.rows = this.originalRows.slice(this.currentPage*this.rowsPerPage, this.currentPage*this.rowsPerPage + this.rowsPerPage)
   }
 
-  // hide / show columns
-  showColumn(name: string) {
-    this.columns[name].show = true
-  }
-
-  hideColumn(name: string) {
-    this.columns[name].show= false
-  }
-
-  toggleColumn(column) {
-    column.show ? this.hideColumn(column.name) : this.showColumn(column.name)
+  toggleColumn({ name } : { name: string }) {
+    this.columns = this.columns.map(column => column.name === name ? ({ ...column, show: !column.show }) : column)
   }
 
   // construct new columns object with only the subobjects that have a key show as true
   getColumns() {
-    return Object.keys(this.columns).filter(column => this.columns[column].show).reduce((newColumns, key) => {
-      newColumns[key] = this.columns[key]
-      return newColumns
-    }, {})
+    return this.columns.filter(column => column.show)
   }
 
   /**
    * Row dragging methods
   */
-  onDragStart(event, row, idx) {
+  onDragStartRow(event, row, idx) {
     this.draggingRow = row;
     this.draggingRowIdx = idx;
   }
 
-  onDragEnd(event, row, idx) {
+  onDragEndRow(event, row, idx) {
     // do nothing
   }
 
   // callback called when user drops a row
-  onDrop(event, row, idx) {
+  onDropRow(event, row, idx) {
     const chunk = this.rows.splice(this.draggingRowIdx, 1)
     this.rows.splice(idx, 0, chunk[0])
 
@@ -123,14 +116,45 @@ class DataGrid {
   }
 
   // the event must be prevented for the onDrop method to get called
-  onDragOver(event, row, idx) {
+  onDragOverRow(event, row, idx) {
     this.rows[idx].selected = true
     event.preventDefault()
   }
 
-  onDragLeave(event, row, idx) {
+  onDragLeaveRow(event, row, idx) {
     this.rows[idx].selected = false
   }
+
+  /**
+   * Column dragging methods
+   */
+  onDragStartColumn(event, column, idx) {
+    this.draggingColumn = column;
+    this.draggingColumnIdx = idx;
+  }
+
+  onDragEndColumn(event, row, idx) {
+    // do nothing
+  }
+
+  // callback called when user drops a column
+  onDropColumn(event, column, idx) {
+    const chunk = this.columns.splice(this.draggingColumnIdx, 1)
+    this.columns.splice(idx, 0, chunk[0])
+
+    // remove selected from all columns
+    this.columns.forEach(column => column.selected = false)
+  }
+
+  // the event must be prevented for the onDrop method to get called
+  onDragOverColumn(event, column, idx) {
+    this.columns[idx].selected = true
+    event.preventDefault()
+  }
+
+  onDragLeaveColumn(event, column, idx) {
+    this.columns[idx].selected = false
+  }
 }
 
 export default DataGrid

src/components/compounds/Table/Table.vue

@@ -30,26 +30,18 @@ const Table = {
     hasResetBtn: Boolean,
     sortable: Boolean,
     expandable: Boolean,
-    draggable: Boolean,
+    draggableRows: Boolean,
+    draggableColumns: Boolean,
     editable: Boolean
   },
 
   setup(props, { emit }) {
-    // general state
+    // datagrid instance reference
     const data = ref(props.data)
-    const columnProperties = ref(props.data.columns)
-
-    // pagination state
     const pagination = ref(props.pagination)
     const rowsPerPage = ref(props.rowsPerPage)
     const currentPage = ref(0)
-
-    for (const colName in props.data.columns) {
-      columnProperties.value[colName].ascendant = true
-    }
-
     const search = reactive({})
-
     const expanded = ref(new Set())
 
     // whenever pagination props changes, update the class state accordingly
@@ -74,9 +66,9 @@ const Table = {
       props.data.switchPage()
     }
 
-    const sortColumn = colName => {
-      props.data.sortByColumn(colName, columnProperties.value[colName].ascendant)
-      columnProperties.value[colName].ascendant = !columnProperties.value[colName].ascendant
+    const sortColumn = column => {
+      props.data.sortByColumn(column.name, column.ascendant)
+      column.ascendant = !column.ascendant
     }
 
     const toggleExpanded = rowId => {
@@ -101,7 +93,7 @@ const Table = {
 
     const countColumns = computed(() => {
       return (
-        Object.keys(data.value.getColumns()).length +
+        data.value.getColumns().length +
         (props.checkable ? 1 : 0) +
         (props.expandable ? 1 : 0)
       )
@@ -119,7 +111,6 @@ const Table = {
 
     return {
       props,
-      columnProperties,
       data,
       search,
       sortColumn,
@@ -157,14 +148,20 @@ export default Table
           <td v-if="checkable" />
           <td v-if="expandable" />
           <th
-            v-for="column in data.getColumns()"
-            :key="column"
-            :class="column.style"
-            @click="sortable ? sortColumn(column.name) : null"
+            v-for="(column, idx) in data.getColumns()"
+            :key="idx"
+            :class="{ ...column.style, 'has-text-primary': column.selected }"
+            @click="sortable ? sortColumn(column) : null"
+            :draggable="draggableColumns"
+            @dragstart="data.onDragStartColumn($event, row, idx)"
+            @dragend="data.onDragEndColumn($event, column, idx)"
+            @drop="data.onDropColumn($event, column, idx)"
+            @dragover="data.onDragOverColumn($event, column, idx)"
+            @dragleave="data.onDragLeaveColumn($event, column, idx)"
           >
             {{ column.caption }}
             <span v-if="sortable">
-              {{ columnProperties[column.name].ascendant ? '&darr;' : '	&uarr;' }}
+              {{ column.ascendant ? '&darr;' : '	&uarr;' }}
             </span>
           </th>
         </tr>
@@ -186,12 +183,12 @@ export default Table
         </tr>
         <template v-for="(row, idx) in data.rows" :key="idx">
           <tr
-            :draggable="draggable"
-            @dragstart="data.onDragStart($event, row, idx)"
-            @dragend="data.onDragEnd($event, row, idx)"
-            @drop="data.onDrop($event, row, idx)"
-            @dragover="data.onDragOver($event, row, idx)"
-            @dragleave="data.onDragLeave($event, row, idx)"
+            :draggable="draggableRows"
+            @dragstart="data.onDragStartRow($event, row, idx)"
+            @dragend="data.onDragEndRow($event, row, idx)"
+            @drop="data.onDropRow($event, row, idx)"
+            @dragover="data.onDragOverRow($event, row, idx)"
+            @dragleave="data.onDragLeaveRow($event, row, idx)"
             :class="{ 'has-background-primary': row.selected, 'has-text-white': row.selected }"
           >
             <td v-if="checkable">