Tabulator

https://github.com/tabulator-tables/tabulator
Admin
An interactive table generation JavaScript library for creating sortable, filterable, and editable...
Tokens:49,469
Snippets:625
Trust Score:4.6
License:MIT
Update:3 months ago
Show doc for...
Tokens:
Raw
### Build the Tabulator library

Source: https://github.com/tabulator-tables/tabulator/blob/master/examples/README.md

Commands to install dependencies and generate the local distribution files required for the examples.

```bash
# from the repo root
npm install      # first time only
npm run build    # generates dist/js/tabulator.js and dist/css/tabulator.css
```

--------------------------------

### Install Dependencies

Source: https://github.com/tabulator-tables/tabulator/blob/master/_autodocs/09-import-build.md

Run this command to install the necessary project dependencies before building.

```bash
npm install
```

--------------------------------

### Open the examples gallery

Source: https://github.com/tabulator-tables/tabulator/blob/master/examples/README.md

Commands to launch the examples in a browser or via a local static server.

```bash
# simplest: just open the file in a browser
open examples/index.html        # macOS
xdg-open examples/index.html    # Linux

# or serve the folder with any static server
npx serve examples
```

--------------------------------

### Installing TypeScript Definitions

Source: https://github.com/tabulator-tables/tabulator/blob/master/_autodocs/09-import-build.md

Install community-maintained TypeScript definitions for Tabulator.

```bash
npm install --save-dev @types/tabulator-tables
```

--------------------------------

### Include Tabulator via CDN

Source: https://github.com/tabulator-tables/tabulator/blob/master/_autodocs/09-import-build.md

Load Tabulator directly from a CDN provider for quick setup without local installation.

```html
<link href="https://unpkg.com/tabulator-tables/dist/css/tabulator.min.css" rel="stylesheet">
<script src="https://unpkg.com/tabulator-tables/dist/js/tabulator.min.js"></script>

<script>
  var table = new Tabulator("#myTable", { /* options */ });
</script>
```

--------------------------------

### Custom Validator Implementation Examples

Source: https://github.com/tabulator-tables/tabulator/blob/master/_autodocs/07-validators.md

Examples demonstrating cross-field validation, conditional logic, and returning multiple error messages.

```javascript
// Cross-field validation
{
  field: "password_confirm",
  validator: (value, data) => {
    if (value !== data.password) {
      return "Passwords must match";
    }
    return true;
  }
}

// Conditional validation
{
  field: "renewal_date",
  validator: (value, data) => {
    if (data.subscription_type === "premium" && !value) {
      return "Renewal date required for premium";
    }
    return true;
  }
}

// Multiple error messages
{
  field: "username",
  validator: (value) => {
    const errors = [];
    if (!value) errors.push("Required");
    if (value && value.length < 3) errors.push("Min 3 chars");
    if (!/^[a-z0-9_]+$/.test(value)) errors.push("Lowercase letters, numbers, and underscores only");
    return errors.length ? errors : true;
  }
}
```

--------------------------------

### NPM Installation

Source: https://github.com/tabulator-tables/tabulator/blob/master/README.md

Install Tabulator using the NPM package manager.

```bash
npm install tabulator-tables --save
```

--------------------------------

### Tabulator Initialization Examples

Source: https://github.com/tabulator-tables/tabulator/blob/master/_autodocs/01-tabulator-core.md

Demonstrates initializing a table using a CSS selector, a DOM element, and attaching an event handler.

```javascript
// From CSS selector
const table = new Tabulator("#example-table", {
  columns: [
    { title: "Name", field: "name" },
    { title: "Age", field: "age" }
  ],
  data: [
    { name: "John", age: 30 },
    { name: "Jane", age: 28 }
  ]
});

// From DOM element
const element = document.getElementById("table");
const table = new Tabulator(element, { columns: [...], data: [...] });

// With event handler
table.on("tableBuilt", () => {
  console.log("Table is ready");
});
```

--------------------------------

### table.module(name)

Source: https://github.com/tabulator-tables/tabulator/blob/master/_autodocs/01-tabulator-core.md

Get a reference to an initialized module instance.

```APIDOC
## table.module(name)

### Description
Get a reference to an initialized module instance.

### Parameters
- **name** (string) - Required - Module name

### Returns
- **Module | null** - module instance or null if not available
```

--------------------------------

### Install Tabulator via NPM

Source: https://github.com/tabulator-tables/tabulator/blob/master/_autodocs/09-import-build.md

Use this command to add the Tabulator package to your project dependencies.

```bash
npm install tabulator-tables
```

--------------------------------

### Get Column Definition

Source: https://github.com/tabulator-tables/tabulator/blob/master/_autodocs/02-row-cell-components.md

Retrieve the full configuration object for the column.

```javascript
column.getDefinition()
```

```javascript
const def = column.getDefinition();
console.log(def.title, def.width, def.editor);
```

--------------------------------

### getWidth() / setWidth(width)

Source: https://github.com/tabulator-tables/tabulator/blob/master/_autodocs/02-row-cell-components.md

Methods to get or set the column width.

```APIDOC
## column.getWidth()
Returns the current rendered width in pixels.

## column.setWidth(width)
Sets the width of the column.
- **width** (number | string) - Required - Width in pixels or percentage.
```

--------------------------------

### getColumns()

Source: https://github.com/tabulator-tables/tabulator/blob/master/_autodocs/01-tabulator-core.md

Get all column components in the table.

```APIDOC
## getColumns()

### Description
Get all column components in the table.

### Returns
- **Array<ColumnComponent>** - all column components
```

--------------------------------

### Set table filters

Source: https://github.com/tabulator-tables/tabulator/blob/master/_autodocs/04-key-modules.md

Defines the method signature and usage examples for applying filters to the table.

