Frequently Asked Questions

Answers to the most common questions about Tabulator

The table has rendered badly

The most common cause of this issue is that your table was hidden when it was created or updated (for example it was in an inactive tabbed panel).

The reason this happens is becuase Tabulator needs to be visible when it is created or data is loaded into the table. this is because hidden DOM elements have no dimensions (height/width) so Tabulator has no way of calculating how to display the contents of the table.

There are two solutions to this problem. Either make sure that the table is visible when it is created or when data was loaded into it. Or if this is not possible call the redraw function when the table is made visible to redraw the corrupt elements.

table.redraw();

I cant find the DOM element for a row or cell?

Tabulator uses a Virtual DOM, this means that only elements that are visible on the screen exisit, rows are created and destroyed as you scroll through the table.

This may seem like a lot of work, but this is what gives Tabulator its powers, it means that there are only a few elements maintained in the DOM at a time so tabulator can handle 10,000s of rows with no loss of performance.

If you need to access the contents of the table then there are many inbuilt features to meet your needs. Editors, Formatters and Event Callbacks provide a range of ways to safely interact with the table contents.

Calling the getCell function is returning false?

To save on processing time Cell Component are only generated when a row is initially added to the DOM, it the user hasn't scrolled to it yet, the cell will be unavailable.

It you are looking to access the value of the cell then you can call the getData function on the row component to get the data for all cells in that row.

var data = row.getData();

The table takes a long time to load

If you are loading a lot of data into your table (>1000 rows) it is important that you ensure that the Virtual DOM is enabled on the table.

In order to do this you need to ensure the table has a height set, either on the CSS for the containing element, or on the height option in the table constructor.

var table = new Tabulator("#example-table", {
    height:205, // set height of table (optional)
});

If you do not set a height, the virtual DOM will be disabled and tabluator will attempt to render all of the rows onto the table at once. this can take a lot of time and make your browser freeze up or run slowly.

"Options Error" in console

If you see the following error in your console:
Options Error - Tabulator does not allow options to be set after initialization unless there is a function defined for that purpose

There will be one of two possible causes, either you have tried to change a setup option using the jQuery option function, which Tabulator does not support. Or you have tried to call a second instantiation of Tabulator on an element that is already a Tabulator table

"Data Loading Error" in console

If you see the following error in your console:
Data Loading Error - Unable to process data due to invalid data type Expecting: array...

This is because you have tried to pass a value to the setData function that is not the array of objects that Tabualtor is expecting.

Details of valid forms of row data for tabulator can be found in the Documentation.

Can I replace the data in my table but keep it in the same scroll position?

Yes. simply use the replaceData function instead of the setData function

table.replaceData([...array of row data...]);

Does Tabulator work in Internet Explorer 10 and below?

Tabulator does not support versions of Internet Explorer below version 11. Tabulator is built using a lot of modern JavaScript functionality and it would take a large amount of time to code around the missing functionality in legacy browsers, as well as bulk up the code base with polyfills. For this reason there in no plan to offer support for any Legacy versions of IE.