add sortable columns

assets/img/chevron-up.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path fill="#eee" d="M240.971 130.524l194.343 194.343c9.373 9.373 9.373 24.569 0 33.941l-22.667 22.667c-9.357 9.357-24.522 9.375-33.901.04L224 227.495 69.255 381.516c-9.379 9.335-24.544 9.317-33.901-.04l-22.667-22.667c-9.373-9.373-9.373-24.569 0-33.941L207.03 130.525c9.372-9.373 24.568-9.373 33.941-.001z"></path></svg>

assets/styles/components/_table.scss

@@ -18,6 +18,22 @@
 
     th {
       font-weight: $weight-normal;
+
+      &.is-current-sort, &.is-sortable {
+        border-color: $primary;
+
+        &:hover {
+          border-color: #518e6a;
+        }
+      }
+
+      &.is-sortable {
+        .icon {
+          height: 1.071rem;
+          width: 1.071rem;
+          background-image: url('../img/chevron-up.svg')
+        }
+      }
     }
 
     td {

pages/index.vue

@@ -28,9 +28,11 @@
       :per-page="rowsPerPage"
       paginated
       pagination-position="both"
+      default-sort="followersCount"
+      default-sort-direction="desc"
     >
       <template slot-scope="props">
-        <b-table-column field="id" label="#" width="40" numeric>
+        <b-table-column field="id" label="#" width="40" sortable numeric>
           {{ props.row.id }}
         </b-table-column>
 
@@ -50,6 +52,10 @@
           </div>
         </b-table-column>
 
+        <b-table-column :centered="true" field="followersCount" label="Followers" sortable>
+          {{ props.row.followersCount > 0 ? numberFormater(props.row.followersCount) : '' }}
+        </b-table-column>
+
         <b-table-column field="name" label="Name">
           {{ props.row.name }}
         </b-table-column>
@@ -148,12 +154,19 @@ export default {
   },
   computed: {
     filteredContributions() {
-      return this.contributions
-        .filter((contribution) => {
-          const name = contribution.name || 'anonymous'
-          return name.toLowerCase().includes(this.contributionSearch.toLowerCase())
-        })
-        .reverse()
+      return this.contributions.filter((contribution) => {
+        const name = contribution.name || 'anonymous'
+        const company = contribution.company ?? ''
+        return (
+          name.toLowerCase().includes(this.contributionSearch.toLowerCase()) ||
+          company.toLowerCase().includes(this.contributionSearch.toLowerCase())
+        )
+      })
+    }
+  },
+  methods: {
+    numberFormater(num) {
+      return num > 999 ? ~~(num / 1000) + 'k' : num
     }
   }
   // async mounted() {