Table search
Bootstrap 5 Table search component
Responsive Table search built with Bootstrap 5. Super fast and easy to use searching functionality dedicated to bootstrap tables.
To learn more read Docs.
Basic example
<template>
<MDBInput v-model="search3" />
<MDBDatatable :dataset="dataset3" :search="search3" />
</template>
<script>
import { ref } from "vue";
import { MDBDatatable, MDBInput } from "mdb-vue-ui-kit";
export default {
components: {
MDBDatatable,
MDBInput
},
setup() {
const search3 = ref("");
const dataset3 = {
columns: ["Name", "Position", "Office", "Age", "Start date", "Salary"],
rows: [
[
"Tiger Nixon",
"System Architect",
"Edinburgh",
"61",
"2011/04/25",
"$320,800"
],
[
"Garrett Winters",
"Accountant",
"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 {
search3,
dataset3
};
}
};
</script>