Tabulator

https://www.tabulator.info/docs/6.x/
Admin
Tabulator is a JavaScript library for creating interactive tables with a wide range of features,...
Tokens:374,983
Snippets:4,085
Trust Score:9.6
Update:4 days ago
Show doc for...
Tokens:
Raw
### Initialize Tabulator with Resize Guides

Source: https://www.tabulator.info/docs/6.x/layout

Full configuration example enabling both row and column resize guides.

```javascript
var table = new Tabulator("#example-table", {
    height:"311px",
    resizableRows:true,
    resizableRowGuide:true,
    resizableColumnGuide:true,
    columnDefaults:{
        resizable:true,
    },
    columns: [
        {title:"Name", field:"name", width:200},
        {title:"Progress", field:"progress"},
        {title:"Gender", field:"gender"}, 
        {title:"Rating", field:"rating"},
        {title:"Favourite Color", field:"col"},
    ],
});
```

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

### Manual Tabulator Setup in React Component

Source: https://www.tabulator.info/docs/6.x/frameworks

A complete example of manually setting up a Tabulator table in a React class component, including imports, componentDidMount instantiation, and rendering a div ref.

```javascript
import React from "react";
import ReactDOM from "react-dom";
import {TabulatorFull as Tabulator} from "tabulator-tables"; //import Tabulator library
import "tabulator-tables/dist/css/tabulator.min.css"; //import Tabulator stylesheet

class App extends React.Component {
  el = React.createRef();

  tabulator = null; //variable to hold your table
  tableData = []; //data for table to display

  componentDidMount() {
    //instantiate Tabulator when element is mounted
    this.tabulator = new Tabulator(this.el, {
      data: this.tableData, //link data to table
      reactiveData:true, //enable data reactivity
      columns: [], //define table columns
    });
  }

  //add table holder element to DOM
  render(){
    return (<div ref={el => (this.el = el)} />);
  }
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);
```

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

### Install dependencies

Source: https://www.tabulator.info/docs/6.x/build

Run this command in the tabulator folder to install all necessary dependencies for building custom versions of Tabulator.

```bash
npm install
```

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

### Configure Row Header

Source: https://www.tabulator.info/docs/6.x/range

Example setup for a row header using the rownum formatter.

```javascript
var table = new Tabulator("#example-table", {
    rowHeader:{resizable: false, frozen: true, width:40, hozAlign:"center", formatter: "rownum", field:"rownum", accessorClipboard:"rownum"},
    columns:[
        ... other columns ...
    ],
});
```

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

### Install react-tabulator with npm

Source: https://www.tabulator.info/docs/6.x/frameworks

Install the react-tabulator component package via npm.

```bash
npm install react-tabulator
```

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

### Enable Column Resize Guides

Source: https://www.tabulator.info/docs/6.x/layout

Enables column resize guides; these only appear on columns where the resizable option is set to true.

```javascript
var table = new Tabulator("#example-table", {
    resizableColumnGuide: true,
});
```

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

### Enable Row Resize Guides

Source: https://www.tabulator.info/docs/6.x/layout

Enables row resize guides; requires the resizableRows option to be enabled.

```javascript
var table = new Tabulator("#example-table", {
    resizableRows: true,
    resizableRowGuide: true,
});
```

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

### HTML for Reactivity Example

Source: https://www.tabulator.info/docs/6.x/reactivity

HTML structure for the reactivity example, containing buttons to add, remove, and update rows, and a div for the table.

```HTML
<div>
    <button id="reactivity-add">Add New Row</button>
    <button id="reactivity-delete">Remove Row</button>
    <button id="reactivity-update">Update First Row Name</button>
</div>

<div id="example-table"></div>
```

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

### Install Tabulator via Bower

Source: https://www.tabulator.info/docs/6.x/install

Use this command in your project directory to install Tabulator using the Bower package manager.

```bash
__ Copybower install tabulator --save
```

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

### Install Tabulator via Yarn

Source: https://www.tabulator.info/docs/6.x/install

Use this command in your project directory to install Tabulator using the Yarn package manager.

```bash
__ Copyyarn add tabulator-tables
```

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

### Install Tabulator via NPM

Source: https://www.tabulator.info/docs/6.x/install

Use this command in your project directory to install Tabulator using the NPM package manager.

```bash
__ Copynpm install tabulator-tables --save
```

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

### JSON Data Set Example

Source: https://www.tabulator.info/docs/6.x/data

An example of an array of objects used to populate a Tabulator table.

```json
[
    {id:1, name:"Billy Bob", age:"12", gender:"male", height:1, col:"red", dob:"", cheese:1},
    {id:2, name:"Mary May", age:"1", gender:"female", height:2, col:"blue", dob:"14/05/1982", cheese:true},
    {id:3, name:"Christine Lobowski", age:"42", height:0, col:"green", dob:"22/05/1982", cheese:"true"},
    {id:4, name:"Brendon Philips", age:"125", gender:"male", height:1, col:"orange", dob:"01/08/1980"},
    {id:5, name:"Margret Marmajuke", age:"16", gender:"female", height:5, col:"yellow", dob:"31/01/1999"},
    {id:6, name:"Billy Bob", age:"12", gender:"male", height:1, col:"red", dob:"", cheese:1},
    {id:7, name:"Mary May", age:"1", gender:"female", height:2, col:"blue", dob:"14/05/1982", cheese:true},
    {id:8, name:"Christine Lobowski", age:"42", height:0, col:"green", dob:"22/05/1982", cheese:"true"},
    {id:9, name:"Brendon Philips", age:"125", gender:"male", height:1, col:"orange", dob:"01/08/1980"},
    {id:10, name:"Margret Marmajuke", age:"16", gender:"female", height:5, col:"yellow", dob:"31/01/1999"},
]
```

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

