Inkline
Data Table Events
Data tables (or data grids) are tables that have advanced interaction controls such as custom data types, pagination and sorting.
Table Row
You can add a table row click event using the tr-click event handler as follows:
Table Row Click Event
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" @tr-click="onTableRowClick" />
export default {
data() {
return {
columns: [
{ title: 'Name', path: 'name' },
{ title: 'Email', path: 'email' },
{ title: 'Age', path: 'age', align: 'right' }
],
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 }
]
}
},
methods: {
onTableRowClick (event, row, rowIndex) {
this.$set(this.rows[rowIndex], 'config', {
columns: {
'*': { class: '_background-primary' }
}
});
}
}
}
Table Data
You can add a table data click event using the td-click event handler as follows:
Table Data Click Event
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" @tr-click="onTableRowClick" />
export default {
data() {
return {
columns: [
{ title: 'Name', path: 'name' },
{ title: 'Email', path: 'email' },
{ title: 'Age', path: 'age', align: 'right' }
],
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 }
]
}
},
methods: {
onTableDataClick (event, column, columnIndex, row, rowIndex) {
if (columnIndex >= 0) {
this.$set(this.rows[rowIndex], 'config', {
columns: {
[column.path]: { class: '_background-primary' }
}
});
}
}
}
}
Table Heading
You can add a table heading click event using the th-click event handler as follows:
Table Header Click Event
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" @th-click="onTableHeadingClick" />
export default {
data() {
return {
columns: [
{ title: 'Name', path: 'name' },
{ title: 'Email', path: 'email' },
{ title: 'Age', path: 'age', align: 'right' }
],
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 }
]
}
},
methods: {
onTableHeadingClick(event, column, columnIndex) {
if (columnIndex >= 0) {
this.$set(this.columns[columnIndex], 'class', '_background-primary');
}
}
}
}