1. Quick start
install dependencies
npm install tabulator-tables --save
build instance
<template>
<div id="example-table"></div>
</template>
<script>
import {
TabulatorFull as Tabulator } from 'tabulator-tables'
export default {
name: 'Tabulator',
components: {
},
props: {
},
data() {
return {
}
},
computed: {
},
watch: {
},
created() {
var tabledata = [
{
id: 1, name: 'Oli Bob', age: '12', col: 'red', dob: '' }
]
var table = new Tabulator('#example-table', {
height: 205,
data: tabledata,
layout: 'fitColumns',
columns: [
{
title: 'Name', field: 'name', width: 150 },
]
})
table.on('rowClick', function (e, row) {
alert('Row ' + row.getData().id + ' Clicked!!!!')
})
},
mounted() {
},
beforeDestroy() {
}
}
</script>
<style lang="scss" scoped>
@import '~/tabulator-tables/dist/css/tabulator.min.css';
</style>
2. Body cell line break setting
Components use
ellipsisthe behavior by default
If set to columnsyes formatter,textarea the cell content will automatically wrap;
the example is as follows:
const columns = [{title: "Name", field: "name", formatter: "textarea"}]
But if we set it formatteras a custom function, we need to implement cell wrapping. The official suggestion is that we set it columns, variableHeight:truebut the effect cannot be obtained; so we need to formatteradd it in cell.getElement().style.whiteSpace = 'pre-wrap', the example is as follows:
const columns = [
{
title: "Name",
field: "name",
formatter: function (cell, formatterParams) {
const value = cell.getValue()
cell.getElement().style.whiteSpace = 'pre-wrap' // 换行
return value
},
variableHeight: true // 设置这里其实是无效的
}
]
3. Header cell line break setting
Components use
ellipsisthe behavior by default
By default, the component does not provide header cell wrapping, so we need to manually add css style to achieve wrapping, the code is as follows:
.tabulator .tabulator-header .tabulator-col .tabulator-col-content .tabulator-col-title {
white-space: normal;
text-overflow: clip;
}
If you want to dynamically realize whether to enable the header cell wrapping setting, we can use the dynamic className to achieve it, the code is as follows:
<template>
<div :class="['table-complex', { 'header-alter--row': true }]"></div>
</template>
.header-alter--row .tabulator-header .tabulator-col .tabulator-col-content .tabulator-col-title
{
white-space: normal;
text-overflow: clip;
}
4. Sort Settings
After the component is clicked to sort by default, there are only two states, , and 升序和降序it cannot return to the default sort; if you need to support returning to the default sort, you need to set it headerSortTristate: true. The example is as follows:
new Tabulator('#example-table', {
height: 205,
data: [{
id: 1, name: 'Oli Bob', age: '12', col: 'red', dob: '' }],
layout: 'fitColumns',
columns: [
{
title: 'Name', field: 'name', width: 150, headerSortTristate: true } // 支持三种状态的排序
]
})
The default collation is as follows:
new Tabulator('#example-table', {
height: 205,
data: [{
id: 1, name: 'Oli Bob', age: '12', col: 'red', dob: '' }],
layout: 'fitColumns',
columns: [
{
title: 'Name',
field: 'name',
width: 150,
// 默认排序规则
sorter: function(a, b){
return String(a).toLowerCase().localeCompare(String(b).toLowerCase())
}
}
]
})
5. Layout perfectly compatible solution
If we want the component to have a more perfect display method, we need to dynamically switch layout: 'fitData'and layout: 'fitColumns'.
At the beginning layout: 'fitData', use it to try to render the component to see if the data can fill the table. If it can fill the table, it proves that the effect at this time is ok; if the table cannot be filled, that is, the width of is smaller than the width of the width, it can be enabled .tabulator-tableholderat .tabulator-tablethis layout: 'fitColumns'time ;