### CORS configuration example

Source: https://www.tabulator.info/docs/6.x/data

Example of a fetch configuration object for making cross-origin requests, showing the default values Tabulator uses for CORS.

```APIDOC
## CORS configuration example

### Description
Shows the default fetch configuration values Tabulator uses when generating a CORS request. These can be adjusted to troubleshoot cross-origin requests.

### Usage
Set these properties in the `ajaxConfig` option or the third argument of `setData`.

### Parameters
- `mode` (string) - Optional - Set to "cors" for cross-origin requests.
- `credentials` (string) - Optional - Set to "same-origin" to send cookies with requests from the matching origin.
- `headers` (object) - Optional - HTTP headers to include.
  - `Accept` (string) - Optional - Expected response format, e.g., "application/json".
  - `X-Requested-With` (string) - Optional - Helps some frameworks respond correctly.
  - `Content-type` (string) - Optional - Character encoding of the request.
  - `Access-Control-Allow-Origin` (string) - Optional - The URL origin of the site making the request.

### Example
```javascript
var ajaxConfig = {
    mode:"cors", //set request mode to cors
    credentials: "same-origin", //send cookies with the request from the matching origin
    headers: {
        "Accept": "application/json", //tell the server we need JSON back
        "X-Requested-With": "XMLHttpRequest", //fix to help some frameworks respond correctly to request
        "Content-type": 'application/json; charset=utf-8', //set the character encoding of the request
        "Access-Control-Allow-Origin": "http://yout-site.com", //the URL origin of the site making the request
    },
};
```
```

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

### Extend Persistence Module with Custom Reader

Source: https://www.tabulator.info/docs/6.x/modules

Registers a custom persistence reader named 'example' that reads data from localStorage and parses it. Returns false if no data exists. Use it by setting 'persistenceReaderFunc' to 'example'.

```javascript
Tabulator.extendModule("persistence", "readers", {
    example:function(id, type){
        //id - tables persistence id
        //type - type of data being persisted ("sort", "filter", "group", "page" or "columns")

        var data = localStorage.getItem(id + "-" + type);

        return data ? JSON.parse(data) : false;
    },
});
```

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

### Tabulator Constructor with resizableRowGuide

Source: https://www.tabulator.info/docs/6.x/release

Enables row resize guides.

```APIDOC
## Tabulator Constructor with resizableRowGuide

### Description
Creates a Tabulator table with row resize guides enabled.

### Method
`new Tabulator(element, options)`

### Parameters
- **element** (string) - Required - The CSS selector for the table element.
- **options** (object) - Required - Configuration options.
  - **resizableRows** (boolean) - Optional - Enables row resizing.
  - **resizableRowGuide** (boolean) - Optional - Enables row resize guides.

### Example
```javascript
var table = new Tabulator("#example-table", {
    resizableRows: true,
    resizableRowGuide: true,
});
```
```

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

### Use persistenceMode Shorthand for Custom Reader and Writer

Source: https://www.tabulator.info/docs/6.x/modules

When both reader and writer functions are named 'example', sets 'persistenceMode' to 'example' to load both into the table.

```javascript
var table = new Tabulator("#example-table", {
    persistenceMode: "example",
});
```

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

### Extend Persistence Module with Custom Writer

Source: https://www.tabulator.info/docs/6.x/modules

Registers a custom persistence writer named 'example' that stores data in localStorage. The writer receives the table's persistence id, the data type, and the data. Use it by setting 'persistenceWriterFunc' to 'example'.

```javascript
Tabulator.extendModule("persistence", "writers", {
    example:function(id, type, data){
        //id - tables persistence id
        //type - type of data being persisted ("sort", "filter", "group", "page" or "columns")
        //data - array or object of data

        localStorage.setItem(id + "-" + type, JSON.stringify(data));
    },
});
```

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

### Tabulator Constructor with resizableColumnGuide

Source: https://www.tabulator.info/docs/6.x/release

Enables column resize guides.

```APIDOC
## Tabulator Constructor with resizableColumnGuide

### Description
Creates a Tabulator table with column resize guides enabled.

### Method
`new Tabulator(element, options)`

### Parameters
- **element** (string) - Required - The CSS selector for the table element.
- **options** (object) - Required - Configuration options.
  - **resizableColumnGuide** (boolean) - Optional - Enables column resize guides.

### Example
```javascript
var table = new Tabulator("#example-table", {
    resizableColumnGuide: true,
});
```
```

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

### Register Luxon via Setup Option

Source: https://www.tabulator.info/docs/6.x/dependencies

Import the DateTime object from luxon and register it within the Tabulator dependencies object.

```javascript
import { DateTime } from "luxon";
```

```javascript
var table = new Tabulator("#example-table", {
    dependencies:{
        DateTime:DateTime,
    },  
});
```

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

