As of version 3.0 tabulator renders its table using a Virtual DOM, this means that it only renders the rows you seen in the table (plus a few above and below the current view) and creates and destroys the rows as you scroll through the table.
The table below has 1000 rows loaded as they are needed as you scroll
By setting the responsiveLayout option to "hide", the table will automatically hide/show columns to prevent the columns from exceeding the width of container.
If you resize the the width of the window you will see the number of columns change to ensure the data fits with the table. This option can be combined with fitColumns to make a table that gracefully responds to all display widths.
Tabulator allows you to format your data in a wide variety of ways, so your tables can display information in a more graphical and clear layout.
you can set formatters on a per column basis using the formatter option in the column data.
Tabulator comes with a number of preconfigured formatters including:
money - formats a number into a currency notation (eg. 1234567.8901 -> 1,234,567.89)
email - renders data as an anchor with a mailto: link to the given value
image - creates an img element wirh the src set as the value. (triggers the normalizeHeight function on the row on image load)
link - renders data as an anchor with a link to the given value
tick - displays a green tick if the value is (true|'true'|'True'|1) and an empty cell if not
tickCross - displays a green tick if the value is (true|'true'|'True'|1) and a red cross if not
color - sets the background color of the cell to the value. Can be any valid css colour eg. #ff0000, #f00, rgb(255,0,0), red, rgba(255,0,0,0), hsl(0, 100%, 50%)
star - displays a graphical 0-5 star rating based on integer values from 0-5
progress - displays a progress bar that fills the cell from left to right, using values 0-100 as a percentage of width
buttonTick - displays a tick icon on eac row (for use as a button)
buttonCross - displays a cross icon on eac row (for use as a button)
rownum - shows an incrementing row number for each row.
You can define a custom formatter function in the formatter option if you need more bespoke formatter functionality
You can create icon/button columns, by not specifying a field parameter in the column data and creating a custom formatter for the column contents. In the example below we have created a print button on the left of each row.
You can also set a row formatter using the rowFormatter option, this allows you to format the styling of the row as a whole
If you are looking for a non grid based format to your table then you can use a row formatter to create custom row layouts.
You can use the rowFormatter callback to replace the contents of the row with any layout you like. In this example we will create a simple table in each row containing and image and some vertically centered text properties.
When replacing the entire contents of the row it is important to include only one column in your column definition array to ensure the table renders correctly. It is also advisable to enable fitColumns and disabled resizableColumns options.
You can also use the rowFormatter callback to create tables nested in other tables.
You just need to make sure that the second tables data array is in a property of the first tables row data object, in this example we will use the property serviceHistory.
We will be passing an array of values into a field and then using a custom formatter to turn this array into a sparkline.
The Sparklines library can be downloaded from Git Hub.
Tabulator can store a variety of table setup options so that each time a user comes back to the page, the table is laid out just as they left it
Try resizing (drag the right edge of a column header) or rearranging (drag the middle of a column header) the columns of this table, or sorting a column, then refresh the page. your new layout will persist.
Column calculations can be used to add a row of calculated values to the top or bottom of your table to display information such as the sum of a columns data.
There are two options that can be set in a column definition object to define a calculation, the topCalc option defines a calculation for the top of the column, and the bottomCalc defines a calculation for the bottom of the column. You can define, either, both or neither of the options.
It is possible to convert a standard HTML Table element into a tabulator, pulling all the data directly from the table into the tabulator when it is created.
If you want to pull the column headers in from the table, you need to make sure that you have defiend a thead element with each column header in a th element. If you specify the width attribute on a header, then this will be set as the width of the column in the tabulator.
You can set any of the standard Tabulator options when you create your table this way, so can easily convert old tables to take advantage of the many features Tabulator has to offer.
Using the editable setting on each column, you can make a user editable table.
Any time a cell is edited it triggers the cellEdited callback, to allow you to process any changes.
You can call the getData method to get an array of all of the tables data, including any edits
This table features two custom editors, an autocomplete lookup on the Location column and a date editor on the Date of Birth column.
The autocomplete editor uses the jQuery UI autocomplete widget that comes with jQueryUI as standard. You would need to have a jQuery UI CSS theme included on the page for the list to display correctly. Try typing in any of the locations in the table to see the list in action/
You can set validators on columns to ensure that any user input into your editable cells matches your requirements.
Validators can be applied by using the validator property in a columns definition object.
If the validation fails the tabulator-validation-fail class will be applied to the cell and the validationFailed callback will be triggered. The user will not be able to leave the cell until they input a valid value or cancel the edit (press escape).
The table below has the following validators applied to its columns:
Name - the field is required, it must have a value
Progress - minimum value of 0, maximum value of 100, must be a valid number
Gender - value must be either "male" or "female" and is required
Rating - minimum value of 0, maximum value of 5, must be a valid integer
Favourite Colour - minimum string length of 3, maximum string length of 10, bust be a string not a number
By default Tabulator will attempt to guess which sorter should be applied to a column based on the data contained in the first row. It can determine sorters for strings, numbers, alphanumeric sequences and booleans, anything else will be treated as a string.
string - sorts column as strings of characters
number - sorts column as numbers (integer or float, will also handle numbers using "," separators)
alphanum - sorts column as alpha numeric code
boolean - sorts column as booleans
date - sorts column as dates
time - sorts column as times
To specify a sorter to be used on a column use the param property in the columns definition object
You can define a custom sorter functions in the sorter option if you need bespoke sorting functionality.
You can programmatically trigger a sort using the sort function.
Clicking on a column header will also trigger a sort of that column. You can sort by multiple columns by holding the ctrl or shift key when clicking on column headers.
Tabulator allows you to paginate your data. simply set the pagination property to true.
If you have set the height of the table then the data will be automatically paginated to fit within the table.
If you wish to define how many rows should be shown on a page, set this in the paginationSize property. If you set the paginationSize without setting the height, the Tabulator will automatically resize to fit the data
Tabulator features a range of callbacks to allow you to handle user interaction.
Cell Click - The cell click callback is triggered when a user left clicks on a cell, it can be set on a per column basis using the cellClick option in the columns data. (left click any cell in the gender column in this example)
Row Click - The row click callback is triggered when a user clicks on a row, it can be set globally, by setting therowClickoption when you create your Tabulator. (left click any row in this example)
Row Context Menu - The row context callback is triggered when a user right clicks on a row, it can be set globally, by setting the rowContext option when you create your Tabulator. (right click any row in this example)
Data Loaded - The data loaded callback is triggered when a new set of data is loaded into the table, it can be set globally, by setting the dataLoaded option when you create your
Tabulator is styled using a full set of CSS classes, making theming of the table very simple. A full list of these can be found here.
A LESS file is also provided, containing a set of variables to make generating your own theme even easier. This can be found in tabulator.less
Tabulator comes with a number of packaged themes in the /dist/css/ directory of the package. To use one of these simply include the matching css file instead of the default tabulator.css
The standard generic table theme. This can be found in /dist/css/tabulator.min.css
A plain, simplistic layout showing only basic grid lines. This can be found in /dist/css/tabulator_simple.min.css
A dark, stylish layout using simple shades of grey. This can be found in /dist/css/tabulator_midnight.min.css
A neat, stylish layout using one primary color. This color can be set in the @primary variable in the /dist/css/tabulator_modern.less file to alter the style to match your colour scheme. This can be found in /dist/css/tabulator_modern.min.css
Bootstrap 3 Theme
Match Tabulator to the standard Bootstrap 3 theme /dist/css/bootstrap/tabulator_bootstrap.min.css
Bootstrap 4 Theme
Match Tabulator to the standard Bootstrap 4 theme /dist/css/bootstrap/tabulator_bootstrap4.min.css
Semantic UI Theme
Match Tabulator to the standard Semantic UI theme /dist/css/semantic-ui/tabulator_semantic-ui.min.css
Manually Adjusted Theme
You can override the default tabulator styling in document, or simply edit the provided tabulator.min.css file to make your own custom theme.