Table The table component is an extension to the default HTML table, featuring: column visibility controls, pagination, sorting, loading state, etc
API Props Name Type Default Description loading BooleanfalseDefines if the table should be in loading state or not, showing a spinner when this prop is set to true. selectable-rows BooleanfalseDefines if the table can allow rows to be selected or not, showing checkboxes on each row when this prop is set to true. columns Array[]Array containing the columns that the table component should render. rows Array[]Array containing the rows that the table component should render. local-pagination BooleanfalseDefines if the table should paginate the rows internally or not. page, rows-per-page and total-rows props. page Number0Defines the current page for the table pagination. rows-per-page Number10Defines the maximum number of rows to show by page. total-rows Number0Defines the total number of rows available to paginate through. local-sort BooleanfalseDefines if the table should sort the rows internally or not. sort-by and sort-direction props. sort-by String''Defines the field that is actively being used to sort the table. sort-direction String'asc'Defines the direction of the sorting applied to the table when sorting by a specific field. filterable BooleanfalseDefines that the table can have filters. local-filtering BooleanfalseDefines that the table must filter the rows by itself instead of relying in server-side filtering only.
Columns Property Type Description key StringKey identifier of the column, used to search for the value in the row object name StringName of the column to show in the table header hidden BooleanDefines if the column should be hidden or not sortable BooleanDefines if the column allows sorting
Events Name Description selected-rows-changed Event emitted whenever a row is selected/un-selected, containing the array of currently selected rows. update:columns Event emitted whenever the table wants to update the columns prop value. update:page Event emitted whenever the table wants to update the page prop value. update:rows-per-page Event emitted whenever the table wants to update the rows-per-page prop value. update:sort-by Event emitted whenever the table wants to update the sort-by prop value. update:sort-direction Event emitted whenever the table wants to update the sort-direction prop value. update:filters Event emitted whenever the table filters data changed.
Basic Table
< template> < Tablev-model: columns= " columns" :rows = " rows" /> </ template> < script>
export default {
data ( ) {
return {
columns : [ ... ] ,
rows : [ ... ] ,
}
} ,
}
</ script> Loading
< template> < Tablev-model: columns= " columns" :rows = " rows" loading /> </ template> < script>
export default {
data ( ) {
return {
columns : [ ... ] ,
rows : [ ... ] ,
}
} ,
}
</ script> Row Selection
< template> < Tablev-model: columns= " columns" :rows = " rows" selectable-rows /> </ template> < script>
export default {
data ( ) {
return {
columns : [ ... ] ,
rows : [ ... ] ,
}
} ,
}
</ script> Row Selection with actions
< template> < Tablev-model: columns= " columns" :rows = " rows" selectable-rows > < template#selection-actions = " { rows }" > < Button@click = " logSelectedRows(rows)" > </ Button> </ template> </ Table> </ template> < script>
export default {
data ( ) {
return {
columns : [ ... ] ,
rows : [ ... ] ,
}
} ,
methods : {
logSelectedRows ( rows ) {
console. log ( rows)
}
}
}
</ script>
< template> < Tablev-model: columns= " columns" v-model: page= " page" v-model: rows-per-page= " rowsPerPage" :total-rows = " totalRows" :rows = " rows" local-pagination
/> </ template> < script>
export default {
data ( ) {
return {
columns : [ ... ] ,
rows : [ ... ] ,
page : 1 ,
rowsPerPage : 10 ,
totalRows : 21 ,
}
} ,
}
</ script>
< template> < Tablev-model: columns= " columns" v-model: page= " page" v-model: rows-per-page= " rowsPerPage" :rows = " rows" :loading = " loading" :total-rows = " totalRows" /> </ template> < script>
export default {
data ( ) {
return {
loading : false ,
columns : [ ... ] ,
rows : [ ... ] ,
page : 1 ,
rowsPerPage : 10 ,
totalRows : 21 ,
}
} ,
methods : {
fetchRows ( page, limit ) {
this . loading = true
this . loading = false
} ,
} ,
watch : {
page ( currentPage ) {
this . fetchRows ( currentPage, this . rowsPerPage)
} ,
} ,
mounted ( ) {
this . fetchRows ( 1 , 10 )
} ,
}
</ script> Sorting Local Sorting
< template> < Tablev-model: columns= " columns" v-model: sort-by= " sortBy" v-model: sort-direction= " sortDirection" :rows = " rows" local-sort
/> </ template> < script>
export default {
data ( ) {
return {
columns : [ ... ] ,
rows : [ ... ] ,
sortBy : 'name' ,
sortDirection : 'asc' ,
localSort : true ,
}
} ,
}
</ script> Local Sorting and Pagination
< template> < Tablev-model: columns= " columns" v-model: sort-by= " sortBy" v-model: sort-direction= " sortDirection" v-model: page= " page" v-model: rows-per-page= " rowsPerPage" :rows = " rows" :total-rows = " totalRows" local-sort
local-pagination
/> </ template> < script>
export default {
data ( ) {
return {
columns : [ ... ] ,
rows : [ ... ] ,
sortBy : 'id' ,
sortDirection : 'asc' ,
localSort : true ,
page : 1 ,
rowsPerPage : 10 ,
totalRows : 21 ,
}
} ,
}
</ script> Filters Every table can be filtered, either remotely or locally. For starters, use the filterable prop to identify that the table can be filtered.
Remote filtering A filterable table, by default, will emit the update:filters event whenever a filter changes. The update:filters event contains the full array of filters applicable. This payload can be used for server-side filtering.
< template> < Tablev-model: columns= " columns" :rows = " rows" :loading = " loading" filterable
@update: filters= " updateFilters" /> </ template> < script>
export default {
data ( ) {
return {
columns : [ ... ] ,
rows : [ ... ] ,
loading : false ,
filters : [ ] ,
}
} ,
methods : {
updateFilters ( filters ) {
this . filters = filters
this . loading = true
setTimeout ( ( ) => {
this . loading = false
} , 1000 )
} ,
} ,
}
</ script> Local filtering In cases we don't need to filter the table rows remotely, we can use the local-filtering prop to make the table component filter the rows locally.
< template> < Tablev-model: columns= " columns" :rows = " rows" filterable local-filtering /> </ template> < script>
export default {
data ( ) {
return {
columns : [ ... ] ,
rows : [ ... ] ,
}
} ,
}
</ script> 