Menu
I want to make visible a row variable value ("company" to be specific) on hover as tool-tip.
I have tried declaring "tooltips" custom function in table declaration returning the value.
tooltips: function (cell) {
let data = cell.getRow();
return "Value of " + data.company;
}
Complete code is available at this fiddle
I want to display the value of company variable i.e Alpha, Beta, Gamma, etc on hover of the mouse.
594
asked Sep 02 '25 15:09
Try this:
tooltips: function (cell) {
let data = cell.getRow();
return "Value of " + data._row.data.company;
}
const tableDataNested = [{
group: "Backend Engineer A",
name: "Sourced",
applied: 300,
screened: 40,
interviewed: 5,
company: "Alpha"
},
{
group: "Backend Engineer A",
name: "Referred",
applied: 3,
screened: 1,
interviewed: 0,
company: "Beta"
},
{
group: "Backend Engineer A",
name: "University",
applied: 4,
screened: 2,
interviewed: 1,
company: "Gamma"
},
{
group: "Backend Engineer B",
name: "Sourced",
applied: 1000,
screened: 140,
interviewed: 55,
company: "Delta"
},
{
group: "Backend Engineer B",
name: "Referred",
applied: 30,
screened: 11,
interviewed: 2,
company: "Epsilon"
},
{
group: "Backend Engineer B",
name: "University",
applied: 40,
screened: 22,
interviewed: 10,
company: "Phi"
},
];
const table = new Tabulator("#example-table", {
data: tableDataNested,
dataTree: true,
dataTreeStartExpanded: true,
groupBy: "group",
columnCalcs: "table",
tooltips: function(cell) {
const company = cell.getRow().getData().company
return "Value of " + (company) ? company : '' ;
},
columns: [{
title: "Name",
field: "name",
responsive: 0
},
{
title: "Applied",
field: "applied",
bottomCalc: "sum"
},
{
title: "Screened",
field: "screened",
bottomCalc: "sum"
},
{
title: "Interviewed",
field: "interviewed",
bottomCalc: "sum"
},
],
});<head>
<link href="https://unpkg.com/[email protected]/dist/css/tabulator.min.css" rel="stylesheet">
<script type="text/javascript" src="https://unpkg.com/[email protected]/dist/js/tabulator.min.js"></script>
</head>
<body>
<div id="example-table"></div>
</body>If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
