diff --git a/.gitignore b/.gitignore
index fe87f54..de887ed 100644
--- a/.gitignore
+++ b/.gitignore
@@ -1,8 +1,9 @@
 .DS_Store
+.idea
 node_modules/
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
 test/unit/coverage
 test/e2e/reports
-selenium-debug.log
\ No newline at end of file
+selenium-debug.log
diff --git a/package.json b/package.json
index f1f9b30..15d7e02 100644
--- a/package.json
+++ b/package.json
@@ -90,11 +90,13 @@
     "lolex": "^1.5.2",
     "mocha": "^3.2.0",
     "nightwatch": "^0.9.12",
+    "node-sass": "^4.5.3",
     "opn": "^4.0.2",
     "optimize-css-assets-webpack-plugin": "^1.3.0",
     "ora": "^1.2.0",
     "phantomjs-prebuilt": "^2.1.14",
     "rimraf": "^2.6.0",
+    "sass-loader": "^6.0.6",
     "selenium-server": "^3.0.1",
     "semver": "^5.3.0",
     "shelljs": "^0.7.6",
diff --git a/src/components/ClientDatasource.vue b/src/components/ClientDatasource.vue
index d2e7e38..f7770ab 100644
--- a/src/components/ClientDatasource.vue
+++ b/src/components/ClientDatasource.vue
@@ -15,6 +15,7 @@ export default {
         perpage: 10,
         selected: null, // row and Object selected on click event
         indexSelected: -1, // index row selected on click event
+        sortOrder: 0,
         search: '' // word to search in the table
       }
     }
@@ -44,4 +45,4 @@ export default {
 .mr1 {
   margin-right: 5px;
 }
-</style>
\ No newline at end of file
+</style>
diff --git a/src/components/ServerDatasource.vue b/src/components/ServerDatasource.vue
index 3d7f97d..453893a 100644
--- a/src/components/ServerDatasource.vue
+++ b/src/components/ServerDatasource.vue
@@ -127,6 +127,7 @@ export default {
       loading: false,
       selected: null, // row and Object selected on click event
       indexSelected: -1, // index row selected on click event
+      sortOrder: 0, // sort order selected on click event
       search: '', // word to search in the table,
       pagination: {
         total: 0,
@@ -152,7 +153,7 @@ export default {
     },
     columnItems () {
       return this.columns.map((column, index) => {
-        return <th>{ column.name }</th>
+        return <th on-click={ (e) => this.sortColumn(e, column, index) }>{ column.name }</th>
       })
     },
     columnObjects () {
@@ -189,6 +190,7 @@ export default {
     fetchFromObject: DatasourceUtils.fetchFromObject,
     changePage: DatasourceUtils.changePage,
     selectRow: DatasourceUtils.selectRow,
+    sortColumn: DatasourceUtils.sortColumn,
     dynamicClass (defaultClass, customClass) {
       return `${defaultClass} ${customClass}`
     },
@@ -259,9 +261,9 @@ export default {
     width: 100%;
     height: 100%;
     background: rgba(229, 229, 229, 0.5);
-    
+
     .v-spinner {
-      position: absolute; 
+      position: absolute;
       top: 50%;
       left: 50%;
       margin-left: -25px;
diff --git a/src/utils/DatasourceUtils.js b/src/utils/DatasourceUtils.js
index 85002f0..2e2ae32 100644
--- a/src/utils/DatasourceUtils.js
+++ b/src/utils/DatasourceUtils.js
@@ -1,3 +1,5 @@
+const sortDirections = ['DESC', 'ASC']
+
 export default {
   /**
    * Find the element value using Recursive Method and return the value rendered if it's defined
@@ -51,6 +53,13 @@ export default {
     }
   },
 
+  sortColumn (e, column, index) {
+    e.preventDefault()
+    const sortOrder = sortDirections[this.sortOrder]
+    this.sortOrder = +!this.sortOrder
+    this.$emit('sort', { column, sort: true, order: sortOrder })
+  },
+
   /**
    * Computed property: Building custom string information with translation
    * @returns {String}