```javascript
table.setFilter(filters, mode, conjunction)
```

```javascript
// Single filter
table.setFilter([
  { field: "status", type: "=", value: "active" }
]);

// Multiple filters (AND)
table.setFilter([
  { field: "status", type: "=", value: "active" },
  { field: "age", type: ">", value: 18 }
]);

// Multiple filters (OR)
table.setFilter([
  { field: "status", type: "=", value: "active" },
  { field: "status", type: "=", value: "pending" }
], undefined, "or");
```

--------------------------------

### Get total page count

Source: https://github.com/tabulator-tables/tabulator/blob/master/_autodocs/04-key-modules.md

Retrieves the maximum number of pages available.

```javascript
const max = table.getPageMax()
```

```javascript
const max = table.getPageMax();
console.log(`Total pages: ${max}`);
```

--------------------------------

### Get current page number

Source: https://github.com/tabulator-tables/tabulator/blob/master/_autodocs/04-key-modules.md

Returns the 1-based index of the currently displayed page.

```javascript
const page = table.getPage()
```

```javascript
const page = table.getPage();
```

--------------------------------

### Get current page size

Source: https://github.com/tabulator-tables/tabulator/blob/master/_autodocs/04-key-modules.md

Retrieves the number of rows currently configured per page.

```javascript
const size = table.getPageSize()
```

```javascript
const size = table.getPageSize();
```

--------------------------------

### Module Import Paths

Source: https://github.com/tabulator-tables/tabulator/blob/master/_autodocs/09-import-build.md

Demonstrates the difference in import paths when using pre-built distribution files versus building directly from source.

```javascript
// From dist (pre-built)
import Edit from 'tabulator-tables/dist/js/modules/edit.js';
import SelectRow from 'tabulator-tables/dist/js/modules/select-row.js';

// From source (if building from source)
import Edit from 'tabulator-tables/src/js/modules/Edit/Edit.js';
import SelectRow from 'tabulator-tables/src/js/modules/SelectRow/SelectRow.js';
```

--------------------------------

### Initialize minimal Tabulator instance

Source: https://github.com/tabulator-tables/tabulator/blob/master/_autodocs/03-configuration.md

Sets up a basic table with minimal column definitions and local data.

```javascript
const table = new Tabulator("#myTable", {
  columns: [
    { title: "Name", field: "name" },
    { title: "Age", field: "age" }
  ],
  data: [
    { name: "Alice", age: 30 },
    { name: "Bob", age: 25 }
  ]
});
```

--------------------------------

### Tabulator Initialization with Context Menu

Source: https://github.com/tabulator-tables/tabulator/blob/master/test/e2e/menu.html

Initializes a Tabulator instance with sample data and a generated context menu.

```javascript
document.addEventListener("DOMContentLoaded", function () { const testData = []; for (let i = 1; i <= 50; i++) { testData.push({ id: i, name: "Person " + i, age: 20 + (i % 50), gender: i % 2 ? "Male" : "Female", }); } const columns = [ { title: "ID", field: "id", sorter: "number" }, { title: "Name", field: "name", sorter: "string" }, { title: "Age", field: "age", sorter: "number" }, { title: "Gender", field: "gender", sorter: "string" }, ]; const rowContextMenu = []; for (let i = 1; i <= 12; i++) { rowContextMenu.push({ label: "Long menu item number " + i, action: function () {}, }); } window.testTable = new Tabulator("#test-table", { data: testData, columns: columns, layout: "fitColumns", rowContextMenu: rowContextMenu, }); });
```

--------------------------------

### Initialize Frozen and Responsive Tables

Source: https://github.com/tabulator-tables/tabulator/blob/master/examples/08-frozen-responsive.html

Defines the sample data and initializes two separate Tabulator instances: one with frozen columns for horizontal scrolling and one with responsive collapse for narrow viewports.

```javascript
var tabledata = [ { id: 1, name: "Oli Bob", email: "oli@example.com", phone: "555-0101", country: "United Kingdom", city: "London", dept: "Engineering", title: "Lead Developer", salary: 62000, started: "2018-03-01" }, { id: 2, name: "Mary May", email: "mary@example.com", phone: "555-0102", country: "Germany", city: "Berlin", dept: "Sales", title: "Account Manager",salary: 54000, started: "2020-07-15" }, { id: 3, name: "Chris L.", email: "chris@example.com", phone: "555-0103", country: "France", city: "Paris", dept: "Engineering", title: "Developer", salary: 48000, started: "2021-01-20" }, { id: 4, name: "Brendon P.", email: "bren@example.com", phone: "555-0104", country: "USA", city: "Austin", dept: "Marketing", title: "Strategist", salary: 51000, started: "2019-11-05" }, { id: 5, name: "Margret M.", email: "mar@example.com", phone: "555-0105", country: "Sweden", city: "Malmö", dept: "Sales", title: "Sales Rep", salary: 39500, started: "2022-05-30" }, { id: 6, name: "Van Ng", email: "van@example.com", phone: "555-0106", country: "Vietnam", city: "Hanoi", dept: "Engineering", title: "Architect", salary: 67000, started: "2016-09-12" }, ]; var money = { symbol: "$", precision: 0, thousand: "," }; // 1) Frozen columns + horizontal scroll. Using fixed widths with `fitData` // keeps the table wider than the page so it scrolls sideways; the frozen // columns stay pinned while the rest moves. new Tabulator("#frozen-table", { data: tabledata, layout: "fitData", movableColumns: true, // drag headers to reorder columnDefaults: { resizable: true }, // drag borders to resize columns: [ { title: "Name", field: "name", width: 150, frozen: true }, // pinned left { title: "Email", field: "email", width: 200 }, { title: "Phone", field: "phone", width: 130 }, { title: "Country", field: "country", width: 160 }, { title: "City", field: "city", width: 130 }, { title: "Department", field: "dept", width: 150 }, { title: "Title", field: "title", width: 180 }, { title: "Salary", field: "salary", width: 120, hozAlign: "right", formatter: "money", formatterParams: money }, { title: "Started", field: "started", width: 130, sorter: "date" }, { title: "", width: 70, hozAlign: "center", headerSort: false, frozen: true, // pinned right formatter: function () { return "✎"; } }, ], }); // 2) Responsive collapse. Columns have real widths and use `fitDataFill`, so // when they don't all fit, the highest `responsive` values are hidden first // into a collapsed sub-row (revealed via the row-header toggle). new Tabulator("#responsive-table", { data: tabledata, layout: "fitDataFill", responsiveLayout: "collapse", // row header holds the expand/collapse toggle for the hidden fields rowHeader: { formatter: "responsiveCollapse", width: 30, minWidth: 30, hozAlign: "center", resizable: false, headerSort: false }, columns: [ { title: "Name", field: "name", width: 160, responsive: 0 }, // 0 = never hide { title: "Department", field: "dept", width: 140, responsive: 1 }, { title: "Salary", field: "salary", width: 110, hozAlign: "right", responsive: 1, formatter: "money", formatterParams: money }, { title: "Title", field: "title", width: 150, responsive: 3 }, { title: "City", field: "city", width: 120, responsive: 3 }, { title: "Country", field: "country", width: 150, responsive: 2 }, { title: "Email", field: "email", width: 200, responsive: 4 }, { title: "Phone", field: "phone", width: 130, responsive: 5 }, // hidden first { title: "Started", field: "started", width: 130, sorter: "date", responsive: 5 }, ], });
```