### PDF Download - Setup Options

Source: https://www.tabulator.info/docs/6.x/download

Demonstrates how to configure the PDF downloader with options like orientation, title, jsPDF settings, autoTable styling, and a documentProcessing callback.

```APIDOC
## PDF Download - Setup Options

### Description
Configure the PDF downloader output using options such as orientation, title, row group styles, jsPDF constructor options, autoTable styling, and a documentProcessing callback.

### Options
- **orientation** - the orientation of the page, either portrait or landscape (default value of landscape)
- **title** - optional page title
- **rowGroupStyles** - style object for row group headers if used (if you want to override the default styling), it can take any of the standard Autotable style options
- **rowCalcStyles** - style object for column calculation rows if used (if you want to override the default styling), it can take any of the standard Autotable style options
- **jsPDF** - an optional object that will be passed into the jsPDF constructor and can take any of the standard jsPDF options
- **autoTable** - an optional object that can be used to configure advanced styling on the table if needed, this can take any of the standard AutoTable options
- **documentProcessing** - an optional callback that is passed the jsPDF document object after the auto-table creation to allow full customisation of the PDF

### Example
```
table.download("pdf", "data.pdf", {
    orientation:"portrait", //set page orientation to portrait
    title:"Dynamics Quotation Report", //add title to report
    jsPDF:{
        unit:"in", //set units to inches
    },
    autoTable:{ //advanced table styling
        styles: {
            fillColor: [100, 255, 255]
        },
        columnStyles: {
            id: {fillColor: 255}
        },
        margin: {top: 60},
    },
    documentProcessing:function(doc){
        //carry out an action on the doc object
    }
});
```
```

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

### Get Bounds

Source: https://www.tabulator.info/docs/6.x/components

Retrieve the bounds of a range as an object containing start and end Cell Components.

```javascript
__ Copyvar bounds = range.getBounds();
```

```javascript
__ Copy{
    start:Component, //the cell component at the top left of the range
    end:Component, //the cell component at the bottom right of the range
}
```

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

### Register dependency via setup option

Source: https://www.tabulator.info/docs/6.x/dependencies

Import the library into your project and register it using the dependencies object in the Tabulator constructor.

```javascript
import {MyDependency} from dependency
```

```javascript
var table = new Tabulator("#example-table", {
    dependencies:{
        "ThatDependency":MyDependency,
    },  
});
```

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

### Get Row Position

Source: https://www.tabulator.info/docs/6.x/components

Retrieves the numerical position of a row in the table, starting at 1. Returns false if the row is filtered out or hidden.

```javascript
var rowPosition = row.getPosition(); //return the position of the row in the filtered/sorted data
```

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

### Starts With Validator

Source: https://www.tabulator.info/docs/6.x/validate

The starts validator allows string values that start with the parameter (case insensitive).

```javascript
__ Copy {title:"Example", field:"example", validator:"starts:bob"} \\value must start with 'bob'
```

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

### Row Move Started Event

Source: https://www.tabulator.info/docs/6.x/events

Triggered when a row has started to be dragged.

```javascript
__ Copytable.on("rowMoving", function(row){
    //row - row component
});
```

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

### Full Spreadsheet Implementation

Source: https://www.tabulator.info/docs/6.x/spreadsheet

A complete example showing the HTML container and the JavaScript configuration for a spreadsheet with custom data and row headers.

```html
<div id="example-table"></div>
```

```javascript
//define an array of spreasheet data
var sheetData = [
  [9937,	"",	"",	7749,	9816,	4355,	8279,	"",	""],
  [2380,	"",	6977,	8896,	4012,	3803,	5408,	3415,	3056],
  [9180,	"",	39,	9445,	3917,	"",	18,	5239,	2516],
  [1924,	8734,	1819,	1838,	2330,	7921,	9219,	"",	3537],
  ["",	8665,	5875,	9732,	1926,	"",	9743,	8388,   ""],
  [7040,	4861,	2988,	5584,	2344,	9749,	8872,	9177,	6246],
  [6334,	1674,	2967,	"",	9353,	396,	6006,	8572 , ""],
  [6359,	"",	2580,	5723,	9801,	554,	1044,	5266,	8532],
  [7278,	6971,	2232,	5720,	5665,	7231,	1165,	"",	168],
];
  
//Build Tabulator
var table = new Tabulator("#example-table", {
  height:"311px",

  spreadsheet:true,
  spreadsheetRows:10,
  spreadsheetColumns:10,
  spreadsheetColumnDefinition:{editor:"input"},
  spreadsheetData:sheetData,

  rowHeader:{field:"_id", hozAlign:"center", headerSort:false, frozen:true},

  editorEmptyValue:undefined, //ensure empty values are set to undefined so they arent included in spreadsheet output data
});
```

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

### setFilter - Starts With

Source: https://www.tabulator.info/docs/6.x/filter

Displays any rows with data that starts with the specified string (case insensitive).

```APIDOC
## setFilter - Starts With

### Description
Displays any rows with data that starts with the specified string (case insensitive).

### Method
setFilter

### Parameters
- **field** (string) - Required - The field to filter on.
- **type** (string) - Required - The filter type, set to "starts".
- **value** (string) - Required - The prefix string.

### Example
```javascript
table.setFilter("name", "starts", "ste");
```
```

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

