5

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 component for the Tabulator grid from the HTML element's id?

Oli Folkerd
  • 7,510
  • 1
  • 22
  • 46
quinny
  • 656
  • 1
  • 7
  • 24

4 Answers4

3

You 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

Oli Folkerd
  • 7,510
  • 1
  • 22
  • 46
0

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.com/tabulator-tables@4.2.4/dist/js/tabulator.min.js"></script>
<link href="https://unpkg.com/tabulator-tables@4.2.4/dist/css/tabulator.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/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>
dota2pro
  • 7,220
  • 7
  • 44
  • 79
  • 1
    I think the question was how to obtain the table-object given the div element it is rendered in. If you don't want to pollute your global namespance but still want to access the table later on, it would be nice if the Tabulator exhibits some kind of a HTMLElement -> Table Lookup. – Ric Hard Dec 09 '19 at 15:43
0

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.net/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.

nrayburn-tech
  • 935
  • 1
  • 4
  • 10
0

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

Nikhil VJ
  • 5,630
  • 7
  • 34
  • 55