In the examples in the documentation, I'm told I can use
table.selectRow(1);
to select row with data.id = 1 in the table.
But what if I don't know what the table object is - how do I access the table object from the containing div?, i.e.
$('#divMyTabulatorDiv).someMethod().someOtherMethod().table
What are the methods/properties I need to use to access the table ponent for the Tabulator grid from the HTML element's id?
In the examples in the documentation, I'm told I can use
table.selectRow(1);
to select row with data.id = 1 in the table.
But what if I don't know what the table object is - how do I access the table object from the containing div?, i.e.
$('#divMyTabulatorDiv).someMethod().someOtherMethod().table
What are the methods/properties I need to use to access the table ponent for the Tabulator grid from the HTML element's id?
Share Improve this question edited Sep 5, 2020 at 16:55 Oli Folkerd 8,3981 gold badge26 silver badges58 bronze badges asked May 13, 2019 at 21:52 quinnyquinny 7021 gold badge7 silver badges25 bronze badges4 Answers
Reset to default 5You can lookup a table using the findTable function on the Tabulator prototype, passing in either a query selector or DOM node for the table:
var table = Tabulator.prototype.findTable("#example-table")[0]; // find table object for table with id of example-table
The findTable function will return an array of matching tables. If no match is found it will return false
Full details can be found in the Tabulator Options Documentation
As of v5, tabulator has a more direct way to get the table object using css selector. If your tabulator div was like:
<div id="tabulator1"></div>
then you can get the tabulator obj into a variable by:
let table = Tabulator.findTable("#tabulator1")[0];
after this i'm able to fetch data, do changes etc:
let data = table.getData();
Ref: http://tabulator.info/docs/5.0/options#find-table
table is the object you create, its pure Javascript driven no Html selection needed
const tabledata1 = [{
id: 1,
name: "Oli ",
money: "0",
col: "red",
dob: ""
},
{
id: 2,
name: "Mary ",
money: "0",
col: "blue",
dob: "14/05/1982"
},
{
id: 3,
name: "Christine ",
money: "0",
col: "green",
dob: "22/05/1982"
},
{
id: 4,
name: "Brendon ",
money: "0",
col: "orange",
dob: "01/08/1980"
},
{
id: 5,
name: "Margret ",
money: "0",
col: "yellow",
dob: "31/01/1999"
},
];
const col1 = [ //Define Table Columns
{
title: "Name",
field: "name",
width: 150
},
{
title: "money",
field: "money",
align: "left",
formatter: "money"
},
{
title: "Favourite Color",
field: "col"
},
{
title: "Date Of Birth",
field: "dob",
sorter: "date",
align: "center"
},
];
const table = new Tabulator("#example-table", {
data: tabledata1, //assign data to table
layout: "fitColumns", //fit columns to width of table (optional)
columns: col1,
selectable: true,
});
$('#selectRow').click(function() {
table.selectRow(1);
});<!DOCTYPE html>
<html lang="en">
<script src="https://unpkg./[email protected]/dist/js/tabulator.min.js"></script>
<link href="https://unpkg./[email protected]/dist/css/tabulator.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare./ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<body>
<div id="example-table"></div>
<button id="selectRow">Select Row 1</button>
</body>
</html>You can use Tabulator.prototype.findTable(querySelector) (I don't know what version this was added in, but it exists in 4.5 and 4.6) to get an array of tablulators that match the querySelector.
querySelector is any valid string for document.querySelectorAll.
https://jsfiddle/s60qL1hw/2/
const myTable = new Tabulator("#example-table1");
const findTable = Tabulator.prototype.findTable("#example-table1");
alert('Tables are the same?\n' + (myTable === findTable[0])); // true
Once you have the table object in the variable, you can use it as the document shows.