--------------------------------

### getDataCount(active)

Source: https://github.com/tabulator-tables/tabulator/blob/master/_autodocs/01-tabulator-core.md

Get the count of rows in the table.

```APIDOC
## getDataCount(active)

### Description
Get the count of rows in the table.

### Parameters
- **active** (boolean) - Optional - If true, counts only visible/non-filtered rows

### Returns
- **number** - Count of rows
```

--------------------------------

### Initialize Full-Featured Tabulator Table

Source: https://github.com/tabulator-tables/tabulator/blob/master/examples/10-full-demo.html

Sets up a Tabulator instance with data, column definitions, persistence, and interactive controls for row manipulation and downloading.

```javascript
var tabledata = [ { id: 1, name: "Oli Bob", dept: "Engineering", progress: 12, rating: 1, revenue: 12000, active: true, dob: "2005-08-14" }, { id: 2, name: "Mary May", dept: "Sales", progress: 90, rating: 4, revenue: 48000, active: false, dob: "1989-02-01" }, { id: 3, name: "Chris L.", dept: "Engineering", progress: 42, rating: 0, revenue: 9000, active: true, dob: "1980-11-23" }, { id: 4, name: "Brendon P.", dept: "Marketing", progress: 100,rating: 1, revenue: 21000, active: true, dob: "1992-04-18" }, { id: 5, name: "Margret M.", dept: "Sales", progress: 16, rating: 5, revenue: 33500, active: false, dob: "1998-06-30" }, { id: 6, name: "Van Ng", dept: "Engineering", progress: 70, rating: 3, revenue: 27000, active: true, dob: "1975-09-12" }, ]; // Track the next id so "Add row" produces unique keys. var nextId = tabledata.length + 1; var table = new Tabulator("#example-table", { data: tabledata, layout: "fitColumns", index: "id", // Persist sort, filter, group and column layout across reloads. persistence: true, persistenceID: "tabulator-examples-full-demo", selectableRows: true, groupBy: "dept", groupStartOpen: true, columns: [ { formatter: "rowSelection", titleFormatter: "rowSelection", hozAlign: "center", headerSort: false, width: 45, cellClick: function (e, cell) { cell.getRow().toggleSelect(); } }, { title: "Name", field: "name", editor: "input", validator: "required", headerFilter: "input", widthGrow: 2 }, { title: "Department", field: "dept", headerFilter: "list", headerFilterParams: { values: ["Engineering", "Sales", "Marketing"], clearable: true }, editor: "list", editorParams: { values: ["Engineering", "Sales", "Marketing"] } }, { title: "Progress", field: "progress", sorter: "number", formatter: "progress", formatterParams: { min: 0, max: 100 }, editor: "number", editorParams: { min: 0, max: 100 }, validator: ["min:0", "max:100"], bottomCalc: "avg", bottomCalcParams: { precision: 0 } }, { title: "Rating", field: "rating", formatter: "star", hozAlign: "center", width: 120, editor: "star" }, { title: "Revenue", field: "revenue", sorter: "number", hozAlign: "right", formatter: "money", formatterParams: { symbol: "$", precision: 0, thousand: "," }, editor: "number", bottomCalc: "sum", bottomCalcFormatter: "money", bottomCalcFormatterParams: { symbol: "$", precision: 0, thousand: "," } }, { title: "Active", field: "active", hozAlign: "center", formatter: "tickCross", editor: "tickCross", headerFilter: "tickCross", headerFilterParams: { tristate: true } }, { title: "DOB", field: "dob", sorter: "date", hozAlign: "center", editor: "date" }, // Per-row delete button. { title: "", width: 60, hozAlign: "center", headerSort: false, formatter: function () { return "🗑"; }, cellClick: function (e, cell) { cell.getRow().delete(); } }, ], }); document.getElementById("add-row").addEventListener("click", function () { table.addRow({ id: nextId++, name: "New Person", dept: "Engineering", progress: 0, rating: 0, revenue: 0, active: true, dob: "2000-01-01" }, true); }); document.getElementById("clear-selected").addEventListener("click", function () { table.getSelectedRows().forEach(function (row) { row.delete(); }); }); document.getElementById("dl-csv").addEventListener("click", function () { table.download("csv", "tabulator-data.csv"); }); document.getElementById("dl-json").addEventListener("click", function () { table.download("json", "tabulator-data.json"); }); document.getElementById("dl-html").addEventListener("click", function () { table.download("html", "tabulator-data.html", { style: true }); }); document.getElementById("reset").addEventListener("click", function () { table.clearHistory && table.clearHistory(); // Wipe the persisted layout and reload to start fresh. ["sort", "filter", "group", "page", "columns"].forEach(function (type) { localStorage.removeItem("tabulator-examples-full-demo-" + type); }); location.reload(); });
```