### Starts With Filter

Source: https://www.tabulator.info/docs/6.x/filter

Displays rows where the field data starts with the specified string (case-insensitive).

```javascript
__ Copytable.setFilter("name", "starts", "ste");
```

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

### Configure Date Editor

Source: https://www.tabulator.info/docs/6.x/edit

Example configuration for a date editor column, including min/max constraints and custom formatting. Requires luxon.js if the format parameter is used.

```javascript
{title:"Example", field:"example", editor:"date", editorParams:{
    min:"01/01/2020", // the minimum allowed value for the date picker
    max:"02/12/2022", // the maximum allowed value for the date picker
    format:"dd/MM/yyyy", // the format of the date value stored in the cell
    verticalNavigation:"table", //navigate cursor around table without changing the value
    elementAttributes:{
        title:"slide bar to choose option" // custom tooltip
    }
}}
```

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

### Array Sorter Example Data

Source: https://www.tabulator.info/docs/6.x/release

Example of a cell value containing an array of strings.

```javascript
["Steve", "Bob", "Jim"]
```

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

### Import Luxon via Script Tag

Source: https://www.tabulator.info/docs/6.x/dependencies

Include this script tag before instantiating the Tabulator instance to make Luxon available globally.

```html
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/luxon@2.3.1/build/global/luxon.min.js"></script>
```

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

### Configure Module Options

Source: https://www.tabulator.info/docs/6.x/module-examples

Example of how a user configures the module options in the Tabulator constructor.

```javascript
var table = new Tabulator("#example-table", {
    database:new Database(),
    databaseTable:"example",
});
```

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

### Array Data Structure Example

Source: https://www.tabulator.info/docs/6.x/format

Example data structure containing an array of objects with nested properties.

```javascript
[
    {
       id:12345,
        details:{
            name:"bob",
            age:32,
            height:45,
        }
    },
    {
        id:25142,
        details:{
            name:"jim",
            age:52,
            height:145,
        }
    }
]
```

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

### Initialize Tabulator with Clipboard Enabled

Source: https://www.tabulator.info/docs/6.x/clipboard

This example demonstrates how to initialize a Tabulator instance with the clipboard module enabled and specific paste actions configured.

```javascript
var table = new Tabulator("#example-table", {
     height:"311px",
     data:tabledata,
     clipboard:true,
     clipboardPasteAction:"replace",
     columns:[
         {title:"Name", field:"name", width:200},
         {title:"Progress", field:"progress", width:100, sorter:"number"},
         {title:"Gender", field:"gender"},
         {title:"Rating", field:"rating", width:80},
         {title:"Favourite Color", field:"col"},
         {title:"Date Of Birth", field:"dob", hozAlign:"center", sorter:"date"},
         {title:"Driver", field:"car", hozAlign:"center", formatter:"tickCross"},
     ],
 });
```

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

### Run one-off build

Source: https://www.tabulator.info/docs/6.x/build

Executes a build of all files in the /src folder into the /dist folder.

```bash
npm run build
```

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

### Update Range Start

Source: https://www.tabulator.info/docs/6.x/components

Change the top left start edge of an existing range using the setStartBound function.

```javascript
__ Copy    var topLeft = table.getRows()[2].getCells()[1];

    range.setStartBound(topLeft);
```

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

### Configure Time Editor

Source: https://www.tabulator.info/docs/6.x/edit

Example configuration for a time editor column. Requires luxon.js if the format parameter is used.

```javascript
{title:"Example", field:"example", editor:"time", editorParams:{
    format:"hh:mm:ss", // the format of the time value stored in the cell
    verticalNavigation:"table", //navigate cursor around table without changing the value
    elementAttributes:{
        title:"slide bar to choose option" // custom tooltip
    }
}}
```

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

### Get selected range components with table.getRanges

Source: https://www.tabulator.info/docs/6.x/range

Call table.getRanges to get an array of Range Components for all current ranges.

```javascript
var ranges = table.getRanges(); //get array of currently selected range components.
```

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

### Register jsPDF via Setup Option

Source: https://www.tabulator.info/docs/6.x/dependencies

Import jsPDF and the AutoTable plugin, apply the plugin to jsPDF, and register it with Tabulator using the jspdf key.

```javascript
import jsPDF from 'jspdf'
import { applyPlugin } from 'jspdf-autotable'
applyPlugin(jsPDF)
```

```javascript
var table = new Tabulator("#example-table", {
    dependencies:{
        jspdf:jsPDF,
    },  
});
```

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

### JavaScript: Initialize Tabulator with local pagination

Source: https://www.tabulator.info/docs/6.x/page

Creates a Tabulator table with local pagination, setting page size to 6, a size selector of [3, 6, 8, 10], movable columns, and a row counter. Columns include name, progress, gender, rating, favorite color, date of birth, and driver.

