Change Tabulator Tree Icon

Question

Firstly, love the product!

Secondly, is it possible to change the expand and collapse icons for tree module within Tabulator? It would really help with the consistency of my project if I were to instead use the block arrows (Alt 16 & Alt 30).

I've already manipulated the CSS to the remove the border, etc.

The data and columns are substituted within the software package I am compiling this within.

var table = new Tabulator("#example-table", {
    height:400,
    data: [ **TableData** ]
    dataTree:true,
    dataTreeStartExpanded:true,
    dataTreeBranchElement: false,
    dataTreeChildIndent: 9,
    dataTreeCollapseElement: !1,
    dataTreeStartExpanded: !1,
    layout:"fitColumns",
    columns:[ **ColumnData** ],
    rowClick:function(e, row){ //trigger an alert message when the row is clicked
        alert("ID " + row.getData().id + " Selected");
    },
});

I am pairing this with

<link href="dist/css/tabulator.min.css" rel="stylesheet">

<script type="text/javascript" src="dist/js/tabulator.min.js"></script>

Answer 1

You can use the dataTreeExpandElement and dataTreeCollapseElement setup options for this in your table constructor

var table = new Tabulator("#example-table", {
    dataTree:true,
    dataTreeCollapseElement:"<span>►</span>",
    dataTreeExpandElement:"<span>▼</span>",
});

Full details on how to use this feature can be found in the Data Tree Documentation