Table Layout

Tabulator will arrange your data to fit as neatly as possible into the space provided. It has two different layout styles:

• Fit columns to data (default)
• Fit columns to container

###Fit Columns to data This is the default table layout style and will cause columns to resize to fit the widest element they contain (unless a column width was set in the column options). This can cause the table to be wider than its containing element, in this case a scroll bar will appear;

###Fit Columns to container This option will resize columns so that they fit perfectly inside the width of the container.

If a width is specified on any columns, where possible the columns will be set at this width and other columns will be resized around them. If there is not enough space to fit all the columns in, then all column widths are ignored and they are sized equally.

In this layout style at least one column must not have a width specified so it can be resized to fill any spare space.

to enable this layout mode set the fitColumns option to true when you create your Tabulator.

$("#example-table").tabulator({
	fitColumns:true, // this option takes a boolean value (default = false)
});

###Resizable columns By default it is possible to manually resize columns by dragging the borders of the column headers.

To disable this option globally set the colResizable option to false when you create your Tabulator.

$("#example-table").tabulator({
	colResizable:false, // this option takes a boolean value (default = true)
});

###Minimum Column Width It is possible to set a minimum column width to prevent resizing columns from becoming too small.

This can be set globally, by setting the colMinWidth option to the column width when you create your Tabulator.

$("#example-table").tabulator({
	colMinWidth:80, //Minimum column width in px (default = 40)
});

###Redrawing the table If the size of the element containing the Tabulator changes it is necessary to redraw the table to make sure the columns fit the new dimensions.

This can be done by calling the redraw method. For example, to trigger a redraw whenever the viewport width is changed:

$(window).resize(function(){
	$("#example-table").tabulator("redraw");
});

###Progressive Rendering Progressive rendering allow large data sets to be loaded into Tabulator without blocking the UI.

Progressive rendering is enabled by default on Tabulator.

It works by rendering blocks of rows progressively over time rather than all at once. on smaller tables this wont be noticeable at all but on tables with more than 200 rows it should significantly improve loading times.

By default data is progressively rendered to the table 200 rows at a time with a 100ms pause between rendering each block.

It is possible to configure the progressive rendering system using the progressiveRenderSize and progressiveRenderPeriod options.

$("#example-table").tabulator({
	progressiveRenderSize:500, //sets the number of rows to render per block (default = 200)
	progressiveRenderPeriod:350, //sets the delay in milliseconds between rendering each block (default = 100)
});

If you wish to disable progressive rendering on your table, set the progressiveRender option to false.

$("#example-table").tabulator({
	progressiveRender:false, //disable progressive rendering
});