```JavaScript
//Build Tabulator
var table = new Tabulator("#example-table", {
    layout:"fitColumns",
    pagination:"local",
    paginationSize:6,
    paginationSizeSelector:[3, 6, 8, 10],
    movableColumns:true,
    paginationCounter:"rows",
    columns:[
        {title:"Name", field:"name", width:200},
        {title:"Progress", field:"progress", formatter:"progress", sorter:"number"},
        {title:"Gender", field:"gender"},
        {title:"Rating", field:"rating", formatter:"star", hozAlign:"center", width:100},
        {title:"Favourite Color", field:"col"},
        {title:"Date Of Birth", field:"dob", hozAlign:"center", sorter:"date"},
        {title:"Driver", field:"car", hozAlign:"center", formatter:"tickCross"},
    ],
});
```

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

### Initialize Tabulator with height option

Source: https://www.tabulator.info/docs/6.x/options

Example of setting the height option during the instantiation of a new Tabulator table.

```javascript
var table = new Tabulator("#example-table", {
    height:"300px", //set the table height option
});
```

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

### Install TypeScript typings with npm

Source: https://www.tabulator.info/docs/6.x/language

Use npm to install the community-maintained TypeScript typings for Tabulator. The package name is @types/node.

```bash
npm install @types/node
```

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

### Register SheetJS via Setup Option

Source: https://www.tabulator.info/docs/6.x/dependencies

Import the XLSX library from npm and register it within the Tabulator dependencies object using the XLSX key.

```javascript
import * as XLSX from 'xlsx';
```

```javascript
var table = new Tabulator("#example-table", {
    dependencies:{
        XLSX:XLSX,
    },  
});
```

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

### Start collapsed lists closed

Source: https://www.tabulator.info/docs/6.x/layout

Sets responsiveLayoutCollapseStartOpen to false so collapsed lists start closed and require user interaction to open.

```javascript
var table = new Tabulator("#example-table", {
    responsiveLayoutCollapseStartOpen:false,
});
```

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

### Import ResponsiveLayoutModule

Source: https://www.tabulator.info/docs/6.x/modules

Import the ResponsiveLayoutModule from 'tabulator-tables' to enable responsive column hiding on small screens.

```javascript
import {ResponsiveLayoutModule} from 'tabulator-tables';
```

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

### Define groupStartOpen callback function

Source: https://www.tabulator.info/docs/6.x/group

Uses a function to determine if a group should start open based on row count. Groups with more than three rows will start open.

```javascript
__ CopygroupStartOpen:function(value, count, data, group){
    //value - the value all members of this group share
    //count - the number of rows in this group
    //data - an array of all the row data objects in this group
    //group - the group component for the group

    return count > 3; //all groups with more than three rows start open, any with three or less start closed
},
```

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

### Implement constructor and initialize

Source: https://www.tabulator.info/docs/6.x/render

Use the constructor to pass the table to the super function and the initialize function to set up variables once the table is ready.

```javascript
class CustomRenderer extends Renderer{
    constructor(table){
        super(table);
    }

    initialize(){
        this.buffer = this.options("renderVerticalBuffer"); //set internal variable from table setup options when the table is ready
    }
}
```

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

### Event Naming Convention Example

Source: https://www.tabulator.info/docs/6.x/module-build

Internal table event names follow kebab-case, with the first word being the originating module name. Example: menu-opened for a menu module event.

```plaintext
menu-opened
```

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

### printFormatter table setup option

Source: https://www.tabulator.info/docs/6.x/print

Allows manipulation of the print output before it is displayed to the user for printing.

```APIDOC
## printFormatter table setup option

### Description
Allows manipulation of the print output before it is displayed to the user for printing. The callback receives the holder element and the table element.

### Parameters
- **callback** (function) - Required - A function that receives (tableHolderElement, tableElement).

### Example
```
var table = new Tabulator("#example-table", {
    printFormatter:function(tableHolderElement, tableElement){
        //tableHolderElement - The element that holds the header, footer and table elements
        //tableElement - The table
    }
});
```
```

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

### Include Simple Theme CSS

Source: https://www.tabulator.info/docs/6.x/theme

Example of how to include the simple theme stylesheet in your HTML.

```html
<link href="/dist/css/tabulator_simple.min.css" rel="stylesheet">
```

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

### Event Naming Convention Example

Source: https://www.tabulator.info/docs/6.x/module-build

Shows the naming convention for external events: camelCase with the module name as the first word. For example, the menu module's event for a menu being opened is named 'menuOpened'.

```javascript
menuOpened
```

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

### Vue 3 Composition API Tabulator Setup

Source: https://www.tabulator.info/docs/6.x/frameworks

Instantiate Tabulator within a Vue 3 component using the Composition API. This setup utilizes ref for the DOM element and reactive for the table data.

```javascript
<script setup>
  import {ref, reactive, onMounted} from 'vue';
  import {TabulatorFull as Tabulator} from 'tabulator-tables'; //import Tabulator library

  const table = ref(null); //reference to your table element
  const tabulator = ref(null); //variable to hold your table
  const tableData = reactive([]); //data for table to display

  onMounted(() => {
    //instantiate Tabulator when element is mounted
      tabulator.value = new Tabulator(table.value, {
        data: tableData.value, //link data to table
        reactiveData:true, //enable data reactivity
        columns: [], //define table columns
      });
  })

  return{tabulator, table};
</script>

<template>
  <div ref="table"></div>
</template>
```

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

### Get selected data with table.getRangesData

Source: https://www.tabulator.info/docs/6.x/range

Call table.getRangesData to get an array of range data arrays, one per range. Each range data array contains row data objects with only the properties for cells in that range.

