Click Configuration on any demo to switch to the Configuration view with a copy button.
Layout
Virtual DOM - Vertical
The table engine employs a virtual rendering strategy: only the rows currently in the viewport (plus a small buffer) are mounted in the DOM. As you scroll, rows are created and recycled on the fly. This table contains 200 rows but never renders more than a handful at once.
Loading…
tabulator {
height "311px"
columns {
column {
title "ID"
field "id"
}
column {
title "Name"
field "name"
}
column {
title "Progress"
field "progress"
sorter "number"
}
column {
title "Gender"
field "gender"
}
column {
title "Rating"
field "rating"
}
column {
title "Favourite Color"
field "col"
}
column {
title "Date Of Birth"
field "dob"
hozAlign "center"
}
}
}
Virtual DOM - Horizontal
When a table has many columns, horizontal virtual rendering can be enabled so that only the visible columns are kept in the DOM. Scroll sideways through this 100-column table to see columns appear and disappear dynamically.
Loading…
tabulator {
height "311px"
renderHorizontal "virtual"
columns {
// 100 columns generated programmatically:
// column { title "Column 1"; field "a1" }
// column { title "Column 2"; field "a2" }
// ... through Column 100
}
}
Fit To Data
Each column automatically adjusts its width to match the widest cell content, keeping the table as compact as possible.
Loading…
tabulator {
height "311px"
columns {
column {
title "Name"
field "name"
}
column {
title "Progress"
field "progress"
hozAlign "right"
sorter "number"
}
column {
title "Gender"
field "gender"
}
column {
title "Rating"
field "rating"
hozAlign "center"
}
column {
title "Favourite Color"
field "col"
}
column {
title "Date Of Birth"
field "dob"
hozAlign "center"
sorter "date"
}
column {
title "Driver"
field "car"
hozAlign "center"
}
}
}
Fit To Data and Fill
Columns size themselves to their content first, then the remaining horizontal space is distributed so that every row spans the full table width.
Loading…
tabulator {
height "311px"
layout "fitDataFill"
columns {
column {
title "Name"
field "name"
}
column {
title "Progress"
field "progress"
hozAlign "right"
sorter "number"
}
column {
title "Gender"
field "gender"
}
column {
title "Rating"
field "rating"
hozAlign "center"
}
column {
title "Favourite Color"
field "col"
}
}
}
Fit To Data and Stretch Last Column
Columns size themselves to their content, and the last column stretches to fill whatever space remains, ensuring a clean right edge.
Loading…
tabulator {
height "311px"
layout "fitDataStretch"
columns {
column {
title "Name"
field "name"
}
column {
title "Progress"
field "progress"
hozAlign "right"
sorter "number"
}
column {
title "Gender"
field "gender"
}
column {
title "Rating"
field "rating"
hozAlign "center"
}
column {
title "Favourite Color"
field "col"
}
}
}
Fit Table and Columns to Data
Both the table container and individual columns adapt their dimensions to the data, so the overall table is only as wide and tall as needed.
Loading…
tabulator {
height "311px"
layout "fitDataTable"
columns {
column {
title "Name"
field "name"
}
column {
title "Progress"
field "progress"
hozAlign "right"
sorter "number"
}
column {
title "Gender"
field "gender"
}
}
}
Fit To Width
Columns distribute themselves proportionally across the available container width. Columns without an explicit width grow or shrink according to their widthGrow and widthShrink settings, ensuring the table always fills its parent exactly.
Loading…
tabulator {
height "311px"
layout "fitColumns"
columns {
column {
title "Name"
field "name"
width 200
}
column {
title "Progress"
field "progress"
hozAlign "right"
sorter "number"
}
column {
title "Gender"
field "gender"
widthGrow 2
}
column {
title "Rating"
field "rating"
hozAlign "center"
}
column {
title "Favourite Color"
field "col"
widthGrow 3
}
column {
title "Date Of Birth"
field "dob"
hozAlign "center"
sorter "date"
widthGrow 2
}
column {
title "Driver"
field "car"
hozAlign "center"
}
}
}
Responsive Layout
When the viewport narrows, lower-priority columns are hidden automatically so the remaining columns never overflow the container. Resize your browser window to watch columns appear and disappear in real time.
Loading…
tabulator {
height "311px"
responsiveLayout "hide"
columns {
column {
title "Name"
field "name"
width 200
responsive 0
}
column {
title "Progress"
field "progress"
hozAlign "right"
sorter "number"
width 150
}
column {
title "Gender"
field "gender"
width 150
responsive 2
}
column {
title "Rating"
field "rating"
hozAlign "center"
width 150
}
column {
title "Favourite Color"
field "col"
width 150
}
column {
title "Date Of Birth"
field "dob"
hozAlign "center"
sorter "date"
width 150
}
column {
title "Driver"
field "car"
hozAlign "center"
width 150
}
}
}
Responsive Collapse
Instead of hiding overflow columns entirely, this mode folds them into an expandable detail list beneath each row. A toggle in the row header lets users show or hide the collapsed content. Try resizing the window to see columns move in and out of the detail list.
Loading…
tabulator {
height "311px"
layout "fitDataFill"
responsiveLayout "collapse"
rowHeader([formatter: "responsiveCollapse", width: 30, minWidth: 30, hozAlign: "center", resizable: false, headerSort: false])
columns {
column {
title "Name"
field "name"
width 200
responsive 0
}
column {
title "Progress"
field "progress"
hozAlign "right"
sorter "number"
width 150
}
column {
title "Gender"
field "gender"
width 150
responsive 2
}
column {
title "Rating"
field "rating"
hozAlign "center"
width 150
}
column {
title "Favourite Color"
field "col"
width 150
}
column {
title "Date Of Birth"
field "dob"
hozAlign "center"
sorter "date"
width 150
}
column {
title "Driver"
field "car"
hozAlign "center"
width 150
}
}
}
Auto-Generated Columns
When no explicit column definitions are provided, the table inspects the first data row and generates columns automatically — useful for quick previews of unknown datasets.
Loading…
tabulator {
autoColumns true
}
Column Resizing
Drag the right edge of any column header to adjust its width. Per-column control over resizability is available, and a fit mode can make a neighbouring column shrink as you enlarge another, keeping the total width constant.
Loading…
tabulator {
height "311px"
layout "fitColumns"
resizableColumnFit true
columns {
column {
title "Name"
field "name"
width 200
resizable true
}
column {
title "Progress"
field "progress"
resizable true
}
column {
title "Gender"
field "gender"
resizable true
}
column {
title "Rating"
field "rating"
resizable true
}
column {
title "Favourite Color"
field "col"
resizable true
}
}
}
Resize Guides
While dragging a column or row edge, a visual guide line follows the cursor so you can see the new size before releasing the mouse.
Loading…
tabulator {
height "311px"
resizableRows true
resizableRowGuide true
resizableColumnGuide true
columnDefaults([resizable: true])
columns {
column {
title "Name"
field "name"
width 200
}
column {
title "Progress"
field "progress"
}
column {
title "Gender"
field "gender"
}
column {
title "Rating"
field "rating"
}
column {
title "Favourite Color"
field "col"
}
}
}
Grouped Column Headers
Columns can be nested inside parent groups to create multi-level headers, making it easy to organise related fields under a shared label.
Header text can be rotated vertically, which is handy when you need many narrow columns and horizontal labels would be too wide.
Loading…
tabulator {
height "311px"
columns {
column {
title "Name"
field "name"
headerSort false
headerVertical true
}
column {
title "Progress"
field "progress"
sorter "number"
hozAlign "left"
formatter "progress"
editable true
headerSort false
headerVertical true
}
column {
title "Gender"
field "gender"
headerSort false
headerVertical true
}
column {
title "Rating"
field "rating"
hozAlign "center"
headerSort false
headerVertical true
}
column {
title "Date Of Birth"
field "dob"
hozAlign "center"
sorter "date"
headerSort false
headerVertical true
}
column {
title "Driver"
field "car"
hozAlign "center"
formatter "tickCross"
headerSort false
headerVertical true
}
}
}
Row Header
A dedicated header column can be pinned to the left edge of the table, independent of the main data columns — commonly used for row numbers or selection checkboxes.
Loading…
tabulator {
height "311px"
rowHeader([formatter: "rownum", headerSort: false, hozAlign: "center", resizable: false, frozen: true])
columns {
column {
title "Name"
field "name"
headerSort false
}
column {
title "Progress"
field "progress"
sorter "number"
hozAlign "left"
formatter "progress"
editable true
headerSort false
}
column {
title "Gender"
field "gender"
headerSort false
}
column {
title "Rating"
field "rating"
hozAlign "center"
headerSort false
}
column {
title "Date Of Birth"
field "dob"
hozAlign "center"
sorter "date"
headerSort false
}
column {
title "Driver"
field "car"
hozAlign "center"
formatter "tickCross"
headerSort false
}
}
}
Pinned Columns
Mark specific columns as frozen so they stay fixed in place while the rest of the table scrolls horizontally.
Loading…
tabulator {
height "311px"
columns {
column {
title "Name"
field "name"
width 250
frozen true
}
column {
title "Progress"
field "progress"
sorter "number"
hozAlign "left"
formatter "progress"
width 200
editable true
}
column {
title "Gender"
field "gender"
width 150
}
column {
title "Rating"
field "rating"
formatter "star"
hozAlign "center"
width 200
}
column {
title "Date Of Birth"
field "dob"
hozAlign "center"
sorter "date"
}
column {
title "Driver"
field "car"
hozAlign "center"
formatter "tickCross"
width 150
}
}
}
Pinned Rows
A set number of rows at the top of the table can be pinned so they remain visible as you scroll through the rest of the data.
Loading…
tabulator {
height "311px"
frozenRows 1
columns {
column {
title "Name"
field "name"
width 250
}
column {
title "Progress"
field "progress"
sorter "number"
hozAlign "left"
formatter "progress"
width 200
editable true
}
column {
title "Gender"
field "gender"
width 150
}
column {
title "Rating"
field "rating"
formatter "star"
hozAlign "center"
width 200
}
column {
title "Date Of Birth"
field "dob"
hozAlign "center"
sorter "date"
}
column {
title "Driver"
field "car"
hozAlign "center"
formatter "tickCross"
width 150
}
}
}
Tree View
Hierarchical data can be displayed as an expandable tree. Child rows are indented beneath their parent, and a toggle control lets users collapse or expand each branch.
Loading…
tabulator {
height "311px"
dataTree true
dataTreeStartExpanded true
columns {
column {
title "Name"
field "name"
width 200
responsive 0
}
column {
title "Location"
field "location"
width 150
}
column {
title "Gender"
field "gender"
width 150
responsive 2
}
column {
title "Favourite Color"
field "col"
width 150
}
column {
title "Date Of Birth"
field "dob"
hozAlign "center"
sorter "date"
width 150
}
}
}
Cell Formatters
Cell values can be rendered visually using built-in formatters such as progress bars, star ratings, tick/cross icons, row numbers, colour swatches, and action buttons — giving the table a richer, more informative appearance.
Loading…
tabulator {
height "311px"
layout "fitColumns"
columns {
column {
title "Name"
field "name"
width 150
}
column {
title "Progress"
field "progress"
formatter "progress"
formatterParams([color: ["#00dd00", "orange", "rgb(255,0,0)"]])
sorter "number"
width 100
}
column {
title "Rating"
field "rating"
formatter "star"
formatterParams([stars: 6])
hozAlign "center"
width 120
}
column {
title "Driver"
field "car"
hozAlign "center"
formatter "tickCross"
width 50
}
column {
title "Col"
field "col"
formatter "color"
width 50
}
column {
title "Line Wraping"
field "lorem"
formatter "textarea"
}
}
}
Saved Layout
Column widths, ordering, and sort state are saved to local storage automatically. Try resizing or rearranging the columns below, then refresh the page — your layout will be restored exactly as you left it.
Loading…
tabulator {
height "311px"
persistence([sort: true, filter: true, columns: true])
persistenceID "examplePerststance"
columns {
column {
title "Name"
field "name"
width 200
}
column {
title "Progress"
field "progress"
width 100
sorter "number"
}
column {
title "Gender"
field "gender"
}
column {
title "Rating"
field "rating"
width 80
}
column {
title "Favourite Color"
field "col"
}
column {
title "Date Of Birth"
field "dob"
hozAlign "center"
sorter "date"
}
column {
title "Driver"
field "car"
hozAlign "center"
formatter "tickCross"
}
}
}
Summary Calculations
A summary row can be placed at the top or bottom of the table, displaying aggregated values such as sums, averages, counts, or custom calculations for each column.
Loading…
tabulator {
height "311px"
movableColumns true
columns {
column {
title "Name"
field "name"
width 200
}
column {
title "Progress"
field "progress"
width 100
sorter "number"
bottomCalc "avg"
bottomCalcParams([precision: 3])
}
column {
title "Gender"
field "gender"
}
column {
title "Rating"
field "rating"
width 80
bottomCalc "avg"
}
column {
title "Favourite Color"
field "col"
}
column {
title "Date Of Birth"
field "dob"
hozAlign "center"
sorter "date"
}
column {
title "Driver"
field "car"
hozAlign "center"
formatter "tickCross"
topCalc "count"
}
}
}
Hidden Headers
Hiding the header row turns the table into a minimal list view — useful for simple key-value displays or compact data listings.
Loading…
tabulator {
height "311px"
headerVisible false
columns {
column {
title "Name"
field "name"
width 250
}
column {
title "Progress"
field "progress"
sorter "number"
hozAlign "left"
formatter "progress"
width 200
editable true
}
column {
title "Gender"
field "gender"
width 150
}
column {
title "Rating"
field "rating"
formatter "star"
hozAlign "center"
width 200
}
column {
title "Date Of Birth"
field "dob"
hozAlign "center"
sorter "date"
}
column {
title "Driver"
field "car"
hozAlign "center"
formatter "tickCross"
width 150
}
}
}
RTL Text Direction
Full support for right-to-left text direction, ensuring correct layout for languages such as Arabic and Hebrew.
Loading…
tabulator {
height "311px"
textDirection "rtl"
columns {
column {
title "Name"
field "name"
width 250
}
column {
title "Progress"
field "progress"
sorter "number"
hozAlign "left"
formatter "progress"
width 200
editable true
}
column {
title "Gender"
field "gender"
width 150
}
column {
title "Rating"
field "rating"
formatter "star"
hozAlign "center"
width 200
}
column {
title "Date Of Birth"
field "dob"
hozAlign "center"
sorter "date"
}
column {
title "Driver"
field "car"
hozAlign "center"
formatter "tickCross"
width 150
}
}
}
Data
Progressive Data Loading
Data is fetched in pages from the server and appended to the table as the user scrolls down, keeping the initial load fast even for large datasets.
Loading…
tabulator {
height "311px"
layout "fitColumns"
progressiveLoad "scroll"
placeholder "No Data Set"
columns {
column {
title "Name"
field "name"
sorter "string"
width 200
}
column {
title "Progress"
field "progress"
sorter "number"
formatter "progress"
}
column {
title "Gender"
field "gender"
sorter "string"
}
column {
title "Rating"
field "rating"
formatter "star"
hozAlign "center"
width 100
}
column {
title "Favourite Color"
field "col"
sorter "string"
}
column {
title "Date Of Birth"
field "dob"
sorter "date"
hozAlign "center"
}
column {
title "Driver"
field "car"
hozAlign "center"
formatter "tickCross"
sorter "boolean"
}
}
}
Live Data Updates
When reactive mode is enabled, modifications to the underlying data array — adding, removing, or updating objects — are reflected in the table instantly without any manual refresh calls.
Example Reactivity Controls
Loading…
tabulator {
height "311px"
layout "fitColumns"
reactiveData true
columns {
column {
title "Name"
field "name"
sorter "string"
width 200
}
column {
title "Progress"
field "progress"
sorter "number"
formatter "progress"
}
column {
title "Gender"
field "gender"
sorter "string"
}
column {
title "Rating"
field "rating"
formatter "star"
hozAlign "center"
width 100
}
column {
title "Favourite Color"
field "col"
sorter "string"
}
}
}
Inline Editing
Individual columns can be marked as editable, turning cells into inline input fields. Every edit fires a callback, and the full dataset (including changes) can be retrieved at any time via the API.
Loading…
tabulator {
height "311px"
columns {
column {
title "Name"
field "name"
width 150
editor "input"
}
column {
title "Location"
field "location"
width 130
editor "list"
editorParams([autocomplete: "true", allowEmpty: true, listOnEmpty: true, valuesLookup: true])
}
column {
title "Progress"
field "progress"
sorter "number"
hozAlign "left"
formatter "progress"
width 140
editor true
}
column {
title "Gender"
field "gender"
editor "list"
editorParams([values: [male: "Male", female: "Female", unknown: "Unknown"]])
}
column {
title "Rating"
field "rating"
formatter "star"
hozAlign "center"
width 100
editor true
}
column {
title "Date Of Birth"
field "dob"
hozAlign "center"
sorter "date"
width 140
}
column {
title "Driver"
field "car"
hozAlign "center"
editor true
formatter "tickCross"
}
}
}
Input Validation
Validation rules can be attached to editable columns so that user-entered values are checked before being accepted — for example, requiring a non-empty string, a number within a range, or a value matching a pattern.
Loading…
tabulator {
height "311px"
layout "fitColumns"
columns {
column {
title "Name"
field "name"
width 150
editor "input"
validator "required"
}
column {
title "Progress"
field "progress"
sorter "number"
hozAlign "left"
editor true
validator(["min:0", "max:100", "numeric"])
}
column {
title "Gender"
field "gender"
editor "input"
validator(["required", "in:male|female"])
}
column {
title "Rating"
field "rating"
editor "input"
hozAlign "center"
width 100
validator(["min:0", "max:5", "integer"])
}
column {
title "Favourite Color"
field "col"
editor "input"
validator(["minLength:3", "maxLength:10", "string"])
}
}
}
Header Filters
Each column header can include a built-in filter input, letting users narrow down the displayed rows by typing directly into the header area.
Loading…
tabulator {
height "311px"
layout "fitColumns"
columns {
column {
title "Name"
field "name"
width 150
headerFilter "input"
}
column {
title "Progress"
field "progress"
width 150
formatter "progress"
sorter "number"
headerFilter "number"
}
column {
title "Gender"
field "gender"
editor "list"
editorParams([values: [male: "Male", female: "Female"], clearable: true])
headerFilter true
headerFilterParams([values: [male: "Male", female: "Female", "": ""], clearable: true])
}
column {
title "Rating"
field "rating"
editor "star"
hozAlign "center"
width 100
headerFilter "number"
headerFilterPlaceholder "at least..."
headerFilterFunc ">="
}
column {
title "Favourite Color"
field "col"
editor "input"
headerFilter "list"
headerFilterParams([valuesLookup: true, clearable: true])
}
column {
title "Date Of Birth"
field "dob"
hozAlign "center"
sorter "date"
headerFilter "input"
}
column {
title "Driver"
field "car"
hozAlign "center"
formatter "tickCross"
headerFilter "tickCross"
headerFilterParams([tristate: true])
}
}
}
Column Sorting
Clicking a column header sorts the table by that column. The engine automatically detects the appropriate sort method (text, number, date, etc.) based on the data, and custom sorters can be supplied for specialised ordering.
Loading…
tabulator {
height "311px"
layout "fitColumns"
columns {
column {
title "Name"
field "name"
width 200
}
column {
title "Progress"
field "progress"
hozAlign "right"
headerSortTristate true
}
column {
title "Gender"
field "gender"
sorter "string"
}
column {
title "Rating"
field "rating"
hozAlign "center"
width 100
}
column {
title "Favourite Color"
field "col"
}
column {
title "Date Of Birth"
field "dob"
sorter "date"
hozAlign "center"
}
column {
title "Driver"
field "car"
hozAlign "center"
sorter "boolean"
}
}
}
Row Grouping
Rows can be organised into collapsible groups based on the value of a shared field, making it easy to browse categorised datasets.
Loading…
tabulator {
height "311px"
layout "fitColumns"
movableRows true
groupBy "gender"
columns {
column {
title "Name"
field "name"
width 200
}
column {
title "Progress"
field "progress"
formatter "progress"
sorter "number"
}
column {
title "Gender"
field "gender"
}
column {
title "Rating"
field "rating"
formatter "star"
hozAlign "center"
width 100
}
column {
title "Favourite Color"
field "col"
}
column {
title "Date Of Birth"
field "dob"
hozAlign "center"
sorter "date"
}
column {
title "Driver"
field "car"
hozAlign "center"
formatter "tickCross"
}
}
}
Pagination
Large datasets can be split across numbered pages with configurable page size and navigation controls, reducing the amount of data shown at once.
Loading…
tabulator {
layout "fitColumns"
pagination "local"
paginationSize 6
paginationSizeSelector([3, 6, 8, 10])
movableColumns true
paginationCounter "rows"
columns {
column {
title "Name"
field "name"
width 200
}
column {
title "Progress"
field "progress"
formatter "progress"
sorter "number"
}
column {
title "Gender"
field "gender"
}
column {
title "Rating"
field "rating"
formatter "star"
hozAlign "center"
width 100
}
column {
title "Favourite Color"
field "col"
}
column {
title "Date Of Birth"
field "dob"
hozAlign "center"
sorter "date"
}
column {
title "Driver"
field "car"
hozAlign "center"
formatter "tickCross"
}
}
}
Server-Side Pagination
Pagination, sorting, and filtering are handled entirely on the server. Each page change sends a request with page, size, sort, and filter parameters — only the matching rows are returned, keeping network payloads small regardless of total dataset size.
Loading…
tabulator {
layout "fitColumns"
pagination true
paginationMode "remote"
sortMode "remote"
filterMode "remote"
paginationSize 10
paginationSizeSelector([5, 10, 25, 50])
paginationCounter "rows"
columns {
column {
title "ID"
field "id"
sorter "number"
headerFilter true
}
column {
title "Name"
field "name"
headerFilter true
}
column {
title "Progress"
field "progress"
sorter "number"
formatter "progress"
}
column {
title "Gender"
field "gender"
headerFilter "list"
headerFilterParams {
values ["male", "female"]
}
}
column {
title "Rating"
field "rating"
formatter "star"
hozAlign "center"
}
column {
title "Favourite Color"
field "col"
}
column {
title "Date Of Birth"
field "dob"
hozAlign "center"
sorter "date"
}
}
}
Interaction
Row Selection
Rows can be selected by clicking, by holding Shift and dragging across multiple rows, or programmatically through the API. Selected rows are highlighted and accessible via dedicated methods.
Selection Controls
Selected: 0
Loading…
tabulator {
height "311px"
selectableRows true
columns {
column {
title "Name"
field "name"
width 200
}
column {
title "Progress"
field "progress"
width 100
hozAlign "right"
sorter "number"
}
column {
title "Gender"
field "gender"
width 100
}
column {
title "Rating"
field "rating"
hozAlign "center"
width 80
}
column {
title "Favourite Color"
field "col"
}
column {
title "Date Of Birth"
field "dob"
hozAlign "center"
sorter "date"
}
column {
title "Driver"
field "car"
hozAlign "center"
width 100
}
}
}
Checkbox Row Selection
A checkbox column in the row header provides a familiar, explicit way to select one or more rows, including a header-level "select all" toggle.
Loading…
tabulator {
height "311px"
rowHeader([headerSort: false, resizable: false, frozen: true, headerHozAlign: "center", hozAlign: "center", formatter: "rowSelection", titleFormatter: "rowSelection"])
columns {
column {
title "Name"
field "name"
width 200
}
column {
title "Progress"
field "progress"
width 100
hozAlign "right"
sorter "number"
}
column {
title "Gender"
field "gender"
width 100
}
column {
title "Rating"
field "rating"
hozAlign "center"
width 80
}
column {
title "Favourite Color"
field "col"
}
column {
title "Date Of Birth"
field "dob"
hozAlign "center"
sorter "date"
}
column {
title "Driver"
field "car"
hozAlign "center"
width 100
}
}
}
Cell Range Selection
Spreadsheet-style range selection lets users click and drag to highlight a rectangular block of cells rather than whole rows.
Selection Controls
Loading…
tabulator {
height "311px"
selectableRange true
selectableRangeColumns true
selectableRangeRows true
rowHeader([resizable: false, frozen: true, hozAlign: "center", formatter: "rownum", cssClass: "range-header-col"])
columnDefaults([headerSort: false, resizable: "header"])
columns {
column {
title "Name"
field "name"
width 200
}
column {
title "Progress"
field "progress"
width 100
hozAlign "right"
sorter "number"
}
column {
title "Gender"
field "gender"
width 100
}
column {
title "Rating"
field "rating"
hozAlign "center"
width 80
}
column {
title "Favourite Color"
field "col"
}
column {
title "Date Of Birth"
field "dob"
hozAlign "center"
sorter "date"
}
column {
title "Driver"
field "car"
hozAlign "center"
width 100
}
}
}
Cell Range with Copy & Paste
Combining range selection with clipboard support enables users to select, copy, and paste blocks of cells — much like working in a spreadsheet application.
Loading…
tabulator {
height "311px"
selectableRange 1
selectableRangeColumns true
selectableRangeRows true
selectableRangeClearCells true
editTriggerEvent "dblclick"
clipboard true
clipboardCopyStyled false
clipboardCopyConfig([rowHeaders: false, columnHeaders: false])
clipboardCopyRowRange "range"
clipboardPasteParser "range"
clipboardPasteAction "range"
rowHeader([resizable: false, frozen: true, width: 40, hozAlign: "center", formatter: "rownum", cssClass: "range-header-col", editor: false])
columnDefaults([headerSort: false, headerHozAlign: "center", editor: "input", resizable: "header", width: 100])
columns {
column {
title "Name"
field "name"
width 200
}
column {
title "Progress"
field "progress"
width 100
hozAlign "right"
sorter "number"
}
column {
title "Gender"
field "gender"
width 100
}
column {
title "Rating"
field "rating"
hozAlign "center"
width 80
}
column {
title "Favourite Color"
field "col"
}
column {
title "Date Of Birth"
field "dob"
hozAlign "center"
sorter "date"
}
column {
title "Driver"
field "car"
hozAlign "center"
width 100
}
}
}
Spreadsheet Grid
An editable grid with numbered rows and lettered columns is generated automatically. Double-click any cell to start typing.
Rows can be reordered by dragging the handle icon on the left edge. A drag handle column is added automatically via the row header configuration.
Loading…
tabulator {
height "311px"
movableRows true
rowHeader([headerSort: false, resizable: false, minWidth: 30, width: 30, rowHandle: true, formatter: "handle"])
columns {
column {
title "Name"
field "name"
width 150
}
column {
title "Progress"
field "progress"
formatter "progress"
sorter "number"
}
column {
title "Gender"
field "gender"
}
column {
title "Rating"
field "rating"
formatter "star"
formatterParams([stars: 6])
hozAlign "center"
width 120
}
column {
title "Favourite Color"
field "col"
}
column {
title "Date Of Birth"
field "dob"
hozAlign "center"
sorter "date"
}
column {
title "Driver"
field "car"
hozAlign "center"
formatter "tickCross"
}
}
}
Drag Rows Across Groups
When rows are organised into groups, dragging a row across group boundaries moves it into the target group, providing a visual drag-and-drop categorisation workflow.
Loading…
tabulator {
height "311px"
movableRows true
rowHeader([headerSort: false, resizable: false, minWidth: 30, width: 30, rowHandle: true, formatter: "handle"])
groupBy "col"
groupValues([["green", "blue", "purple"]])
columns {
column {
title "Name"
field "name"
width 150
}
column {
title "Progress"
field "progress"
formatter "progress"
sorter "number"
}
column {
title "Gender"
field "gender"
}
column {
title "Rating"
field "rating"
formatter "star"
formatterParams([stars: 6])
hozAlign "center"
width 120
}
column {
title "Favourite Color"
field "col"
}
column {
title "Date Of Birth"
field "dob"
hozAlign "center"
sorter "date"
}
column {
title "Driver"
field "car"
hozAlign "center"
formatter "tickCross"
}
}
}
Cross-Table Row Transfer
Two table instances can be linked so that dragging a row out of the sender table drops it into the receiver. The sender deletes the row on release, and the receiver adds it.
tabulator {
height "311px"
layout "fitColumns"
movableRows true
movableRowsConnectedTables "#example-table-receiver"
movableRowsReceiver "add"
movableRowsSender "delete"
placeholder "All Rows Moved"
columns {
column {
title "Name"
field "name"
}
}
}
Drag Rows to External Elements
Rows can be dragged from the table onto an external DOM element. An event fires on drop, letting you process the row data in any way you like — here we append the name to a list.
Users can copy the current table data to the clipboard and paste external data into the table, enabling quick data exchange with other applications.
Loading…
tabulator {
height "311px"
clipboard true
clipboardPasteAction "replace"
columns {
column {
title "Name"
field "name"
width 200
}
column {
title "Progress"
field "progress"
width 100
sorter "number"
}
column {
title "Gender"
field "gender"
}
column {
title "Rating"
field "rating"
width 80
}
column {
title "Favourite Color"
field "col"
}
column {
title "Date Of Birth"
field "dob"
hozAlign "center"
sorter "date"
}
column {
title "Driver"
field "car"
hozAlign "center"
formatter "tickCross"
}
}
}
Undo & Redo
Every user edit is tracked in an internal history stack. Undo and redo operations let users step backward and forward through their changes.
History Controls
Loading…
tabulator {
height "311px"
layout "fitColumns"
history true
columns {
column {
title "Name"
field "name"
width 200
editor "input"
}
column {
title "Progress"
field "progress"
hozAlign "right"
editor "input"
}
column {
title "Gender"
field "gender"
editor "input"
}
column {
title "Rating"
field "rating"
hozAlign "center"
width 100
}
column {
title "Favourite Color"
field "col"
}
column {
title "Date Of Birth"
field "dob"
sorter "date"
hozAlign "center"
}
column {
title "Driver"
field "car"
hozAlign "center"
sorter "boolean"
}
}
}
Advanced
Multi-Language Support
Column headers, pagination labels, and other UI text can be translated into any language. Switch between locales at runtime using the buttons below.
Localization Controls
Loading…
tabulator {
height "311px"
layout "fitColumns"
pagination "local"
langs(["fr-fr": [columns: [name: "Nom", progress: "Progression", gender: "Genre", rating: "Évaluation", col: "Couleur", dob: "Date de Naissance"], pagination: [first: "Premier", first_title: "Première Page", last: "Dernier", last_title: "Dernière Page", prev: "Précédent", prev_title: "Page Précédente", next: "Suivant", next_title: "Page Suivante", all: "Toute"]], "de-de": [columns: [name: "Name", progress: "Fortschritt", gender: "Genre", rating: "Geschlecht", col: "Farbe", dob: "Geburtsdatum"], pagination: [first: "Erste", first_title: "Erste Seite", last: "Letzte", last_title: "Letzte Seite", prev: "Vorige", prev_title: "Vorige Seite", next: "Nächste", next_title: "Nächste Seite", all: "Alle"]]])
columns {
column {
title "Name"
field "name"
}
column {
title "Progress"
field "progress"
sorter "number"
}
column {
title "Gender"
field "gender"
}
column {
title "Rating"
field "rating"
}
column {
title "Favourite Color"
field "col"
}
column {
title "Date Of Birth"
field "dob"
}
}
}
Theming
The <rb-tabulator> web component supports all built-in Tabulator visual themes. Set the theme attribute to apply a different look and feel. Multiple themes can coexist on the same page — each is CSS-scoped to its own container.
Default
The standard Tabulator appearance with a clean, neutral design.
Loading…
tabulator {
height "311px"
layout "fitColumns"
columns {
column {
title "Name"
field "name"
width 150
}
column {
title "Progress"
field "progress"
formatter "progress"
sorter "number"
}
column {
title "Gender"
field "gender"
}
column {
title "Rating"
field "rating"
formatter "star"
hozAlign "center"
}
column {
title "Colour"
field "col"
}
column {
title "Date Of Birth"
field "dob"
sorter "date"
hozAlign "center"
}
column {
title "Driver"
field "car"
formatter "tickCross"
hozAlign "center"
}
}
}
Simple
A minimal theme with reduced borders and lighter visual weight.
Loading…
tabulator {
theme "simple"
height "311px"
layout "fitColumns"
columns {
column {
title "Name"
field "name"
width 150
}
column {
title "Progress"
field "progress"
formatter "progress"
sorter "number"
}
column {
title "Gender"
field "gender"
}
column {
title "Rating"
field "rating"
formatter "star"
hozAlign "center"
}
column {
title "Colour"
field "col"
}
column {
title "Date Of Birth"
field "dob"
sorter "date"
hozAlign "center"
}
column {
title "Driver"
field "car"
formatter "tickCross"
hozAlign "center"
}
}
}
Midnight
A dark theme with deep blue-black tones and subtle borders.
Loading…
tabulator {
theme "midnight"
height "311px"
layout "fitColumns"
columns {
column {
title "Name"
field "name"
width 150
}
column {
title "Progress"
field "progress"
formatter "progress"
sorter "number"
}
column {
title "Gender"
field "gender"
}
column {
title "Rating"
field "rating"
formatter "star"
hozAlign "center"
}
column {
title "Colour"
field "col"
}
column {
title "Date Of Birth"
field "dob"
sorter "date"
hozAlign "center"
}
column {
title "Driver"
field "car"
formatter "tickCross"
hozAlign "center"
}
}
}
Modern
A contemporary theme with a fresh, updated visual style.
Loading…
tabulator {
theme "modern"
height "311px"
layout "fitColumns"
columns {
column {
title "Name"
field "name"
width 150
}
column {
title "Progress"
field "progress"
formatter "progress"
sorter "number"
}
column {
title "Gender"
field "gender"
}
column {
title "Rating"
field "rating"
formatter "star"
hozAlign "center"
}
column {
title "Colour"
field "col"
}
column {
title "Date Of Birth"
field "dob"
sorter "date"
hozAlign "center"
}
column {
title "Driver"
field "car"
formatter "tickCross"
hozAlign "center"
}
}
}
Site Dark
A dark theme designed for integration with dark-mode websites, featuring muted contrast and soft edges.
Loading…
tabulator {
theme "site-dark"
height "311px"
layout "fitColumns"
columns {
column {
title "Name"
field "name"
width 150
}
column {
title "Progress"
field "progress"
formatter "progress"
sorter "number"
}
column {
title "Gender"
field "gender"
}
column {
title "Rating"
field "rating"
formatter "star"
hozAlign "center"
}
column {
title "Colour"
field "col"
}
column {
title "Date Of Birth"
field "dob"
sorter "date"
hozAlign "center"
}
column {
title "Driver"
field "car"
formatter "tickCross"
hozAlign "center"
}
}
}
Bootstrap 3
Styled to match the Bootstrap 3 component library aesthetic.
Loading…
tabulator {
theme "bootstrap3"
height "311px"
layout "fitColumns"
columns {
column {
title "Name"
field "name"
width 150
}
column {
title "Progress"
field "progress"
formatter "progress"
sorter "number"
}
column {
title "Gender"
field "gender"
}
column {
title "Rating"
field "rating"
formatter "star"
hozAlign "center"
}
column {
title "Colour"
field "col"
}
column {
title "Date Of Birth"
field "dob"
sorter "date"
hozAlign "center"
}
column {
title "Driver"
field "car"
formatter "tickCross"
hozAlign "center"
}
}
}
Bootstrap 4
Updated styling aligned with Bootstrap 4 conventions.
Loading…
tabulator {
theme "bootstrap4"
height "311px"
layout "fitColumns"
columns {
column {
title "Name"
field "name"
width 150
}
column {
title "Progress"
field "progress"
formatter "progress"
sorter "number"
}
column {
title "Gender"
field "gender"
}
column {
title "Rating"
field "rating"
formatter "star"
hozAlign "center"
}
column {
title "Colour"
field "col"
}
column {
title "Date Of Birth"
field "dob"
sorter "date"
hozAlign "center"
}
column {
title "Driver"
field "car"
formatter "tickCross"
hozAlign "center"
}
}
}
Bootstrap 5
Matches the current Bootstrap 5 design system.
Loading…
tabulator {
theme "bootstrap5"
height "311px"
layout "fitColumns"
columns {
column {
title "Name"
field "name"
width 150
}
column {
title "Progress"
field "progress"
formatter "progress"
sorter "number"
}
column {
title "Gender"
field "gender"
}
column {
title "Rating"
field "rating"
formatter "star"
hozAlign "center"
}
column {
title "Colour"
field "col"
}
column {
title "Date Of Birth"
field "dob"
sorter "date"
hozAlign "center"
}
column {
title "Driver"
field "car"
formatter "tickCross"
hozAlign "center"
}
}
}
Semantic UI
Adopts the Semantic UI visual language — rounded corners and clean spacing.
Loading…
tabulator {
theme "semanticui"
height "311px"
layout "fitColumns"
columns {
column {
title "Name"
field "name"
width 150
}
column {
title "Progress"
field "progress"
formatter "progress"
sorter "number"
}
column {
title "Gender"
field "gender"
}
column {
title "Rating"
field "rating"
formatter "star"
hozAlign "center"
}
column {
title "Colour"
field "col"
}
column {
title "Date Of Birth"
field "dob"
sorter "date"
hozAlign "center"
}
column {
title "Driver"
field "car"
formatter "tickCross"
hozAlign "center"
}
}
}
Bulma
Themed to match the Bulma CSS framework appearance.
Loading…
tabulator {
theme "bulma"
height "311px"
layout "fitColumns"
columns {
column {
title "Name"
field "name"
width 150
}
column {
title "Progress"
field "progress"
formatter "progress"
sorter "number"
}
column {
title "Gender"
field "gender"
}
column {
title "Rating"
field "rating"
formatter "star"
hozAlign "center"
}
column {
title "Colour"
field "col"
}
column {
title "Date Of Birth"
field "dob"
sorter "date"
hozAlign "center"
}
column {
title "Driver"
field "car"
formatter "tickCross"
hozAlign "center"
}
}
}
Materialize
Applies Material Design styling consistent with the Materialize CSS framework.
Loading…
tabulator {
theme "materialize"
height "311px"
layout "fitColumns"
columns {
column {
title "Name"
field "name"
width 150
}
column {
title "Progress"
field "progress"
formatter "progress"
sorter "number"
}
column {
title "Gender"
field "gender"
}
column {
title "Rating"
field "rating"
formatter "star"
hozAlign "center"
}
column {
title "Colour"
field "col"
}
column {
title "Date Of Birth"
field "dob"
sorter "date"
hozAlign "center"
}
column {
title "Driver"
field "car"
formatter "tickCross"
hozAlign "center"
}
}
}
Custom Theme
None of the presets quite right?
ReportBurster's data tables are powered by Tabulator, which means you have full control over styling. Override the default appearance by adding your own CSS rules that target the .tabulator, .tabulator-header, .tabulator-row, and other .tabulator-* classes inside your <rb-tabulator> element. Change colors, borders, fonts, spacing — anything CSS can touch. Alternatively, edit the provided tabulator.min.css file directly to build a fully custom theme from scratch.
How To Configure & Embed
First, configure your web components in ReportBurster — set up a report, define your data source, and customize the visualization under the Tabulator tab.
Then drop the <rb-tabulator> tag into any HTML page or framework component. Point it at your ReportBurster server and the web component handles fetching, rendering, and interaction automatically.