--------------------------------

### Initialize Tabulator with Selectable Range

Source: https://github.com/tabulator-tables/tabulator/blob/master/test/e2e/select-range.html

Sets up a Tabulator instance with test data and columns, enabling the selectableRange feature.

```javascript
// Initialize table with test data const testData = [ { id: 1, name: "Alice", age: 25, gender: "Female" }, { id: 2, name: "Bob", age: 32, gender: "Male" }, { id: 3, name: "Charlie", age: 45, gender: "Male" }, { id: 4, name: "Diana", age: 27, gender: "Female" }, { id: 5, name: "Ethan", age: 35, gender: "Male" }, ]; const columns = [ { title: "ID", field: "id", editor: "input" }, { title: "Name", field: "name", editor: "input" }, { title: "Age", field: "age", editor: "input" }, { title: "Gender", field: "gender", editor: "input" }, ]; // Create global reference for tests to access window.testTable = new Tabulator("#test-table", { data: testData, columns: columns, layout: "fitColumns", selectableRange: true, });
```

--------------------------------

### Get Cell Column

Source: https://github.com/tabulator-tables/tabulator/blob/master/_autodocs/02-row-cell-components.md

Retrieves the ColumnComponent associated with the cell.

```javascript
cell.getColumn()
```

```javascript
const col = cell.getColumn();
console.log(col.getField());
```

--------------------------------

### Get Cell Row

Source: https://github.com/tabulator-tables/tabulator/blob/master/_autodocs/02-row-cell-components.md

Retrieves the RowComponent that contains the cell.

```javascript
cell.getRow()
```

```javascript
const row = cell.getRow();
console.log(row.getData());
```

--------------------------------

### Initialize Tabulator with Grouping and Calculations

Source: https://github.com/tabulator-tables/tabulator/blob/master/examples/06-grouping-calculations.html

Configures a table with row grouping by department and column calculations for age and revenue.

```javascript
var tabledata = [ { id: 1, name: "Oli Bob", dept: "Engineering", age: 28, revenue: 12000 }, { id: 2, name: "Mary May", dept: "Sales", age: 41, revenue: 48000 }, { id: 3, name: "Chris L.", dept: "Engineering", age: 22, revenue: 9000 }, { id: 4, name: "Brendon P.", dept: "Marketing", age: 35, revenue: 21000 }, { id: 5, name: "Margret M.", dept: "Sales", age: 26, revenue: 33500 }, { id: 6, name: "Van Ng", dept: "Engineering", age: 51, revenue: 27000 }, { id: 7, name: "Duc Ng", dept: "Marketing", age: 29, revenue: 15500 }, { id: 8, name: "Anita Bath", dept: "Sales", age: 33, revenue: 52000 }, ]; var table = new Tabulator("#example-table", { data: tabledata, layout: "fitColumns", groupBy: "dept", // group rows by this field groupStartOpen: true, // Custom group header showing the department and its row count. groupHeader: function (value, count) { return value + " <span style='color:#888'>(" + count + " " + (count === 1 ? "person" : "people") + ")</span>"; }, columns: [ { title: "Name", field: "name", sorter: "string" }, { title: "Department", field: "dept", sorter: "string" }, { title: "Age", field: "age", sorter: "number", hozAlign: "right", bottomCalc: "avg", bottomCalcParams: { precision: 1 } }, // average age { title: "Revenue", field: "revenue", sorter: "number", hozAlign: "right", formatter: "money", formatterParams: { symbol: "$", precision: 0, thousand: "," }, topCalc: "max", // highest in group/table topCalcFormatter: "money", topCalcFormatterParams: { symbol: "$", precision: 0, thousand: "," }, bottomCalc: "sum", // total bottomCalcFormatter: "money", bottomCalcFormatterParams: { symbol: "$", precision: 0, thousand: "," } }, ], });
```

--------------------------------

### Get Cell Value

Source: https://github.com/tabulator-tables/tabulator/blob/master/_autodocs/02-row-cell-components.md

Retrieves the current value of a cell.

```javascript
cell.getValue()
```

```javascript
const value = cell.getValue();
console.log(`Cell value: ${value}`);
```

--------------------------------

### Initialize Tabulator with Options

Source: https://github.com/tabulator-tables/tabulator/blob/master/_autodocs/03-configuration.md

Pass configuration options as the second parameter to the Tabulator constructor to define table behavior and data.

```javascript
new Tabulator("#table", {
  height: 400,
  columns: [...],
  data: [...]
})
```

--------------------------------

### Built-in Validator Examples

Source: https://github.com/tabulator-tables/tabulator/blob/master/_autodocs/07-validators.md

Common built-in validators for data integrity.

```javascript
{ field: "name", validator: "required" }
```

```javascript
{ field: "quantity", validator: "integer" }
```

```javascript
{ field: "price", validator: "float" }
```

```javascript
{ field: "count", validator: "numeric" }
```

```javascript
{ field: "description", validator: "string" }
```

```javascript
{ field: "email", validator: "email" }
```

```javascript
{ field: "website", validator: "url" }
```

--------------------------------

### Build and Test Commands

