order status click row to select

src/components/Status.vue

@@ -1,7 +1,9 @@
 <template>
   <div>
     <v-data-table :headers="datatableHeaders" :items="orders" item-value="id"
-                  :show-select="true" :show-expand="true" v-model="selected" select-strategy="single">
+                  :show-select="false" :show-expand="true" v-model="selected" select-strategy="single"
+                  :row-props="rowPropsHandler" :hover="true"
+    >
       <template v-slot:item.startTime="{ value }">{{ timestampString(value) }}</template>
       <template v-slot:item.input="{ item }">
         <span v-if="item.order.amountIsInput">
@@ -238,6 +240,11 @@ const datatableHeaders = [
   // {title: '', align: 'end', key: 'action'},
 ];
 
+const rowPropsHandler = ({ item }) => ({
+  class: selected.value.indexOf(item.id) !== -1 ? 'selected-row' : '',
+  onClick: () => selected.value = [item.id],
+})
+
 const orders = computed(()=>{
   // example twap
   // status = [
@@ -393,8 +400,6 @@ function describeTrancheTime(st, trancheIndex, isStart) {
 </script>
 
 <style scoped lang="scss">
-@use "src/styles/vars" as *;
-
 // columns
 .num {
   min-width: 1em;
@@ -417,5 +422,12 @@ function describeTrancheTime(st, trancheIndex, isStart) {
 }
 .cancel {
 }
-
+</style>
+
+<style lang="scss">
+@use "src/styles/settings" as *;
+
+tr.selected-row {
+  background-color: #616161;
+}
 </style>