```javascript
var rangeData = table.getRangesData(); //get array of currently selected data.
```

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

### Implement and Register a Custom DBModule

Source: https://www.tabulator.info/docs/6.x/module-examples

This example demonstrates how to extend the Tabulator Module class to create a custom database module, register it with the Tabulator core, and handle data loading events.

```javascript
import {Tabulator, Module} from 'tabulator-tables';

class DBModule extends Module{

    static moduleName = "db";

    constructor(table){
        super(table);

        this.db = null; //hold the database
        this.dbTable = null; //hold the database table name

        //register table options
        this.registerTableOption("database", false);
        this.registerTableOption("databaseTable", "");
    }

    //called by the table when it is ready for module interactions
    initialize(){
        //check to see if module has been enabled before subscribing to events
        if(this.options("database") && this.options("databaseTable")){

            //copy table options to local variables for ease of access
            this.db = this.options("database");
            this.dbTable = this.options("databaseTable");

            //subscribe to events
            this.subscribe("data-loading", this.requestDataCheck.bind(this));
            this.subscribe("data-load", this.requestData.bind(this));
        }
    }

    //request a remote data load if all the table options were setup correctly
    requestDataCheck(data, params, config, silent){
        return !!(this.db && this.dbTable);
    }

    //build database query, and return results
    requestData(data, params){
        var query = this.db.table(this.dbTable);

        //check if any filters have been set on the query params
        if(params.filter){
            params.filter.forEach((filter) => {
                query = query.filter(filter.field, filter.type, filter.value);
            })
        }

        //check if any sorters have been set on the query params
        if(params.sort){
            params.sort.forEach((sorter) => {
                query = query.sort(sorter.field, sorter.dir);
            })
        }

        //run query and return promise
        return query.run();
    }
}

Tabulator.registerModule(DBModule);
```

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

### rowMoving

Source: https://www.tabulator.info/docs/6.x/events

Triggered when a row has started to be dragged.

```APIDOC
## rowMoving

### Description
Triggered when a row has started to be dragged.

### Event Name
rowMoving

### Callback Parameters
- **row** (Row Component) - The row component.

### Example
```javascript
table.on("rowMoving", function(row){
    //row - row component
});
```
```

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

### Initialize Table with Column Calculations

Source: https://www.tabulator.info/docs/6.x/column-calcs

Sets up a Tabulator table with column calculations defined in the columns array using bottomCalc and topCalc properties.

```html
<div id="example-table"></div>
```

```javascript
var table = new Tabulator("#example-table", {
    height:"311px",
    movableColumns:true,
    columns:[
        {title:"Name", field:"name", width:200},
        {title:"Progress", field:"progress", width:100, sorter:"number", bottomCalc:"avg", bottomCalcParams:{precision:3}},
        {title:"Gender", field:"gender"},
        {title:"Rating", field:"rating", width:80, bottomCalc:"avg"},
        {title:"Favourite Color", field:"col"},
        {title:"Date Of Birth", field:"dob", hozAlign:"center", sorter:"date"},
        {title:"Driver", field:"car", hozAlign:"center", formatter:"tickCross", topCalc:"count"},
    ],
});
```

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

### Get Columns

Source: https://www.tabulator.info/docs/6.x/components

Retrieve all Column Components in a range.

```javascript
__ Copyvar columns = range.getColumns();
```

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

### Download with Options Object

Source: https://www.tabulator.info/docs/6.x/download

Trigger an XLSX download using an empty options object for configuration.

```javascript
table.download("xlsx", "data.xlsx", {}); //download table data as a XLSX formatted file with a file name of data.xlsx
```

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

### Get Rows

Source: https://www.tabulator.info/docs/6.x/components

Retrieve all Row Components in a range.

```javascript
__ Copyvar rows = range.getRows();
```

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

### Get All Cells

Source: https://www.tabulator.info/docs/6.x/components

Retrieve all Cell Components in a range.

```javascript
__ Copyvar cells = range.getCells();
```

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

### Define Popup with Function

Source: https://www.tabulator.info/docs/6.x/menu

Example of using a function to dynamically return popup content.

```javascript
{title:"Name", field:"name", clickPopup:function(e, component, onRendered){
    //e - the mouse/touch event that triggered the popup
    //component - column/row/cell component that triggered this popup
    //onRendered - function to call when the formatter has been rendered

    return "Hey Im a Popup!";
}}
```

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

### Get Width

Source: https://www.tabulator.info/docs/6.x/components

Returns the width of the column in pixels.

```javascript
__ Copyvar width = column.getWidth();
```

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

### Get Field

Source: https://www.tabulator.info/docs/6.x/components

Returns the field name for the column.

```javascript
__ Copyvar columnField = column.getField();
```

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

### Import Full Tabulator Package

Source: https://www.tabulator.info/docs/6.x/install

Import TabulatorFull to include all built-in modules pre-registered.

```javascript
import {TabulatorFull as Tabulator} from 'tabulator-tables';
```

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

### Get Element

Source: https://www.tabulator.info/docs/6.x/components

Returns the DOM node for the column.

```javascript
__ Copyvar columnElement = column.getElement();
```

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

### Run development watcher

Source: https://www.tabulator.info/docs/6.x/build

