Custom classes
You can pass your classes for the table, row, cell, etc.. via classes
prop. And interesting thing is you can pass a validator function to apply custom classes conditionally.
Example
<template>
<div id="app">
<vue-bootstrap4-table :classes="classes"
:rows="rows"
:columns="columns">
</vue-bootstrap4-table>
</div>
</template>
<script>
import VueBootstrap4Table from 'vue-bootstrap4-table'
export default {
name: 'App',
data: function() {
return {
rows: [
...
],
columns: [
...
],
classes: {
tableWrapper: "outer-table-div-class wrapper-class-two",
table : {
"table-striped my-class" : true,
"table-bordered my-class-two" : function(rows) {
return true
}
},
row : {
"my-row my-row2" : true,
"function-class" : function(row) {
return row.id == 1
}
},
cell : {
"my-cell my-cell2" : true,
"text-danger" : function(row,column,cellValue) {
return column.name == "salary" && row.salary > 2500
}
}
}
}
},
components: {
VueBootstrap4Table
}
}
</script>
Currently you can add custom classes to <div>,<table>, <tr> and <td>
elements using tableWrapper, table, row, and cell properties respectively. Note: tableWrapper
adds classes to <div>
element outside <table>
element.
You can either pass the custom classes directly or pass a function with your condition check to decide whether to apply to class or not.
For example, in the above example, look at the property cell
. There we are applying classes "my-cell my-cell2" directly to <td>
element and "text-danger" class only to the "salary" column & also the salary value should be above 2500.
Last updated
Was this helpful?