Source: https://github.com/tabulator-tables/tabulator/blob/master/_autodocs/09-import-build.md

Use these npm scripts to build specific targets, lint code, or execute test suites.

```bash
# Build all targets (JS and CSS)
npm run build

# Watch for changes (development)
npm run dev

# Build only CSS
npm run dev:css

# Build only ESM
npm run dev:esm

# Build only UMD
npm run dev:umd

# Lint code
npm run lint

# Run tests
npm run test:unit  # Jest tests
npm run test:e2e   # Playwright tests
npm run test       # Both
```

--------------------------------

### Import Tabulator using ES Modules

Source: https://github.com/tabulator-tables/tabulator/blob/master/_autodocs/09-import-build.md

Recommended for modern projects to enable tree-shaking and smaller bundle sizes.

```javascript
import Tabulator from 'tabulator-tables';

const table = new Tabulator("#myTable", { /* options */ });
```

--------------------------------

### Get Column Width

Source: https://github.com/tabulator-tables/tabulator/blob/master/_autodocs/02-row-cell-components.md

Retrieve the current rendered width in pixels.

```javascript
column.getWidth()
```

```javascript
const width = column.getWidth();
```

--------------------------------

### Initialize Tabulator with Built-in Formatters

Source: https://github.com/tabulator-tables/tabulator/blob/master/examples/02-formatters.html

Configures a table with various column formatters such as progress, star, tickCross, money, color, and link.

```javascript
var tabledata = [ { id: 1, name: "Oli Bob", progress: 12, rating: 1, paid: true, salary: 32000, color: "#d9534f", site: "https://tabulator.info" }, { id: 2, name: "Mary May", progress: 90, rating: 4, paid: false, salary: 41250, color: "#5cb85c", site: "https://tabulator.info" }, { id: 3, name: "Chris L.", progress: 42, rating: 0, paid: true, salary: 28900, color: "#f0ad4e", site: "https://tabulator.info" }, { id: 4, name: "Brendon P.",progress: 100,rating: 1, paid: false, salary: 56000, color: "#5bc0de", site: "https://tabulator.info" }, { id: 5, name: "Margret M.",progress: 16, rating: 5, paid: true, salary: 38500, color: "#9b59b6", site: "https://tabulator.info" }, ]; var table = new Tabulator("#example-table", { data: tabledata, layout: "fitColumns", columns: [ { title: "Name", field: "name", width: 130 }, // Progress bar driven by a 0-100 number, coloured low→high. { title: "Progress", field: "progress", sorter: "number", minWidth: 130, formatter: "progress", formatterParams: { min: 0, max: 100, color: ["#d9534f", "#f0ad4e", "#5cb85c"], legend: true } }, // Star rating out of 5. { title: "Rating", field: "rating", width: 130, hozAlign: "center", formatter: "star", formatterParams: { stars: 5 } }, // Boolean rendered as a tick / cross. { title: "Paid", field: "paid", width: 90, hozAlign: "center", formatter: "tickCross" }, // Currency formatting. { title: "Salary", field: "salary", sorter: "number", hozAlign: "right", formatter: "money", formatterParams: { symbol: "$", precision: 0, thousand: "," } }, // Swatch coloured from the cell value. { title: "Colour", field: "color", width: 90, formatter: "color" }, // Clickable link. { title: "Website", field: "site", formatter: "link", formatterParams: { label: "Visit site", target: "_blank" } }, ], });
```

--------------------------------

### Get row cells

Source: https://github.com/tabulator-tables/tabulator/blob/master/_autodocs/02-row-cell-components.md

Retrieve all cell components associated with the row.

```javascript
row.getCells()
```

```javascript
const cells = row.getCells();
cells.forEach(cell => {
  console.log(cell.getValue());
});
```

--------------------------------

### Importing the Full Tabulator Library

Source: https://github.com/tabulator-tables/tabulator/blob/master/_autodocs/09-import-build.md

Use the full import to include all built-in modules automatically. This approach results in a larger file size.

```javascript
import Tabulator from 'tabulator-tables';

// All modules included automatically with this import
const table = new Tabulator("#myTable", {
  pagination: "local",  // Page module available
  sortMode: "local",    // Sort module available
  filterMode: "local"   // Filter module available
  // ... etc
});
```

--------------------------------

### Get active filters

Source: https://github.com/tabulator-tables/tabulator/blob/master/_autodocs/04-key-modules.md

Retrieves the currently applied filters from the table instance.

```javascript
const filters = table.getFilters(includeContext)
```

```javascript
const filters = table.getFilters();
console.log(filters);
```

--------------------------------

### Get Column Header Element

Source: https://github.com/tabulator-tables/tabulator/blob/master/_autodocs/02-row-cell-components.md

Access the DOM element for the column header.

```javascript
column.getElement()
```

```javascript
const element = column.getElement();
if (element) {
  element.style.backgroundColor = "lightblue";
}
```

--------------------------------

### Retrieve Module Instance

Source: https://github.com/tabulator-tables/tabulator/blob/master/_autodocs/01-tabulator-core.md

Returns a reference to an initialized module instance by name.

```javascript
table.module(name)
```

```javascript
const editModule = table.module("edit");
if (editModule) {
  editModule.someMethod();
}
```

--------------------------------

### Tabulator Initialization for Resize Test

Source: https://github.com/tabulator-tables/tabulator/blob/master/test/e2e/resize-table.html

Initializes a Tabulator instance with sample data and column definitions, including an editable input field.

```javascript
document.addEventListener("DOMContentLoaded", function () { const tabledata = []; for (let i = 1; i <= 20; i++) { tabledata.push({ id: i, name: "Name " + i, value: "Value " + i }); } window.testTable = new Tabulator("#resize-table", { data: tabledata, height: "300px", layout: "fitColumns", columns: [ { title: "ID", field: "id" }, { title: "Name", field: "name", editor: "input" }, { title: "Value", field: "value" }, ], }); });
```