Starts a watcher that automatically rebuilds ESM and CSS files in the /dist folder upon saving changes in /src.

```bash
npm run dev
```

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

### Include Bootstrap 3 Theme CSS

Source: https://www.tabulator.info/docs/6.x/theme

Example of how to include the Bootstrap 3 compatible theme stylesheet.

```html
<link href="/dist/css/tabulator_bootstrap.min.css" rel="stylesheet">
```

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

### printHeader table setup option

Source: https://www.tabulator.info/docs/6.x/print

Defines a header to be displayed when the table is printed. Accepts a string, DOM Node, or function returning either.

```APIDOC
## printHeader table setup option

### Description
Defines a header to be displayed when the table is printed. The header contents are placed inside a div with class tabulator-print-header.

### Parameters
- **value** (string | DOM Node | function) - Required - An HTML string, DOM Node, or function that returns a string or DOM Node. The function is called when the table is printed.

### Example
```
var table = new Tabulator("#example-table", {
    printHeader:"<h1>THIS IS MY COOL TABLE</h1>",
});
```
```

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

### printFooter table setup option

Source: https://www.tabulator.info/docs/6.x/print

Defines a footer to be displayed when the table is printed. Accepts a string, DOM Node, or function returning either.

```APIDOC
## printFooter table setup option

### Description
Defines a footer to be displayed when the table is printed. The footer contents are placed inside a div with class tabulator-print-footer.

### Parameters
- **value** (string | DOM Node | function) - Required - An HTML string, DOM Node, or function that returns a string or DOM Node. The function is called when the table is printed.

### Example
```
var table = new Tabulator("#example-table", {
    printFooter:"<h3>THANKS FOR LOOKING AT MY TABLE</h3>",
});
```
```

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

### Get Element

Source: https://www.tabulator.info/docs/6.x/components

Retrieve the bounding rectangle element for a range.

```javascript
__ Copyvar element = range.getElement();
```

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

### JavaScript Table Initialization and Download Triggers

Source: https://www.tabulator.info/docs/6.x/download

Initialize the Tabulator table and attach click event listeners to trigger downloads for various file formats.

```javascript
//Build Tabulator
var table = new Tabulator("#example-table", {
    height:"311px",
    columns:[
        {title:"Name", field:"name", width:200},
        {title:"Progress", field:"progress", width:100, sorter:"number"},
        {title:"Gender", field:"gender"},
        {title:"Rating", field:"rating", width:80},
        {title:"Favourite Color", field:"col"},
        {title:"Date Of Birth", field:"dob", hozAlign:"center", sorter:"date"},
        {title:"Driver", field:"car", hozAlign:"center", formatter:"tickCross"},
    ],
});

//trigger download of data.csv file
document.getElementById("download-csv").addEventListener("click", function(){
    table.download("csv", "data.csv");
});

//trigger download of data.json file
document.getElementById("download-json").addEventListener("click", function(){
    table.download("json", "data.json");
});

//trigger download of data.xlsx file
document.getElementById("download-xlsx").addEventListener("click", function(){
    table.download("xlsx", "data.xlsx", {sheetName:"My Data"});
});

//trigger download of data.pdf file
document.getElementById("download-pdf").addEventListener("click", function(){
    table.download("pdf", "data.pdf", {
        orientation:"portrait", //set page orientation to portrait
        title:"Example Report", //add title to report
    });
});

//trigger download of data.html file
document.getElementById("download-html").addEventListener("click", function(){
    table.download("html", "data.html", {style:true});
});
```

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

### Get Cell Value

Source: https://www.tabulator.info/docs/6.x/components

Returns the current value for the cell.

```javascript
__ Copyvar cellValue = cell.getValue();
```

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

### Get Visibility

Source: https://www.tabulator.info/docs/6.x/components

Returns a boolean indicating if the column is visible.

```javascript
__ Copyvar visible = column.isVisible();
```

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

### Define Popup with HTML String

Source: https://www.tabulator.info/docs/6.x/menu

Example of passing a simple string to the popup option.

```javascript
{title:"Name", field:"name", clickPopup:"Hey, Im a Popup!"}
```

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

### Use Custom Persistence Reader in Table

Source: https://www.tabulator.info/docs/6.x/modules

Creates a Tabulator table that uses the custom persistence reader 'example' via the 'persistenceReaderFunc' property.

```javascript
var table = new Tabulator("#example-table", {
    persistenceReaderFunc: "example",
});
```

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

### Get Cells

Source: https://www.tabulator.info/docs/6.x/components

Returns an array of CellComponent objects for the column.

```javascript
__ Copyvar cells = column.getCells();
```

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

### Get Definition

Source: https://www.tabulator.info/docs/6.x/components

Returns the column definition object for the column.

```javascript
__ Copyvar columnDefinition = column.getDefinition();
```

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

### Configure Row Context Menu and Header Menu

Source: https://www.tabulator.info/docs/6.x/menu

Defines a row context menu with nested items and a dynamic header menu for toggling column visibility, then initializes the Tabulator table.

