Datatable-3 - code helper

xxxxxxxxxx
 
<template>
    <MDBInput class="mb-4" v-model="search3" />
  <MDBDatatable :search="search3" :dataset="dataset7" />
</template>

xxxxxxxxxx
 
<style>
#app {
  font-family: Roboto, Helvetica, Arial, sans-serif;
}
​
.customTD {
  background: green
}
​
.datatable-body tr:nth-child(3) {
  background: lightblue
}
​
.link {
  color: blue
}
</style>

xxxxxxxxxx
 
<script>
  import { MDBDatatable, MDBInput } from "mdb-vue-ui-kit";
  import { ref } from "vue";
​
  export default {
    components: {
      MDBDatatable, MDBInput 
    },
    setup() {
      const search3 = ref("");
      
      const dataset7 = {
        columns: ["Name", "Position", "Office", "Age", "Start date", "Salary"],
        rows: [
          [
            "Tiger Nixon",
            "<span class='customTD'>System Architect</span>",
            "Edinburgh",
            "61",
            "2011/04/25",
            "$320,800"
          ],
          [
            "Garrett Winters",
            "<a class='link' href='#'>Accountant</a>",
            "Tokyo",
            "63",
            "2011/07/25",
            "$170,750"
          ],
          [
            "Ashton Cox",
            "Junior Technical Author",
            "San Francisco",
            "66",
            "2009/01/12",
            "$86,000"
          ],
          [
            "Cedric Kelly",
            "Senior Javascript Developer",
            "Edinburgh",
            "22",
            "2012/03/29",
            "$433,060"
          ],
          [
            "Airi Satou",
            "Accountant",
            "Tokyo",
            "33",
            "2008/11/28",
            "$162,700"
          ],
          [
            "Brielle Williamson",
            "Integration Specialist",
            "New York",
            "61",
            "2012/12/02",
            "$372,000"
          ],
          [
            "Herrod Chandler",
            "Sales Assistant",
            "San Francisco",
            "59",
            "2012/08/06",
            "$137,500"
          ],
          [
            "Rhona Davidson",
            "Integration Specialist",
            "Tokyo",
            "55",
            "2010/10/14",
            "$327,900"
          ],
          [
            "Colleen Hurst",
            "Javascript Developer",
            "San Francisco",
            "39",
            "2009/09/15",
            "$205,500"
          ],
          [
            "Sonya Frost",
            "Software Engineer",
            "Edinburgh",
            "23",
            "2008/12/13",
            "$103,600"
          ],
          [
            "Jena Gaines",
            "Office Manager",
            "London",
            "30",
            "2008/12/19",
            "$90,560"
          ],
          [
            "Quinn Flynn",
            "Support Lead",
            "Edinburgh",
            "22",
            "2013/03/03",
            "$342,000"
          ],
          [
            "Charde Marshall",
            "Regional Director",
            "San Francisco",
            "36",
            "2008/10/16",
            "$470,600"
          ],
          [
            "Haley Kennedy",
            "Senior Marketing Designer",
            "London",
            "43",
            "2012/12/18",
            "$313,500"
          ]
        ]
      };
      return {
        dataset7, search3
      };
    }
  };
</script>

Console errors: 0