Inkline
Data Table Expanding
Inkline's Data Table allows you to expand a row to easily show more details about the entry.
Basic Expandable Rows
To be able to expand a Data Table entry, you will need to provide an expand scoped slot to be rendered for each row.
Data Table Expanding
Show entries
10
25
50
100
| # | Name | Position | Age | ||
|---|---|---|---|---|---|
| 1 | Richard Hendricks | Chief Executive Officer | 26 | ||
| Richard Hendricks occupies the Chief Executive Officer position at Pied Piper, a fictional company based in Silicon Valley, California. | |||||
| 2 | Bertram Gilfoyle | System Administrator | 30 | ||
| Bertram Gilfoyle occupies the System Administrator position at Pied Piper, a fictional company based in Silicon Valley, California. | |||||
| 3 | Dinesh Chugtai | Software Developer | 30 | ||
| Dinesh Chugtai occupies the Software Developer position at Pied Piper, a fictional company based in Silicon Valley, California. | |||||
| 4 | Jared Dunn | Chief Operations Officer | 35 | ||
| Jared Dunn occupies the Chief Operations Officer position at Pied Piper, a fictional company based in Silicon Valley, California. | |||||
| 5 | Erlich Bachman | Software Developer | 32 | ||
| Erlich Bachman occupies the Software Developer position at Pied Piper, a fictional company based in Silicon Valley, California. | |||||
| 6 | Nelson Bighetti | Software Developer | 26 | ||
| Nelson Bighetti occupies the Software Developer position at Pied Piper, a fictional company based in Silicon Valley, California. | |||||
| 7 | Richard Hendricks | Chief Executive Officer | 26 | ||
| Richard Hendricks occupies the Chief Executive Officer position at Pied Piper, a fictional company based in Silicon Valley, California. | |||||
| 8 | Bertram Gilfoyle | System Administrator | 30 | ||
| Bertram Gilfoyle occupies the System Administrator position at Pied Piper, a fictional company based in Silicon Valley, California. | |||||
| 9 | Dinesh Chugtai | Software Developer | 30 | ||
| Dinesh Chugtai occupies the Software Developer position at Pied Piper, a fictional company based in Silicon Valley, California. | |||||
| 10 | Jared Dunn | Chief Operations Officer | 35 | ||
| Jared Dunn occupies the Chief Operations Officer position at Pied Piper, a fictional company based in Silicon Valley, California. | |||||
| # | Name | Position | Age | ||
Showing 1 to 10 of 25 entries
- <
- 1
- 2
- 3
- >
<i-datatable :columns="columns" :rows="rows">
<template v-slot:expand="{ row, columns, expanded }">
<td :colspan="columns.length">
{{row.name}} occupies the {{row.position}} position at Pied Piper, a fictional company based in Silicon Valley, California.
</td>
</template>
</i-datatable>
export default {
data() {
return {
columns: [
{ title: 'Name', path: 'name' },
{ title: 'Position', path: 'position' },
{ title: 'Age', path: 'age' },
{ title: 'City', path: 'address.city' },
{ title: 'Country', path: 'address.country' },
{ title: 'Email', path: 'email' }
],
rows: [
{ id: '1', name: 'Richard Hendricks', email: 'richard.hendricks@email.com', age: 26, address: { city: 'Cupertino', country: 'United States' }, position: 'Chief Executive Officer' },
{ id: '2', name: 'Bertram Gilfoyle', email: 'bertram.gilfoyle@email.com', age: 30, address: { city: 'Toronto', country: 'Canada' }, position: 'System Administrator' },
{ id: '3', name: 'Dinesh Chugtai', email: 'dinesh.chugtai@email.com', age: 30, address: { city: 'Lahore', country: 'Pakistan' }, position: 'Software Developer' },
...
]
}
}
}