Inkline
Data Table Sorting
Inkline's Data Table columns are easily sortable (orderable), in both ascending and descending order.
Default Sorting
By setting the sortable column property to true, you can easily add sorting support to a data table column.
export default {
data() {
return {
columns: [
{ title: 'Name', path: 'name', sortable: true },
{ title: 'Email', path: 'email', sortable: true },
{ title: 'Age', path: 'age', sortable: true }
],
rows: [ ... ]
}
}
}
By default, sorting for the string, number and Date value types is supported natively.
Data Table Default Sorting
Show entries
10
25
50
100
| # | Name | Age | |
|---|---|---|---|
| 1 | Richard Hendricks | richard.hendricks@email.com | 26 |
| 2 | Bertram Gilfoyle | bertram.gilfoyle@email.com | 30 |
| 3 | Dinesh Chugtai | dinesh.chugtai@email.com | 30 |
| 4 | Jared Dunn | jared.dunn@email.com | 35 |
| 5 | Erlich Bachman | erlich.bachman@email.com | 32 |
| 6 | Nelson Bighetti | nelson.bighetti@email.com | 26 |
| 7 | Richard Hendricks | richard.hendricks@email.com | 26 |
| 8 | Bertram Gilfoyle | bertram.gilfoyle@email.com | 30 |
| 9 | Dinesh Chugtai | dinesh.chugtai@email.com | 30 |
| 10 | Jared Dunn | jared.dunn@email.com | 35 |
| # | Name | Age |
Showing 1 to 10 of 25 entries
- <
- 1
- 2
- 3
- >
<i-datatable :columns="columns" :rows="rows" />
export default {
data() {
return {
columns: [
{ title: 'Name', path: 'name', sortable: true },
{ title: 'Email', path: 'email', sortable: true },
{ title: 'Age', path: 'age', sortable: true }
],
rows: [
{ id: '1', name: 'Richard Hendricks', email: 'richard.hendricks@email.com', age: 26 },
{ id: '2', name: 'Bertram Gilfoyle', email: 'bertram.gilfoyle@email.com', age: 30 },
{ id: '3', name: 'Dinesh Chugtai', email: 'dinesh.chugtai@email.com', age: 30 },
{ id: '4', name: 'Jared Dunn', email: 'jared.dunn@email.com', age: 35 },
{ id: '5', name: 'Erlich Bachman', email: 'erlich.bachman@email.com', age: 32 }
]
}
}
}