Table sort
Vue Bootstrap 5 Table sort component
Responsive Vue table sort built with Bootstrap 5. Bootstrap Sort table is component with sorting functionality which lets you sort the data of the tables according to any specific columns.
To learn more read Docs.
Basic example
Clicking on a sortable column header will sort the column in ascending direction (smallest first), while clicking on it again will switch the direction of sorting to descending (largest first). Clicking on a non-sortable column will clear the sorting (the prop no-sort-reset can be used to disable this feature)
| 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>
Enable / disable sorting
<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>