```javascript
//define row context menu contents
var rowMenu = [
    {
        label:"<i class='fas fa-user'></i> Change Name",
        action:function(e, row){
            row.update({name:"Steve Bobberson"});
        }
    },
    {
        label:"<i class='fas fa-check-square'></i> Select Row",
        action:function(e, row){
            row.select();
        }
    },
    {
        separator:true,
    },
    {
        label:"Admin Functions",
        menu:[
            {
                label:"<i class='fas fa-trash'></i> Delete Row",
                action:function(e, row){
                    row.delete();
                }
            },
            {
                label:"<i class='fas fa-ban'></i> Disabled Option",
                disabled:true,
            },
        ]
    }
]

//define column header menu as column visibility toggle
var headerMenu = function(){
    var menu = [];
    var columns = this.getColumns();

    for(let column of columns){

        //create checkbox element using font awesome icons
        let icon = document.createElement("i");
        icon.classList.add("fas");
        icon.classList.add(column.isVisible() ? "fa-check-square" : "fa-square");

        //build label
        let label = document.createElement("span");
        let title = document.createElement("span");

        title.textContent = " " + column.getDefinition().title;

        label.appendChild(icon);
        label.appendChild(title);

        //create menu item
        menu.push({
            label:label,
            action:function(e){
                //prevent menu closing
                e.stopPropagation();

                //toggle current column visibility
                column.toggle();

                //change menu item icon
                if(column.isVisible()){
                    icon.classList.remove("fa-square");
                    icon.classList.add("fa-check-square");
                }else{
                    icon.classList.remove("fa-check-square");
                    icon.classList.add("fa-square");
                }
            }
        });
    }

   return menu;
};

//initialize table
var table = new Tabulator("#example-table", {
    height:"311px",
    layout:"fitColumns",
    rowContextMenu: rowMenu, //add context menu to rows
    columns:[
        {title:"Name", field:"name", headerMenu:headerMenu},
        {title:"Progress", field:"progress", hozAlign:"right", sorter:"number", headerMenu:headerMenu},
        {title:"Gender", field:"gender", headerMenu:headerMenu},
        {title:"Rating", field:"rating", hozAlign:"center", headerMenu:headerMenu},
        {title:"Favourite Color", field:"col", headerMenu:headerMenu},
    ],
});
```

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

### Sending Start Event

Source: https://www.tabulator.info/docs/6.x/events

Triggered on the sending table when a row is picked up.

```javascript
__ Copytable.on("movableRowsSendingStart", function(toTables){
    //toTables - array of receiving table elements
});
```

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

### JavaScript Initialization and Alert Handling

Source: https://www.tabulator.info/docs/6.x/menu

Initializes the Tabulator table and sets up event listeners for showing and hiding alerts.

```javascript
//Define variables for buttons
var showBtn = document.getElementById("alert-show");
var hideBtn = document.getElementById("alert-clear");

//handle button click events
showBtn.addEventListener("click", (e)=> {
  table.alert("Hey There! I'm An Alert!");
});

hideBtn.addEventListener("click", (e)=> {
  table.clearAlert();
});

//Build Tabulator
var table = new Tabulator("#example-table", {
    height:"311px",
    layout:"fitColumns",
    columns:[
        {title:"Name", field:"name", width:200},
        {title:"Progress", field:"progress", formatter:"progress", sorter:"number"},
        {title:"Gender", field:"gender"},
        {title:"Rating", field:"rating", formatter:"star", hozAlign:"center", width:100},
        {title:"Favourite Color", field:"col"},
        {title:"Date Of Birth", field:"dob", hozAlign:"center", sorter:"date"},
        {title:"Driver", field:"car", hozAlign:"center", formatter:"tickCross"},
    ],
});
```

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

### Listen to cellEditing event

Source: https://www.tabulator.info/docs/6.x/events

Triggered when a user starts editing a cell.

```javascript
__ Copytable.on("cellEditing", function(cell){
        //cell - cell component
});
```

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

### Initialize Tabulator with Range Selection

Source: https://www.tabulator.info/docs/6.x/range

Configures the Tabulator instance with range selection enabled and demonstrates how to programmatically add a range using the addRange function.

```javascript
//Build Tabulator
var table = new Tabulator("#example-table", {
    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:[
      {title:"Name", field:"name", width:200},
      {title:"Progress", field:"progress", width:100, hozAlign:"right", sorter:"number"},
      {title:"Gender", field:"gender", width:100},
      {title:"Rating", field:"rating", hozAlign:"center", width:80},
      {title:"Favourite Color", field:"col"},
      {title:"Date Of Birth", field:"dob", hozAlign:"center", sorter:"date"},
      {title:"Driver", field:"car", hozAlign:"center", width:100},
    ],
});

//select row on "select" button click
document.getElementById("select-range").addEventListener("click", function(){
    var topLeft = table.getRows()[3].getCells()[2];
    var bottomRight = table.getRows()[5].getCells()[5];

    table.addRange(topLeft, bottomRight);
});
```

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

### Row Resizing Event

Source: https://www.tabulator.info/docs/6.x/events

Triggered when a row has started to be resized by the user.

```javascript
__ Copytable.on("rowResizing", function(row){
    //row - row component of the resizing row
});
```

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

### Include Bootstrap 4 Theme CSS

Source: https://www.tabulator.info/docs/6.x/theme

Example of how to include the Bootstrap 4 compatible theme stylesheet.

```html
<link href="/dist/css/tabulator_bootstrap4.min.css" rel="stylesheet">
```
Tokens:
Raw