Initialize a Tabulator table
masterTo create an interactive table, include the library and CSS, create a container element, and then instantiate the
Tabulator class in JavaScript.Tabulator Documentation
repository·master·Indexed 27 days ago
https://github.com/tabulator-tables/tabulatorAn interactive table generation JavaScript library (version 6.5.2) that creates tables from HTML, JavaScript arrays, or JSON data. It supports React, Angular, and Vue, providing APIs for data manipulation, row and column management, event handling, and theme customization via SCSS.
What's inside Tabulator
Install Tabulator via NPM
masterTo install Tabulator using the NPM package manager, run the following command in your project directory:
npm install tabulator-tables --saveRun Tabulator tests
masterTabulator includes Unit and End-to-End (E2E) tests. You can run them using the following commands:
- Unit tests:
npm run test:unit - E2E tests: Build the project first with
npm run build, then runnpx playwright testornpm run test:e2e. - All tests:
npm run test
# Unit test npm run test:unit # E2E test npm run build # Make sure to build the project first npx playwright test # Run the tests # or npm run test:e2e # Run all tests npm run test- Unit tests:
Install Tabulator via CDN (UNPKG)
masterTo use Tabulator directly from the UNPKG CDN without local installation, include these links in your HTML project:
<link href="https://unpkg.com/tabulator-tables/dist/css/tabulator.min.css" rel="stylesheet"> <script type="text/javascript" src="https://unpkg.com/tabulator-tables/dist/js/tabulator.min.js"></script>Install Tabulator via Bower
masterTo install Tabulator using the Bower package manager, run the following command in your project directory:
bower install tabulator --saveCustomize Tabulator theme with SCSS variables
masterTabulator's main stylesheet is built with SCSS, allowing you to override default styles by redefining specific variables. You can customize the appearance of the table container, headers, rows, footers, and specialized features like range selection or data trees. To use these, import the SCSS file and define your custom values before the Tabulator import or use the!defaultflag mechanism in your own configuration.Handle table events
masterSubscribe to table events using the.on()method. This uses an external event bus to allow communication with the rest of your application.Manage table alerts
masterDisplay temporary alert messages within the table interface.Manage table data with Tabulator API
masterUse the following methods to manipulate the data within your table. Most data methods return Promises to allow for asynchronous handling of updates and additions.Destroy a Tabulator instance
masterTo prevent memory leaks and clean up the DOM, use thedestroy()method when the table is no longer needed. This removes the table from the DOM, clears row data, and deregisters the instance from inter-device communication.Manage rows and columns
masterTabulator provides granular control over individual rows and columns through its API.Configure table dimensions
masterYou can dynamically adjust the height, min-height, or max-height of the table container via the API.