--------------------------------

### Get Column Field Name

Source: https://github.com/tabulator-tables/tabulator/blob/master/_autodocs/02-row-cell-components.md

Retrieve the field name associated with the column.

```javascript
column.getField()
```

```javascript
const field = column.getField();
```

--------------------------------

### Get Cell DOM Element

Source: https://github.com/tabulator-tables/tabulator/blob/master/_autodocs/02-row-cell-components.md

Accesses the underlying DOM element for the cell.

```javascript
cell.getElement()
```

```javascript
const element = cell.getElement();
element.style.color = "red";
```

--------------------------------

### Initialize Tabulator with Grouped Data

Source: https://github.com/tabulator-tables/tabulator/blob/master/test/e2e/group-scroll.html

Generates sample data and initializes a Tabulator instance with grouping enabled and a fixed height.

```javascript
function generateData() { const groupCount = 1000; const rowsPerGroup = 3; const data = []; let id = 1; for (let g = 0; g < groupCount; g++) { for (let r = 0; r < rowsPerGroup; r++) { data.push({ id: id++, category: "Group " + g, name: "Row " + g + "-" + r, value: Math.round(Math.random() * 1000), }); } } return data; } window.testTable = new Tabulator("#test-table", { data: generateData(), columns: [ { title: "Name", field: "name" }, { title: "Category", field: "category" }, { title: "Value", field: "value", sorter: "number" }, ], height: "300px", layout: "fitColumns", groupBy: "category", groupStartOpen: false, });
```

--------------------------------

### Importing Modules for Tree-Shaking

Source: https://github.com/tabulator-tables/tabulator/blob/master/_autodocs/09-import-build.md

Import specific modules to reduce the final bundle size when using a bundler.

```javascript
import Tabulator from 'tabulator-tables/dist/js/tabulator.js';
import Sort from 'tabulator-tables/dist/js/modules/sort.js';
import Filter from 'tabulator-tables/dist/js/modules/filter.js';

// With good bundler config, can reduce to ~100-150 KB minified
```

--------------------------------

### Get row position

Source: https://github.com/tabulator-tables/tabulator/blob/master/_autodocs/02-row-cell-components.md

Retrieve the current zero-based position of the row in the table.

```javascript
row.getPosition()
```

```javascript
const pos = row.getPosition();
console.log(`Row at position ${pos}`);
```

--------------------------------

### Get row index

Source: https://github.com/tabulator-tables/tabulator/blob/master/_autodocs/02-row-cell-components.md

Retrieve the unique index value or ID for the row.

```javascript
row.getIndex()
```

```javascript
const id = row.getIndex();
console.log(`Row ${id}`);
```

--------------------------------

### Data Generation and Tabulator Initialization

Source: https://github.com/tabulator-tables/tabulator/blob/master/test/e2e/scroll-jump-group.html

Generates mock data and initializes a Tabulator instance with grouping enabled.

```javascript
function generateData() { const data = []; let id = 1; for (let g = 0; g < 400; g++) { for (let r = 0; r < 5; r++) { const lines = (id % 8) + 1; let text = ""; for (let l = 0; l < lines; l++) { text += "Line " + l + " of row " + id + " padding text to wrap. "; } data.push({ id: id, category: "Group " + g, name: "Row " + id, notes: text, value: (id * 37) % 1000 }); id++; } } return data; } document.addEventListener("DOMContentLoaded", () => { window.testTable = new Tabulator("#test-table", { data: generateData(), columns: [ { title: "ID", field: "id", width: 120 }, { title: "Name", field: "name", width: 200 }, { title: "Notes", field: "notes", width: 600, formatter: "textarea" }, { title: "Value", field: "value", width: 200, sorter: "number" }, ], height: "300px", layout: "fitData", groupBy: "category", groupStartOpen: true, }); });
```

--------------------------------

### Get Table Module

Source: https://github.com/tabulator-tables/tabulator/blob/master/_autodocs/02-row-cell-components.md

Accesses a specific module instance from the table the cell belongs to.

```javascript
cell.getModule(name)
```

```javascript
const editModule = cell.getModule("edit");
```

--------------------------------

### new Tabulator(element, options, modules)

Source: https://github.com/tabulator-tables/tabulator/blob/master/_autodocs/01-tabulator-core.md

Initializes a new Tabulator instance on a specified DOM element with optional configuration and modules.

```APIDOC
## new Tabulator(element, options, modules)

### Description
Initializes a new table instance by attaching it to a DOM element. This is the main entry point for the Tabulator library.

### Parameters
- **element** (HTMLElement | string) - Required - The DOM element or CSS selector string where the table will be rendered.
- **options** (Object) - Optional - Configuration object for table behavior and appearance.
- **modules** (Array<Module>) - Optional - An array of module classes to extend core functionality.

### Returns
- **Tabulator** - An instance of the Tabulator class containing public methods and properties.

### Example
```javascript
const table = new Tabulator("#example-table", {
  columns: [
    { title: "Name", field: "name" },
    { title: "Age", field: "age" }
  ],
  data: [
    { name: "John", age: 30 },
    { name: "Jane", age: 28 }
  ]
});
```
```

--------------------------------

### Initialize Tabulator with Percentage Height

Source: https://github.com/tabulator-tables/tabulator/blob/master/test/e2e/editor-percentage-height.html

Initializes a Tabulator instance with a 50% height setting and a textarea editor. Note that the parent container must have defined dimensions for percentage heights to resolve correctly.

