Skip to content

ngduc/react-tabulator

Folders and files

NameName
Last commit message
Last commit date

Latest commit

69319f8 Β· Aug 11, 2024
Sep 4, 2023
Apr 9, 2020
Aug 10, 2024
Jul 28, 2024
Aug 10, 2024
Jan 21, 2022
Aug 10, 2024
Aug 10, 2024
Oct 13, 2018
Apr 9, 2020
Oct 11, 2018
Aug 11, 2024
Oct 11, 2018
Aug 10, 2024
Jun 28, 2020
Nov 16, 2021
Oct 13, 2018
Feb 26, 2021
Aug 10, 2024
Aug 11, 2024
Aug 11, 2024
Nov 21, 2018
Nov 16, 2021

Repository files navigation

react-tabulator

React Tabulator is based on Tabulator - a JS table library with many advanced features. Link.

🌟 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';

    <ReactTabulator columns={columns} data={data} options={} events={{ rowClick: rowClickHandler }} />

* "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.

πŸ”§ 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).

πŸ“– Documentation

πŸ™Œ Thanks

All contributions are welcome!

While you're here, also check out