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, each row is loaded as it becomes visible as you scroll
For tables with large numbers of columns you can use the virtualDomHoz option to enable the horizontal Virtual DOM which will improve table rendering performance in tables with a large number of columns
The table below has 100 columns, each column is loaded as it becomes visible as you scroll horizontally
By setting the layout option to fitDataFill, the table will resize the columns to fit their data, and ensure that rows takeup the full width of the table.
By setting the layout option to fitDataStretch, the table will resize the columns to fit their data, and stretch the final column to fill up the remaining width of the table.
By setting the layout option to fitColumns, the table will resize columns so that they fit perfectly inside the width of the container.
In this layout mode, columns without a width set are resized to fill any remaining space on the table. If all columns cannot fit on the table then a scrollbar will appear.
The widthGrow and widthShrink column definition properties can be used to set how much each column grows or shrinks by.
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.
By setting the responsiveLayout option to "collapse", the table will automatically collapse columns that don't fit on the table into a list of column titles and values.
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 and the collapsed list showing under each row.
By adding a row header with the responsiveCollapse formatter, users then get a toggle element to hide or show the collapsed content
Tabulator can automatically work out the columns structure of simple tables by examining the data in the first row of the table.
If you set the autoColumns option to true, every time data is loaded into the table through the data option or through the setData function, Tabulator will examine the first row of the data and build columns to match that data.
By Including the Resize Columns module in your table all columns will automatically become resizable. With resizability being controlled on a per column basis using the resizable column definition option.
When resizable columns are in use, you can use the resizableColumnFit option to make resizing one column change the width of its neighbour to maintain total column width.
By default when resizing columns or rows, the row will automatically resize as you drag the elements edge across the table. While this is often desierable, if you have complex cell contents this can sometimes lead to unpleasent or jittery redrawing of the table.
To improve these scenarios, the resize modules also provide resize guides. When using guides, when you drag the edge of a column or row, a guide is shown that helps you see how big the element will be when you have finished dragging, but it will only actually resize the elements when the resize is complete.
Resize guides can be enabled with the resizableColumnGuide and resizableRowGuide options
If you are trying to fit a lot of narrow columns on your table, you can use the headerVertical column definition propery to change the orientation of the header text to vertical.
In addition to the column headers, it is possible to add row headers to the table using the rowHeader option.
On its own this is largely a visual accent, but coupled with other modules such as moveable rows or range selection it becomes a powerful functional tool that keeps row controls visually eperated from the table data.
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.
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)
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 each row (for use as a button)
buttonCross - displays a cross icon on each 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 layout mode and disable resizable options in the columnDefaults object.
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.
Tabulator supports both "Right to Left" and "Left To Right" text directions.
By default Tabulator will attempt determine the correct text direction for the table based on the direction CSS property inherited from its parent element.
You can also force the text direction by using the textDirection setup option.
Data can be loaded into the table from a local file using the import function.
In the example below we also use the autoColumns feature to generate the column headers from the data as well, but you could just as easily predefine the columns
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.
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
If you want to show a count of the number of rows currently displayed in the footer rows you can use the paginationCounter property. There are a number of built-in pagination counters available for use.
By using the rowSelection formatter in the row header, you can create a table with rows selectable using a tickbox. The tickbox in the column header allows for toggling the selection of all rows in the table.
Using the selectableRange option, you can allow users to select a range of cells in the table
Try some of the following on the table below:
Select a range - Click and drag across multiple cells
Navigate the table - Click on a cell and use the arrow keys to navigate round the table
Expand a range - After selecting a range hold down the shift key and either drag the mouse or use the arrow keys to change the size of the selected range
Multiple Ranges - After selecting a range, hold down the crtl key and click and drag to select additional ranges.
Programatically Add Ranges - Click the "Select Range" button to programmatically add ranges with the addRange function.
By using the selectableRange option, along with the clipboard, and edit modules you can create a table that allows for bulk copying and pasting of data across the table.
Try some of the following on the table below:
Editing a cell - Double click on a cell or focus on a cell and press the enter key
Copy a cell - Click on a cell with a value in, press ctrl+c click on another cell and press ctrl+v
Navigate the table - Click on a cell and use the arrow keys to navigate round the table
Select a range - Click and drag across multiple cells
Expand a range - After selecting a range hold down the shift key and either drag the mouse or use the arrow keys to change the size of the selected range
Copy a range - After selecting a range, press ctrl+c then click on a different cell and press ctrl+v to paste the range starting from that cell
Paste to fill - Select a cell or range with values in, press ctrl+c then select a different size range (more than one cell) and press ctrl+v. Notice how it pastes the data to fill the range, either duplicating rows and columns as needed, or hiding data that wont fit.
Duplicating a column - Click on a column header to select a whole column, press ctrl+c, click into another column header and press ctrl+v
Duplicating a row - Click on a row header to select a whole row, press ctrl+c, click into another row header and press ctrl+v
The spreadheet module will create a standard grid of numbered rows and letter columns of any size needed, and allow you to pass in and extract array formatted data using the spreadsheetData prop.
Setting the rowHeader to use a field value of _id will allow it to pickup the numbers for each of the spreadsheet rows.
The spreadsheet module works differently than other modules and provides its own functions for loading and retrieving spreadsheet formatted data from the table
By using the spreadsheet option, along with the clipboard, and edit modules you can create a fully functional spreadsheet that allows for bulk copying and pasting of data between cells and sheets.
Try some of the following on the table below:
Editing a cell - Double click on a cell or focus on a cell and press the enter key
Copy a cell - Click on a cell with a value in, press ctrl+c click on another cell and press ctrl+v
Navigate the table - Click on a cell and use the arrow keys to navigate round the table
Select a range - Click and drag across multiple cells
Expand a range - After selecting a range hold down the shift key and either drag the mouse or use the arrow keys to change the size of the selected range
Copy a range - After selecting a range, press ctrl+c then click on a different cell and press ctrl+v to paste the range starting from that cell
Paste to fill - Select a cell or range with values in, press ctrl+c then select a different size range (more than one cell) and press ctrl+v. Notice how it pastes the data to fill the range, either duplicating rows and columns as needed, or hiding data that wont fit.
Duplicating a column - Click on a column header to select a whole column, press ctrl+c, click into another column header and press ctrl+v
Duplicating a row - Click on a row header to select a whole row, press ctrl+c, click into another row header and press ctrl+v
Using the movableRows property you can allow the user to move rows around the table by clicking and dragging.
By default this allows the user to drag anywhere on the row, in this example we use the rowHandle property in the column definition for the row header to create a row handle that can be used for dragging rows.
By using the groupValues property to define a series of groups, you can create a table that allows users to drag rows between groups, including empty groups.
Tabulator provides several different options for adding popups to your table, these function in a similar way to menus but allow you to add custom content to the popup element
In this example the rowClickPopup option is used to add a details popup of a row when it is clicked.
The headerPopup and headerPopupIcon options are also used in the column definition to add an icon to the column header that you can click on to filter the column.
The alert function allows you to display a full table sized message that blocks the whole of your table. This functionality is used internally for loading spinners and error messages for ajax requests.
The example below uses the alert and clearAlert functions on the table element to trigger and hide the alerts.
Tabulator allows you to download the table data as a file directly from your browser, no server needed.
The download will contain the text values of all data currently visible in the table, matching the current column layout, column titles, sorting and filtering.
Using the clipboard option, you can allow users to copy and paste from your table
In the example below, try clciking anywhere in the table then using the ctrl + c key combination to copy the table, then pase into any spreadsheet application like Excel or Google sheets.
Then try changing that data, copying it then pasting it back into this table with thectrl + v key combination. You should see it replace the existing table data with your updated data set.
By setting the history option to true, you can make the table track any user changes to the table.
You can use the undo and redo functions to move through the users interaction history, undoing cell edits, row additions or deletions.
As long as the table is in focus (but not being edited) you can also use the ctrl + z and ctrl + y keyboard shortcuts to undo and redo actions.
The example below has an editable names column, try making some changes to soe of the names and then use the history functions to undo and redo the changes.
You can localize the content of your tables to meet the needs of your regional users. Any number of language options can be configured for column headers and pagination controls.
Tabulator features a range of callbacks and events 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 event 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 event 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)
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
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