https://github.com/ngduc/react-tabulator
React Tabulator is based on tabulator - a JS table library with many advanced features.
https://github.com/ngduc/react-tabulator
component grid react table tableview tabulator
Last synced: about 2 months ago
JSON representation
React Tabulator is based on tabulator - a JS table library with many advanced features.
- Host: GitHub
- URL: https://github.com/ngduc/react-tabulator
- Owner: ngduc
- License: mit
- Created: 2018-10-09T22:49:19.000Z (over 6 years ago)
- Default Branch: master
- Last Pushed: 2024-08-11T04:36:16.000Z (10 months ago)
- Last Synced: 2025-04-01T08:31:38.508Z (2 months ago)
- Topics: component, grid, react, table, tableview, tabulator
- Language: CSS
- Homepage: https://codesandbox.io/s/0mwpy612xw?module=/src/components/Home.js
- Size: 7.48 MB
- Stars: 371
- Watchers: 10
- Forks: 84
- Open Issues: 92
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
# react-tabulator
React Tabulator is based on Tabulator - a JS table library with many advanced features. [Link.](https://github.com/olifolkerd/tabulator)
- **NOTE: from v0.16.x (WIP) or later, this uses the latest tabulator-tables v5.x, many cases are not tested yet.**
- Live Demo: [Codesandbox](https://codesandbox.io/s/0mwpy612xw?module=/src/components/Home.js)
- Example code: [/src/ReactTabulatorExample.tsx](/src/ReactTabulatorExample.tsx)
- More Examples, Use cases, FAQ: [More Live Examples / Use cases](/docs/examples.md)
[
](https://codesandbox.io/s/0mwpy612xw?module=/src/components/Home.js)
### 🌟 Features
Tabulator's features:
```
Filters Sorting Formatting Grouping Ajax Editing Virtualization
Pagination Themes A11y I18n Layouts Frozen Cols/Rows
Key Binding Responsive Persisting History Calc Validation
Clipboard Tree Layout Nested Tables
```
#### Plus more features:
- React.
- Simple syntax; Import css, themes.
- Typescript, Tslint.
- Jest-puppeteer for testing.
- React Cell Editors: DateEditor, MultiSelectEditor, etc.
- React Cell Formatters: MultiValueFormatter, etc.
- React Filters (TBD).
- For the legacy React 15.x, use: import React15Tabulator.
### 📦 Usage
```
$ npm install react-tabulator --save
import 'react-tabulator/lib/styles.css'; // required styles
import 'react-tabulator/lib/css/tabulator.min.css'; // theme
import { ReactTabulator } from 'react-tabulator';
* "options" will be passed directly to Tabulator's options.
* "events" is an object like { eventName: handlerFunction }
* use "ref.table" to access to all tabulator functions.
```
- More Examples, Use cases, FAQ: [More Live Examples / Use cases](/docs/examples.md)
### 🔧 Development - Commands
Require: `NodeJS`
```
$ npm install --legacy-peer-deps install dependencies for development.
$ export NODE_OPTIONS=--openssl-legacy-provider to work with Node 18+
$ export PUPPETEER_SKIP_CHROMIUM_DOWNLOAD=true to work with ARM if you haven't chromium installed
$ npm run dev Launch DEV mode (with hot reload).
$ npm run build Make a build.
$ npm run test Run tests using jest-puppeteer (with headless Chrome).
```
- Development Doc - see [docs/development.md](docs/development.md)
### 📖 Documentation
- [Change Log](/CHANGELOG.md)
- [Todo / Roadmap](/TODO.md)
### 🙌 Thanks
All contributions are welcome!
- Main library [olifolkerd/tabulator](https://github.com/olifolkerd/tabulator) (Thanks olifolkerd for this great library!)
While you're here, also check out
- [Node-rem](https://github.com/ngduc/node-rem) - Node REM - NodeJS Rest Express MongoDB and more: typescript, passport, JWT, socket.io, HTTPS, HTTP2, async/await, nodemailer, templates, pagination, docker, etc.
- [VSCode - TODO.md Kanban Board](https://marketplace.visualstudio.com/items?itemName=coddx.coddx-alpha) or [TODO.md spec](https://github.com/todomd/todo.md)