```javascript
document.addEventListener("DOMContentLoaded", function () { const tabledata = [ { id: 1, info: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.", }, ]; // Create global reference for tests to access window.testTable = new Tabulator("#percent-table", { data: tabledata, height: "50%", layout: "fitColumns", columns: [ { title: "Info", field: "info", editor: "textarea", formatter: "textarea", }, ], }); });
```

--------------------------------

### Get specific cell

Source: https://github.com/tabulator-tables/tabulator/blob/master/_autodocs/02-row-cell-components.md

Retrieve a single cell component by its column field name.

```javascript
row.getCell(column)
```

```javascript
const cell = row.getCell("email");
if (cell) {
  console.log(cell.getValue());
}
```

--------------------------------

### nextPage()

Source: https://github.com/tabulator-tables/tabulator/blob/master/_autodocs/04-key-modules.md

Navigates to the next page.

```APIDOC
## nextPage()

### Description
Go to the next page.

### Returns
- **Promise** - Resolves when page loads

### Example
```javascript
table.nextPage();
```
```

--------------------------------

### Configure progress editor

Source: https://github.com/tabulator-tables/tabulator/blob/master/_autodocs/06-formatters-editors.md

Enables a progress bar editor with defined min and max bounds.

```javascript
{
  title: "Progress",
  field: "completion",
  editor: "progress",
  editorParams: {
    min: 0,
    max: 100
  }
}
```

--------------------------------

### Retrieve selected row data

Source: https://github.com/tabulator-tables/tabulator/blob/master/_autodocs/04-key-modules.md

Get an array of data objects for all currently selected rows.

```javascript
const data = table.getSelectedData()
```

```javascript
const data = table.getSelectedData();
```

--------------------------------

### Initialize a Basic Tabulator Table

Source: https://github.com/tabulator-tables/tabulator/blob/master/_autodocs/00-index.md

Creates a new table instance with defined columns and initial data. The tableBuilt event ensures the table is fully initialized before interaction.

```javascript
import Tabulator from 'tabulator-tables';

const table = new Tabulator("#myTable", {
  columns: [
    { title: "Name", field: "name" },
    { title: "Email", field: "email" },
    { title: "Age", field: "age" }
  ],
  data: [
    { name: "Alice", email: "alice@example.com", age: 30 },
    { name: "Bob", email: "bob@example.com", age: 25 }
  ]
});

// Wait for table to initialize
table.on("tableBuilt", () => {
  console.log("Table ready!");
});
```

--------------------------------

### Retrieve selected row components

Source: https://github.com/tabulator-tables/tabulator/blob/master/_autodocs/04-key-modules.md

Get an array of RowComponent objects for all currently selected rows.

```javascript
const rows = table.getSelectedRows()
```

```javascript
const selected = table.getSelectedRows();
selected.forEach(row => {
  console.log(row.getData());
});
```

--------------------------------

### Configure Local Pagination in Tabulator

Source: https://github.com/tabulator-tables/tabulator/blob/master/examples/05-pagination.html

Initializes a Tabulator instance with local pagination enabled, including custom page size options and a row counter.

```javascript
// Generate 200 rows of sample data so paging is meaningful. var firstNames = ["Oli", "Mary", "Chris", "Brendon", "Margret", "Van", "Duc", "Anita", "Sam", "Priya"]; var depts = ["Engineering", "Sales", "Marketing", "Support", "Finance"]; var tabledata = []; for (var i = 1; i <= 200; i++) { tabledata.push({ id: i, name: firstNames[i % firstNames.length] + " #" + i, dept: depts[i % depts.length], age: 18 + (i * 7) % 45, score: (i * 37) % 100, }); } var table = new Tabulator("#example-table", { data: tabledata, layout: "fitColumns", pagination: "local", // page the in-memory data paginationSize: 10, // rows per page paginationSizeSelector: [10, 25, 50, 100], // let the user change page size paginationCounter: "rows", // "Showing X-Y of Z rows" columns: [ { title: "ID", field: "id", width: 70, sorter: "number" }, { title: "Name", field: "name", sorter: "string" }, { title: "Department", field: "dept", sorter: "string" }, { title: "Age", field: "age", sorter: "number", hozAlign: "right" }, { title: "Score", field: "score", sorter: "number", hozAlign: "right", formatter: "progress", formatterParams: { min: 0, max: 100 } }, ], });
```

--------------------------------

### Configure and update Tabulator settings

Source: https://github.com/tabulator-tables/tabulator/blob/master/_autodocs/00-index.md

Pass configuration to the constructor or update settings dynamically using setter methods.

```javascript
new Tabulator("#table", {
  height: 400,
  columns: [...]
})

// Update settings after creation
table.setColumns([...])
table.setHeight(500)
```

--------------------------------

### Get Cell Field Name

Source: https://github.com/tabulator-tables/tabulator/blob/master/_autodocs/02-row-cell-components.md

Retrieves the field name associated with the cell's column.

```javascript
cell.getField()
```

```javascript
const field = cell.getField();
console.log(`Cell field: ${field}`);
```

--------------------------------

### Initialize Tabulator Class

Source: https://github.com/tabulator-tables/tabulator/blob/master/_autodocs/08-types.md

Constructor for creating a new table instance.

```javascript
new Tabulator(element, options, modules)
```

--------------------------------

### Importing Individual Modules

Source: https://github.com/tabulator-tables/tabulator/blob/master/_autodocs/09-import-build.md

Import specific modules to reduce bundle size and improve initialization speed. Pass the required modules as the third parameter to the Tabulator constructor.

```javascript
// Import only needed modules to reduce bundle size
import Tabulator from 'tabulator-tables/dist/js/tabulator.js';
import Sort from 'tabulator-tables/dist/js/modules/sort.js';
import Filter from 'tabulator-tables/dist/js/modules/filter.js';
import Page from 'tabulator-tables/dist/js/modules/page.js';

// Pass modules as 3rd parameter
const table = new Tabulator("#myTable",
  {
    columns: [...],
    data: [...]
  },
  [Sort, Filter, Page]  // Only include modules you need
);
```

