Datatables
Vue Bootstrap 5 Datatables
Vue Datatable is a component which mix tables with advanced options like searching, sorting and pagination.
Note: Read the API tab to find all available options and advanced customization
Basic example - HTML markup
Vue Datatable component can render your data in three ways. In the first one, you simply
create a HTML markup for your table inside MDBDatatable component - you can
customize your table later by adding props to the component. Some of the more
advanced options for columns, described in the
Advanced Data Structure section can be also
used by setting proper attritube directly to a column (f.e.
sort:"false").
Vue Datatable collects information from HTML markup to create a data structure - the
<table> element will be replaced in the DOM with a different node after
component initializes.
| Name | Position | Office | Age | Start date | Salary |
|---|---|---|---|---|---|
| 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 |
<template>
<MDBDatatable>
<table>
<thead>
<tr>
<th class="th-sm">Name</th>
<th class="th-sm">Position</th>
<th class="th-sm">Office</th>
<th class="th-sm">Age</th>
<th class="th-sm">Start date</th>
<th class="th-sm">Salary</th>
</tr>
</thead>
<tbody>
<tr>
<td>Tiger Nixon</td>
<td>System Architect</td>
<td>Edinburgh</td>
<td>61</td>
<td>2011/04/25</td>
<td>$320,800</td>
</tr>
<tr>
<td>Garrett Winters</td>
<td>Accountant</td>
<td>Tokyo</td>
<td>63</td>
<td>2011/07/25</td>
<td>$170,750</td>
</tr>
<tr>
<td>Ashton Cox</td>
<td>Junior Technical Author</td>
<td>San Francisco</td>
<td>66</td>
<td>2009/01/12</td>
<td>$86,000</td>
</tr>
<tr>
<td>Cedric Kelly</td>
<td>Senior Javascript Developer</td>
<td>Edinburgh</td>
<td>22</td>
<td>2012/03/29</td>
<td>$433,060</td>
</tr>
<tr>
<td>Airi Satou</td>
<td>Accountant</td>
<td>Tokyo</td>
<td>33</td>
<td>2008/11/28</td>
<td>$162,700</td>
</tr>
<tr>
<td>Brielle Williamson</td>
<td>Integration Specialist</td>
<td>New York</td>
<td>61</td>
<td>2012/12/02</td>
<td>$372,000</td>
</tr>
<tr>
<td>Herrod Chandler</td>
<td>Sales Assistant</td>
<td>San Francisco</td>
<td>59</td>
<td>2012/08/06</td>
<td>$137,500</td>
</tr>
<tr>
<td>Rhona Davidson</td>
<td>Integration Specialist</td>
<td>Tokyo</td>
<td>55</td>
<td>2010/10/14</td>
<td>$327,900</td>
</tr>
<tr>
<td>Colleen Hurst</td>
<td>Javascript Developer</td>
<td>San Francisco</td>
<td>39</td>
<td>2009/09/15</td>
<td>$205,500</td>
</tr>
<tr>
<td>Sonya Frost</td>
<td>Software Engineer</td>
<td>Edinburgh</td>
<td>23</td>
<td>2008/12/13</td>
<td>$103,600</td>
</tr>
<tr>
<td>Jena Gaines</td>
<td>Office Manager</td>
<td>London</td>
<td>30</td>
<td>2008/12/19</td>
<td>$90,560</td>
</tr>
<tr>
<td>Quinn Flynn</td>
<td>Support Lead</td>
<td>Edinburgh</td>
<td>22</td>
<td>2013/03/03</td>
<td>$342,000</td>
</tr>
<tr>
<td>Charde Marshall</td>
<td>Regional Director</td>
<td>San Francisco</td>
<td>36</td>
<td>2008/10/16</td>
<td>$470,600</td>
</tr>
<tr>
<td>Haley Kennedy</td>
<td>Senior Marketing Designer</td>
<td>London</td>
<td>43</td>
<td>2012/12/18</td>
<td>$313,500</td>
</tr>
</tbody>
</table>
</MDBDatatable>
</template>
<script>
import { MDBDatatable } from "mdb-vue-ui-kit";
export default {
components: {
MDBDatatable
}
};
</script>
Basic data structure
The second option is a very basic data structure, where columns are represented by an array of strings and so is each row. The table will match each string in a row to a corresponding index in a columns array. This data structure, as it's based on indexes, not key-value pairs, can be easily used for displaying data from the CSV format.
<template>
<MDBDatatable :dataset="dataset1" />
</template>
<script>
import { MDBDatatable } from "mdb-vue-ui-kit";
export default {
components: {
MDBDatatable
},
setup() {
const dataset1 = {
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 {
dataset1
};
}
};
</script>
Advanced data structure
The last and most advanced data structure allows customizing each column (sort, width, fixed,
field) and matches values from each row to a column in which the field equals to a given key
value. This data format can be easily used to display JSON data.
You can also use a mixed version, where columns are an array of object and each row is an array of strings.
<template>
<MDBDatatable :dataset="dataset2" />
</template>
<script>
import { MDBDatatable } from "mdb-vue-ui-kit";
export default {
components: {
MDBDatatable
},
setup() {
const dataset2 = {
columns: [
{ label: "Name", field: "name" },
{ label: "Position", field: "position", sort: false },
{ label: "Office", field: "office", sort: false },
{ label: "Age", field: "age", sort: false },
{ label: "Start date", field: "date" },
{ label: "Salary", field: "salary", sort: false }
],
rows: [
{
name: "Tiger Nixon",
position: "System Architect",
office: "Edinburgh",
age: 61,
date: "2011/04/25",
salary: "$320,800"
},
{
name: "Garrett Winters",
position: "Accountant",
office: "Tokyo",
age: 63,
date: "2011/07/25",
salary: "$170,750"
},
{
name: "Ashton Cox",
position: "Junior Technical Author",
office: "San Francisco",
age: 66,
date: "2009/01/12",
salary: "$86,000"
},
{
name: "Cedric Kelly",
position: "Senior Javascript Developer",
office: "Edinburgh",
age: 22,
date: "2012/03/29",
salary: "$433,060"
},
{
name: "Airi Satou",
position: "Accountant",
office: "Tokyo",
age: 33,
date: "2008/11/28",
salary: "$162,700"
},
{
name: "Brielle Williamson",
position: "Integration Specialist",
office: "New York",
age: 61,
date: "2012/12/02",
salary: "$372,000"
},
{
name: "Herrod Chandler",
position: "Sales Assistant",
office: "San Francisco",
age: 59,
date: "2012/08/06",
salary: "$137,500"
},
{
name: "Rhona Davidson",
position: "Integration Specialist",
office: "Tokyo",
age: 55,
date: "2010/10/14",
salary: "$327,900"
},
{
name: "Colleen Hurst",
position: "Javascript Developer",
office: "San Francisco",
age: 39,
date: "2009/09/15",
salary: "$205,500"
},
{
name: "Sonya Frost",
position: "Software Engineer",
office: "Edinburgh",
age: 23,
date: "2008/12/13",
salary: "$103,600"
},
{
name: "Jena Gaines",
position: "Office Manager",
office: "London",
age: 30,
date: "2008/12/19",
salary: "$90,560"
},
{
name: "Quinn Flynn",
position: "Support Lead",
office: "Edinburgh",
age: 22,
date: "2013/03/03",
salary: "$342,000"
},
{
name: "Charde Marshall",
position: "Regional Director",
office: "San Francisco",
age: 36,
date: "2008/10/16",
salary: "$470,600"
},
{
name: "Haley Kennedy",
position: "Senior Marketing Designer",
office: "London",
age: 43,
date: "2012/12/18",
salary: "$313,500"
}
]
};
return {
dataset2
};
}
};
</script>
Search
The search field is not a part of the Datatable - place an MDBInput component on your page and use
search property to filter entries.
<template>
<MDBInput class="mb-4" 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>
Advanced search
When using the searching method, you can specify which columns it should take under
consideration - pass an array of fields as
searchColumns property. By default, searching
will apply to all columns.
<template>
<MDBInput
v-model="search4"
@keydown.enter="search"
:formOutline="false"
inputGroup
placeholder="phrase in:field1,field2"
>
<MDBBtn color="primary" @click="search">
<MDBIcon icon="search" />
</MDBBtn>
</MDBInput>
<MDBDatatable
:dataset="dataset4"
:search="search4Phrase"
:searchColumns="search4Columns"
/>
</template>
<script>
import { ref } from "vue";
import { MDBDatatable, MDBInput, MDBBtn, MDBIcon } from "mdb-vue-ui-kit";
export default {
components: {
MDBDatatable,
MDBInput,
MDBBtn,
MDBIcon
},
setup() {
const search4 = ref("");
const search4Phrase = ref("");
const search4Columns = ref([]);
const search = () => {
let [phrase, columns] = search4.value
.split(" in:")
.map(str => str.trim());
if (columns) {
columns = columns.split(",").map(str => str.toLowerCase().trim());
}
search4Phrase.value = phrase;
search4Columns.value = columns;
};
const dataset4 = {
columns: [
{ label: "Name", field: "name" },
{ label: "Position", field: "position" },
{ label: "Office", field: "office" },
{ label: "Age", field: "age" },
{ label: "Start date", field: "date" },
{ label: "Salary", field: "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 {
search4,
search4Phrase,
search4Columns,
dataset4,
search
};
}
};
</script>
Selectable rows
When the selectable property is set to true, user can interact with your table by
selecting rows - you can get the selected rows by listening to the
selected-rows emitted event.
<template>
<MDBDatatable :dataset="dataset5" selectable multi />
</template>
<script>
import { MDBDatatable } from "mdb-vue-ui-kit";
export default {
components: {
MDBDatatable
},
setup() {
const dataset5 = {
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 {
dataset5
};
}
};
</script>
Scroll
Setting maximum height/width will enable vertical/horizontal scrolling.
<template>
<MDBDatatable :dataset="dataset6" :maxHeight="520" :maxWidth="520" />
</template>
<script>
import { MDBDatatable } from "mdb-vue-ui-kit";
export default {
components: {
MDBDatatable
},
setup() {
const dataset6 = {
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 {
dataset6
};
}
};
</script>
Fixed header
Use the fixedHeader property to ensure that a table's header is always visible
while scrolling.
<template>
<MDBDatatable :dataset="dataset7" :maxHeight="460" fixedHeader />
</template>
<script>
import { MDBDatatable } from "mdb-vue-ui-kit";
export default {
components: {
MDBDatatable
},
setup() {
const dataset7 = {
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 {
dataset7
};
}
};
</script>
Fixed columns
Making a column sticky requires setting two options - width and fixed. A first option is a
number of pixels, while the other one can be either a
true (in which case the column will stick on the left) or a string
right.
<template>
<MDBDatatable :dataset="dataset8" />
</template>
<script>
import { MDBDatatable } from "mdb-vue-ui-kit";
export default {
components: {
MDBDatatable
},
setup() {
const dataset8 = {
columns: [
{ label: 'Name', field: 'name', sort: true, width: 200, fixed: true },
{ label: 'Position', field: 'position', sort: false, width: 200 },
{ label: 'Office', field: 'office', sort: false, width: 200, fixed: true },
{ label: 'Age', field: 'age', sort: false, width: 200 },
{ label: 'Start date', field: 'date', sort: true, width: 200 },
{ label: 'Salary', field: 'salary', sort: false, width: 200, fixed: 'right' },
],
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 {
dataset8
};
}
};
</script>
Async data
Loading content asynchronously is an important part of working with data tables - with Vue
Datatable you can easily display content after fetching it from API by updating the dataset object. The component
watches dataset object and updates on each change. Additionally, setting a loading option to
true will disable all interactions and display a simple loader while awaiting
data.
<template>
<MDBBtn @click="reloadDataset9" color="primary" class="mb-4">
Reload data
<MDBIcon icon="sync" class="ms-2" />
</MDBBtn>
<MDBDatatable :dataset="dataset9" :loading="loading9" />
</template>
<script>
import { ref } from "vue";
import { MDBDatatable, MDBBtn, MDBIcon } from "mdb-vue-ui-kit";
export default {
components: {
MDBDatatable,
MDBBtn,
MDBIcon
},
setup() {
const dataset9 = ref({
columns: [
{ label: "Address", field: "address" },
{ label: "Company", field: "company" },
{ label: "Email", field: "email" },
{ label: "Name", field: "name" },
{ label: "Phone", field: "phone" },
{ label: "Username", field: "username" },
{ label: "Website", field: "website" }
]
});
const loading9 = ref(false);
const reloadDataset9 = () => {
dataset9.value.rows = [];
loading9.value = true;
// timeout is for demonstration purposes only
setTimeout(() => {
fetch("https://jsonplaceholder.typicode.com/users")
.then(response => response.json())
.then(data => {
dataset9.value.rows = data.map(user => ({
...user,
address: `${user.address.city}, ${user.address.street}`,
company: user.company.name
}));
loading9.value = false;
});
}, 2000);
};
return {
dataset9,
loading9,
reloadDataset9
};
}
};
</script>
Cell formatting
<template>
<MDBDatatable
:dataset="dataset11"
sortField="purchases"
sortOrder="desc"
/>
</template>
<script>
import { computed } from "vue";
import { MDBDatatable } from "mdb-vue-ui-kit";
export default {
components: {
MDBDatatable
},
setup() {
const dataset11 = {
rows: [
["Product 1", 10, 103],
["Product 2", 45, 110],
["Product 3", 76, 56],
["Product 4", 89, 230],
["Product 5", 104, 240],
["Product 6", 97, 187],
["Product 7", 167, 130],
["Product 8", 50, 199],
["Product 9", 4, 206],
["Product 10", 120, 88],
["Product 11", 22, 100]
]
};
const maxValue = Math.max(...dataset11.rows.map(row => row[2]));
const minValue = Math.min(...dataset11.rows.map(row => row[2]));
const colors = ["#E3F2FD", "#BBDEFB", "#90CAF9", "#64B5F6", "#42A5F5"];
const step = (maxValue - minValue) / (colors.length - 1);
const format = computed(() =>
dataset11.rows.map(row => {
const colorIndex = Math.floor((row[2] - minValue) / step);
return {
backgroundColor: colors[colorIndex],
fontWeight: 400
};
})
);
dataset11.columns = [
{ label: "Product", field: "product" },
{ label: "Quantity", field: "quantity" },
{ label: "Purchases", field: "purchases", format }
];
return {
dataset11
};
}
};
</script>
Clickable rows
Click on the row to preview the message.
Selecting the row with checkbox doesn't emit the row-click event.
Note: To prevent this action with other clickable elements within the row, call
stopPropagation() method.
Note: This feature cannot be used simultaneously with edit option.
<template>
<MDBDatatable
:dataset="dataset12"
selectable
multi
clickableRows
ref="datatable12"
@row-click="toggleModal"
@render="setupButtons('star'), setupButtons('delete')"
/>
<MDBModal
tabindex="-1"
labelledby="exampleModalLabel"
v-model="modalState"
>
<MDBModalHeader>
<MDBModalTitle id="exampleModalLabel">{{
modal.title
}}</MDBModalTitle>
</MDBModalHeader>
<MDBModalBody class="mt-4 mb-5">
<h6 class="mb-4">
From: <strong>{{ modal.from }}</strong>
</h6>
<p>{{ modal.message }}</p>
</MDBModalBody>
<MDBModalFooter>
<MDBBtn outline="primary"
>Reply<MDBIcon icon="paper-plane" class="ms-2"
/></MDBBtn>
<MDBBtn outline="primary"
>Forward<MDBIcon icon="arrow-right" class="ms-2"
/></MDBBtn>
</MDBModalFooter>
</MDBModal>
</template>
<script>
import { ref } from "vue";
import {
MDBDatatable,
MDBBtn,
MDBIcon,
MDBModal,
MDBModalHeader,
MDBModalTitle,
MDBModalBody,
MDBModalFooter
} from "mdb-vue-ui-kit";
export default {
components: {
MDBDatatable,
MDBBtn,
MDBIcon,
MDBModal,
MDBModalHeader,
MDBModalTitle,
MDBModalBody,
MDBModalFooter
},
setup() {
const modalState = ref(false);
const modal = {
title: "",
from: "",
message: "",
date: ""
};
const messages = [
{
from: "admin@mdbootstrap.com",
title: "MDBootstrap spring sale",
message:
"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur sed metus ultricies, sollicitudin est nec, blandit turpis. Fusce venenatis nisi volutpat, pharetra elit eu, ullamcorper metus. Vestibulum dapibus laoreet aliquam. Maecenas sed magna ut libero consequat elementum. Maecenas euismod pellentesque pulvinar. Morbi sit amet turpis eget dolor rutrum eleifend. Sed bibendum diam nec diam posuere pulvinar. Cras ac bibendum arcu.",
date: "11/12/2019"
},
{
from: "user@mdbootstrap.com",
title: "How to purchase MDB5 package?",
message:
"Quisque tempor ligula eu lobortis scelerisque. Mauris tristique mi a erat egestas, quis dictum nibh iaculis. Sed gravida sodales egestas. In tempus mollis libero sit amet lacinia. Duis non augue sed leo imperdiet efficitur faucibus vitae elit. Mauris eu cursus ligula. Praesent posuere efficitur cursus.",
date: "10/12/2019"
},
{
from: "user@mdbootstrap.com",
title: "Licence renewal",
message:
"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur sed metus ultricies, sollicitudin est nec, blandit turpis. Fusce venenatis nisi volutpat, pharetra elit eu, ullamcorper metus. Vestibulum dapibus laoreet aliquam. Maecenas sed magna ut libero consequat elementum. Maecenas euismod pellentesque pulvinar. Morbi sit amet turpis eget dolor rutrum eleifend. Sed bibendum diam nec diam posuere pulvinar. Cras ac bibendum arcu.",
date: "09/12/2019"
},
{
from: "admin@mdbootstrap.com",
title: "Black friday offer",
message:
"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur sed metus ultricies, sollicitudin est nec, blandit turpis. Fusce venenatis nisi volutpat, pharetra elit eu, ullamcorper metus. Vestibulum dapibus laoreet aliquam. Maecenas sed magna ut libero consequat elementum. Maecenas euismod pellentesque pulvinar. Morbi sit amet turpis eget dolor rutrum eleifend. Sed bibendum diam nec diam posuere pulvinar. Cras ac bibendum arcu.",
date: "08/12/2019"
}
];
const dataset12 = {
columns: [
{ label: "Actions", field: "actions", sort: false },
{ label: "From", field: "from" },
{ label: "Title", field: "title" },
{ label: "Message", field: "preview", sort: false },
{ label: "Date", field: "date" }
],
rows: messages.map((email, i) => {
const getPreview = (message, length) => {
if (message.length <= length) return message;
return `${message.slice(0, length)}...`;
};
return {
...email,
preview: getPreview(email.message, 20),
actions: `
<a role="button" class="star-email-button text-warning" data-mdb-index="${i}"
><i class="far fa-star"></i
></a>
<a role="button" class="delete-email-button text-muted ms-2" data-mdb-index="${i}"
><i class="fa fa-trash-alt"></i
></a>
`
};
})
};
const toggleModal = index => {
for (const [key, value] of Object.entries(messages[index])) {
modal[key] = value;
modalState.value = true;
}
};
const datatable12 = ref(null);
const setupButtons = action => {
document
.getElementsByClassName(`${action}-email-button`)
.forEach(button => {
button.addEventListener("click", e => {
e.stopPropagation();
const index = button.getAttribute("data-mdb-index");
console.log(`${action} message: ${index}`, messages[index]);
});
});
};
return {
modalState,
modal,
dataset12,
toggleModal,
datatable12,
setupButtons
};
}
};
</script>
Datatables - API
Import
<script>
import {
MDBDatatable
} from 'mdb-vue-ui-kit';
</script>
Properties
| Property | Type | Default | Description |
|---|---|---|---|
bordered
|
Boolean | false |
Adds borders to a datatable |
borderless
|
Boolean | false |
Removes all borders from a datatable |
borderColor
|
String | |
Changes a border color to one of main colors |
clickableRows
|
Boolean | false |
Makes rows clickable |
color
|
String | |
Adds a color class to a datatable (f.e 'bg-dark') |
dark
|
Boolean | false |
Changes a font color to white |
defaultValue
|
String | "-" |
This string will be used as a placeholder if a row doesn't have a defined value for a column |
dataset
|
Object | { columns: [], rows: [] } |
Main data object |
edit
|
Boolean | false |
Enables edit mode |
entries
|
Number | 10 |
Number of visible entries (pagination) |
entriesOptions
|
Array | [10, 25, 50, 200] |
Options available to choose from in a pagination select (rows per page) |
fixedHeader
|
Boolean | false |
When it's set to true, the table's header will remain visible while scrolling |
fullPagination
|
Boolean | false |
Displays additional buttons for the first and last pages |
hover
|
Boolean | false |
Changes the background color of a hovered row |
loaderClass
|
String | "bg-primary" |
The class name for a loader (loading mode) |
loading
|
Boolean | false |
Sets the loading mode - disables interactions and displays a loader |
loadingMessage
|
String | "Loading results..." |
A message displayed while loading data |
maxHeight
|
[Number, String] | |
Sets a maximum height of a datatable - can be either a string ("10%") or a number of pixels. |
maxWidth
|
[Number, String] | "100%" |
Sets a maximum width of a datatable - can be either a string ("10%") or a number of pixels. |
multi
|
Boolean | false |
Allows selecting multiple rows (selectable mode) |
noFoundMessage
|
String | "No matching results found" |
A message displayed when a table is empty |
ofPaginationText
|
String | of |
Allows changing the of word in pagination |
pagination
|
Boolean | true |
Shows/hides the pagination panel |
rowsText
|
String | "Rows per page:" |
A text indicating a number of rows per page |
search
|
String | |
Search phrase |
searchColumns
|
Array | [] |
Columns to include while searching. All columns included for an empty array |
selectable
|
Boolean | false |
Enables selecting rows with checkboxes |
sm
|
Boolean | false |
Decreases a row's paddings |
sortField
|
String | |
Default sorted column enabled by a field name |
sortOrder
|
String | |
Default sorting order. Available values: "asc" or "desc". |
striped
|
Boolean | false |
Slightly changes the background's color in every other row |
tag
|
String | "div" |
Defines wrapper tag |
Column properties
| Name | Type | Default | Description |
|---|---|---|---|
label
|
String | '' |
A displayed header of a column |
field
|
String | label.toLowerCase() |
A field's name - will be used as a key for values in rows |
fixed
|
[Boolean, String] | false |
When set to true, makes a column stick on the
left while scrolling. Changing its value to
right will do the same on the other side. For
this option to work, you need to define width as
well.
|
width
|
Number | |
A column's width in pixels |
sort
|
Boolean | true |
Enables/disables sorting for this column |
format
|
Array | |
Cell formatting array of objects for each cell. |
Events
| Name | Description |
|---|---|
all-selected
|
This event fires when a user selects rows with checkboxes. If
all are selected it returns true. In another case
it's false.
|
render
|
Event emitted after the component renders/updates rows. |
row-click
|
Event emitted after clicking on a row. |
selected-rows
|
This event fires when a user selects rows with checkboxes. It returns an array of selected rows. |
selected-indexes
|
This event fires when a user selects rows with checkboxes. It returns an array of selected row indexes. |
update
|
This event fires in an editable mode when a user updates values. |