--------------------------------

### Get row data

Source: https://github.com/tabulator-tables/tabulator/blob/master/_autodocs/02-row-cell-components.md

Retrieve the data object for a row, optionally specifying the transformation type.

```javascript
row.getData(transform)
```

```javascript
const data = row.getData();         // All data
const edited = row.getData("edit"); // Pending edits only
const view = row.getData("view");   // Formatted view data
```

--------------------------------

### Define Row Data Object

Source: https://github.com/tabulator-tables/tabulator/blob/master/_autodocs/08-types.md

Example structure of a plain JavaScript object representing a row's data.

```javascript
{
  id: 1,                    // index field (default "id")
  name: "John",
  email: "john@example.com",
  age: 30,
  metadata: {
    created: "2024-01-15",
    status: "active"
  }
}
```

--------------------------------

### Get row DOM element

Source: https://github.com/tabulator-tables/tabulator/blob/master/_autodocs/02-row-cell-components.md

Access the underlying DOM element for the row to apply custom styling or attributes.

```javascript
row.getElement()
```

```javascript
const element = row.getElement();
element.style.backgroundColor = "yellow";
```

--------------------------------

### Use Datetime Formatter

Source: https://github.com/tabulator-tables/tabulator/blob/master/_autodocs/06-formatters-editors.md

Formats date and time values using Luxon format strings.

```javascript
{
  title: "Created",
  field: "created_at",
  formatter: "datetime",
  formatterParams: {
    outputFormat: "yyyy-MM-dd HH:mm:ss",
    inputFormat: "YYYY-MM-DD HH:mm:ss",
    invalidPlaceholder: "Invalid date"
  }
}
```

--------------------------------

### Importing SCSS for Customization

Source: https://github.com/tabulator-tables/tabulator/blob/master/_autodocs/09-import-build.md

Import the source SCSS files if you need to customize styles using a preprocessor like sass-loader.

```javascript
// Import SCSS (requires sass-loader or similar)
import 'tabulator-tables/src/scss/tabulator.scss';
```

--------------------------------

### Configure Pagination Options

Source: https://github.com/tabulator-tables/tabulator/blob/master/_autodocs/08-types.md

Sets pagination behavior and display settings within the table configuration object.

```javascript
{
  pagination: "local",          // false | "local" | "remote"
  paginationMode: "local",
  paginationSize: 50,
  paginationInitialPage: 1,
  paginationButtonCount: 5,
  paginationCounter: "rows",
  paginationSizeSelector: [10, 25, 50, 100],
  paginationElement: HTMLElement,
  paginationAddRow: "page"      // "page" | "table"
}
```

--------------------------------

### Initialize Tabulator with Row Selection

Source: https://github.com/tabulator-tables/tabulator/blob/master/examples/07-selection.html

Configures a Tabulator instance with a row selection checkbox column and event listeners for managing selection state.

```javascript
var tabledata = [ { id: 1, name: "Oli Bob", dept: "Engineering", age: 28 }, { id: 2, name: "Mary May", dept: "Sales", age: 41 }, { id: 3, name: "Chris L.", dept: "Engineering", age: 22 }, { id: 4, name: "Brendon P.", dept: "Marketing", age: 35 }, { id: 5, name: "Margret M.", dept: "Sales", age: 26 }, { id: 6, name: "Van Ng", dept: "Engineering", age: 51 }, ]; var countEl = document.getElementById("count"); var logEl = document.getElementById("log"); var table = new Tabulator("#example-table", { data: tabledata, layout: "fitColumns", selectableRows: true, // allow row selection columns: [ // Checkbox column: cell tickbox selects the row, header tickbox toggles all. { formatter: "rowSelection", titleFormatter: "rowSelection", hozAlign: "center", headerSort: false, width: 50, cellClick: function (e, cell) { cell.getRow().toggleSelect(); } }, { title: "Name", field: "name", sorter: "string" }, { title: "Department", field: "dept", sorter: "string" }, { title: "Age", field: "age", sorter: "number", hozAlign: "right" }, ], }); // In Tabulator 6 you bind event callbacks with table.on(...). // Keep the on-page summary in sync with selection state. table.on("rowSelectionChanged", function (data, rows) { countEl.textContent = data.length; }); document.getElementById("select-all").addEventListener("click", function () { table.selectRow(); }); document.getElementById("deselect-all").addEventListener("click", function () { table.deselectRow(); }); document.getElementById("log-selected").addEventListener("click", function () { logEl.textContent = JSON.stringify(table.getSelectedData(), null, 2); });
```

--------------------------------

### Perform Common Table Operations

Source: https://github.com/tabulator-tables/tabulator/blob/master/_autodocs/00-index.md

Demonstrates methods for data loading, row manipulation, sorting, and filtering on an existing table instance.

```javascript
// Load data from URL
table.setData("/api/users");

// Add a row
table.addData({ name: "Charlie", email: "charlie@example.com", age: 35 });

// Update a row
const row = table.getRow(1);
row.update({ age: 31 });

// Delete a row
table.deleteRow(1);

// Get all data
const data = table.getData();

// Set sort
table.setSort([{ column: "name", dir: "asc" }]);

// Set filter
table.setFilter([{ field: "age", type: ">", value: 25 }]);
```

--------------------------------

### Load and access Tabulator modules

Source: https://github.com/tabulator-tables/tabulator/blob/master/_autodocs/00-index.md

Modules can be injected during initialization or accessed via the module() method.

```javascript
new Tabulator("#table", options, [ModuleClass1, ModuleClass2])
```

```javascript
const editModule = table.module("edit");
```
Tokens:
Raw