React-React tabulator 0.17.1: React Tabulator is based on tabulator - a JS table library with many advanced features.

icon
Latest Release: 0.17.1

react-tabulator

Build Status

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

? 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 16.5.x
    • For React 15.x - import React15Tabulator
  • Typescript 3.x
  • Tslint
  • Jest-puppeteer for testing
  • React Cell Editors: DateEditor, MultiSelectEditor, etc.
  • React Cell Formatters: MultiValueFormatter, etc.
  • React Filters (TBD)

? Usage

$ npm install react-tabulator

import 'react-tabulator/lib/styles.css'; // required styles
import 'react-tabulator/lib/css/tabulator.min.css'; // theme
import { ReactTabulator } from 'react-tabulator'; // for React 15.x, use import { React15Tabulator }

    <ReactTabulator columns={columns} data={data} options={} />

"options" will be passed directly to Tabulator's options.

? Commands

Require: NodeJS v8.12.0 + and yarn (optional)

$ 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 - see docs/development.md

? Documentation

? Thanks

All contributions are welcome!

While you're here, also check out

Comments

  • How can I create custom search filter in React Tabulator ?
    How can I create custom search filter in React Tabulator ?

    Jul 28, 2021

    I did not find any reference of Custom filter in React tabulator. Please help if any.

    Reply
  • Excessive renders when changing table data
    Excessive renders when changing table data

    Aug 2, 2021

    Enhancement: I noticed some problems with unnecessary renders. If the data in the table has changed, then everything is completely re-rendered, therefore, if we scrolled to the bottom of the table, then changed the data there, then the scroll is reset to the beginning of the table. You can check this in the examples on the github (https://codesandbox.io/s/elastic-rgb-qgict?file=/src/App.js). At the same time, in the examples of the tabulator itself, everything works correctly and there is no complete redrawing when the data changes.

    Environment Details

    • react-tabulator version: 0.15.0
    • OS: macOS 11.4
    • Node.js version: 14.17.0
    Reply
  • Bug: Sort/Filter resets when selecting a row with initialSort
    Bug: Sort/Filter resets when selecting a row with initialSort

    Nov 8, 2021

    Environment Details

    • react-tabulator version: 15.0
    • OS: Windows, WSL (Ubuntu), CodeSandbox
    • Node.js version: 10.15.3

    Long Description

    Steps to reproduce:

    • Create a table with initialSort and a rowClick event
    • Change the sort order or filter by any column
    • Click on a row
    • The sort/filter is reset to the initial state but the row is selected
    • Happens in 15.0 but not in 14.4

    Working 14.4 version: https://codesandbox.io/s/react-tabulator-examples-forked-krfe8

    Broken 15.0 version: https://codesandbox.io/s/react-tabulator-examples-forked-xko42

    See also: https://github.com/ngduc/react-tabulator/issues/230

    Reply
  • Pagination Error - no such pagination mode: true
    Pagination Error - no such pagination mode: true

    Nov 9, 2021

    Hello there. I'm happy to use the react-tabulator as my grid/table for my project.

    Title prompted an error while using pagination in react - tabulator. The example code is on the ReactTabulatorExample.tsx

    Error: Pagination Error - no such pagination mode: true console.warn("Pagination Error - no such pagination mode:", _this81.mode);

    How to fix this error?

    Reply
  • Pagination is not working in react js
    Pagination is not working in react js

    Nov 9, 2021

    Hello there. I'm happy to use the react-tabulator as my grid/table for my project.

    Title Pagination is not working in my end. - I'm using React JS not Typescript

    Expected behavior: In your example of pagination ReactTabulatorExample.tsx there is a remote pagination which I copied into my examples of my react js but it is not working. Other functionalities are working fine except for remote pagination.

    Please help. thank you!

    Reply
  • rowclick with ajax initial sort bug
    rowclick with ajax initial sort bug

    Nov 19, 2021

    rowclick event with ajax initial sorting

    • bug: when setting up the options with ajax sorting + initial sort and row click will reload the table

    Environment Details

    • react-tabulator version: "react-tabulator": "^0.15.0"
    • OS: windows 10

    Long Description

    • I have a tabulator with options of ajax sorting and I set the initial sort into by column name and direction as desc. I have also a row click event to set the state of my class constructor. e.g this.setState({ selectedRow: row._row.data });

    sample code:

    class InventoryItem extends React.Component {
    

    constructor(props) { super(props); this.state = { data: [], selectedRow: '', }; this.rowClick = this.rowClick.bind(this); }

    rowClick(e, row) { e.preventDefault(); // if tabulatr options has ajax/server sorting and initialSort and i have the setState. it will reload the table this.setState({ selectedRow: row._row.data }); };

    render() {

    const options = {
      height: 500,
      tooltips: true,
      layout: 'fitDataTable',
      placeholder: 'No records',
      // filtering
      ajaxFiltering: true, // tabulator version 5
      filterMode: 'remote', // tabulator version 4
      //sorting
      sortMode: 'remote', // not working even tabulator version is 5
      ajaxSorting: true, // working sort tabulator version 4
    
      // if rowlick event has setState and when i remove this, it wont reload the table
      initialSort: [
        { column: 'id', dir: 'desc' }, //sort by this first
      ],
    
    
      //pagination
      pagination: 'remote',
      paginationDataSent: {
        page: 'page',
        size: 'per_page', // change 'size' param to 'per_page'
      },
      paginationDataReceived: {
        last_page: 'total_pages',
        size: 'totalCount',
      },
      current_page: 0,
      paginationSize: 50,
      history: true,
      movableColumns: true,
      resizableRows: true,
      selectable: true,
      rowContextMenu: this.tableRowContextMenu,
      clipboard: 'copy',
      clipboardCopyRowRange: 'selected',
      printAsHtml: true,
      printStyled: true,
      printHeader: '<h1>Start</h1>',
      printFooter: '<h2>End</h2>',
      ajaxURL: `${constants.HOST_URL}/item/`,
      ajaxConfig: 'GET',
      ajaxContentType: {
        headers: {
          'Content-Type': 'application/json',
          'Access-Control-Allow-Origin': '*',
        },
      },
      ajaxRequesting: function (url, params, response) {
        if (params.sorters.length > 0) {
          params.orderBy = params.sorters[0]['field'];
          params.dir = params.sorters[0]['dir'];
        }
        // delete sorters params
        delete params.sorters
        // return params to call in ajax
        return params;
      },
      ajaxResponse: function (url, params, response) {
        if (response.success) {
          return response;
        } else {
        }
        // error callback here - from backend
      },
      ajaxError: function (error) {
        // ajax error here
        console.error('ajaxError', error);
        TrualliantLib.popupAlert(false, error.message, 3500);
      },
    
      return(
        <>
    
      <div className="custom-theme">
        <ReactTabulator
          columns={columns}
          data={[]}
          options={options}
          ref={ref => (this.ref = ref)}
          rowClick={this.rowClick}
          data-custom-attr="inventoryItem-custom-attribute"
          className="custom-css-class"
        />
      </div>
        </>
      );
    

    };

    }

    Please help to fix. Thank you

    Reply
  • React Tabulator header select filter element issue
    React Tabulator header select filter element issue

    Nov 22, 2021

    React Tabulator header select filter element issue

    • bug: React Tabulator select in headerFilter

    Environment Details

    • react-tabulator version: "react-tabulator": "0.15.0",
    • OS: Windows 10
    • Node.js version: v14.18.1

    Long Description

    • I'm using Tabulator in React JS as my grid/table and I want to have a down caret symbol. When I use headerFilter with "select" value in my column and do the inspect element using google chrome browser, the element that rendered is input. It should be selection options.

    Found a LINK from stackoverflow: https://stackoverflow.com/questions/64671289/react-tabulator-select-in-headerfilter but there's no answer

    (Please help with a PR if you have a solution. Thanks!)

    Reply
  • React States with react-tabulator
    React States with react-tabulator

    Nov 29, 2021

    Title QUESTION: Why react class setState({}) always affect react-tabulator states? Like rowClick, cellClick events with setState, server side initial sort and many more. In my project I used a lot of tabulator objects to manipulate my logics and codes but when I use react states everything are gone (e.g putting classname to elements, adding properties or attributes to row, cell, data objects and clicking the row with table scroll makes me go back at the top).

    Can someone explain it to me. Maybe I loose some concepts with regards to react or tabulator?

    TIA!

    Environment Details

    • react-tabulator version: 0.15.0
    Reply
  • Error thrown when using groupBy with React-Tabs
    Error thrown when using groupBy with React-Tabs

    Dec 18, 2021

    It seems like if you unmount a component with a Tabulator instance and remount another one right away, it'll throw an error if you use a groupBy function. I'm not entirely sure it's exclusively a compatibility issue with React tabs but that is my use case and I wanted to provide full context; If I set React-Tabs to force render all tabs, the error does not occur.

    I modified the official code sandbox to add tabs to the first example, rendered the same element twice, and added groupBy: https://codesandbox.io/s/react-tabulator-examples-forked-idr3u?file=/src/components/Home.js

    image

    Clicking on Tab 2 throws: image

    Reply
  • Is it possible to add rowClick just with hooks?
    Is it possible to add rowClick just with hooks?

    Dec 30, 2021

    Is it possible to add rowClick just with hooks

      const rowClic = (ev, row) => {
        console.log(row, ev);
      };
    
          <ReactTabulator
            ref={(ref) => setReft(ref)}
            data={data}
            columns={columns}
            layout={"fitColumns"}
            options={options}
            rowClick={(e,row) => rowClic(e, row)}
          />
    
    

    Demo: Codesandbox

    Reply
  • DEPRECATION WARNING - downloadDataFormatter option has been deprecated
    DEPRECATION WARNING - downloadDataFormatter option has been deprecated

    Jul 3, 2020

    DEPRECATION WARNING - downloadDataFormatter option has been deprecated

    After upgrading from 0.12.7 to 0.13.1, on each table render (both initial render and window resize) we get several console warnings about the downloadDataFormatter being deprecated, which seems to significantly slow down the render. We've changed our explicit use of downloadDataFormatter as an options config to accessorDownload but still receive these messages and experience the slowness.

    Environment Details

    • react-tabulator version: 0.13.1
    • OS: OSX Catalina 10.15.5
    • Node.js version: v13.6.0
    • Chrome: Version 83.0.4103.116 (Official Build) (64-bit)

    Screen Shot 2020-07-03 at 11 57 20 AM

    @ngduc @olifolkerd

    Thanks again.

    Reply
  • bug: Table not rerender after options update
    bug: Table not rerender after options update

    Nov 23, 2020

    Environment Details

    • react-tabulator version: 0.14.2
    • OS: macOS 10.15.7
    • Node.js version: v12.16.1

    Long Description I need to update an empty table placeholder on localization or on error while getting data. You can't do this through ref, localization also does not provide for placeholder localization. The same applies to many other parameters, when updating which the table is simply not rendered (For example, when changing pagination from local to undefined)

    Reply
  • Exporting type declarations on build, allowing TypeScript projects to…
    Exporting type declarations on build, allowing TypeScript projects to…

    Jun 10, 2019

    … import the library

                                                                                                                                                                                                           
    Reply
  • Table not updating with updated data
    Table not updating with updated data

    Mar 28, 2019

    Hi there. I love the features offered by React Tabulator but unfortunately my table isn’t updating in response to data changes.

    My data is being fed as a prop from a Redux store. The table initializes perfectly with the initial data but unfortunately doesn’t change at all when I filter the data using a select element.

    I know the problem isn’t due to my filtering because I’ve added a separate table from React Table that updates correctly.

    Is this a bug or am I simply doing something wrong with how I’m using Tabulator?

    I’m using React 16.8, node 8.12, and React-Tabulator 0.9.1

    class HomePage extends React.Component {
      constructor(props) {
        super(props);
        this.state = {
          county: "all"
        };
      }
    
      onSelectChange = (e) => {
        const county = e.target.value
        this.setState({ county })
      }
    
      render() {
        const filteredData = filterCasesByCounty(
          this.props.cases,
          this.state.county
        );
        
        const columns = [
          { title: "Name", field: "name"},
          { title: "County", field: "county" },
          { title: "DOB", field: "dob" },
          { title: "Charges", field: "charges" },
          { title: "Bail", field: "bail"}
        ];
    
        const options = {
          movableRows: true,
          responsiveLayout: "collapse",
          pagination: "local",
          paginationSize: 20,
          columnMinWidth: 150
        };
    
        return (
          <div className="content-container">
            <select onChange={this.onSelectChange}>
              <option value="all" />
              <option value="dauphin">Dauphin</option>
              <option value="cumberland">Cumberland</option>
            </select>
            <ReactTabulator
              columns={columns}
              data={filteredData}
              className="custom-css-class"
              options={options}
            />
            <ReactTableTest
              filteredData={filteredData}
            />
          </div>
        );
      }
    }
    

    Any help would be much appreciated. Tabulator is otherwise terrific and I'd love to use it in my project if I can surmount this issue.

    Reply
  • how fit the data to my cell?
    how fit the data to my cell?

    Sep 15, 2019

    Hi, currently my data overflow my cell size and it's not being displayed

    image

    I'd like add more height to that row, so I could display all the tags and keep the column size, but if it's not possible, I could add some scroll for that cell, even use a responsive layout, my third tag looks cut and 4th tag doesnt even appear

    http://tabulator.info/docs/4.1/layout#fittodata

    I've tried this code with fitData,fitColumn,fitDataFill and these doesnt work for me

    <ReactTabulator
     data={data}
     columns={columns}
     tooltips={true}
     layout={"fitData"}
     />
    

    thank you so much

    Reply
  • Cannot get setFilter to work.
    Cannot get setFilter to work.

    Feb 1, 2019

    Title

    Short Description:

    How can we use setFilter in a manner similar to what is shown in the Tabulator docs?

    Code

    table.setFilter([ {field:"age", type:">", value:52}, //filter by age greater than 52 {field:"height", type:"<", value:142}, //and by height less than 142 {field:"name", type:"in", value:["steve", "bob", "jim"]}, //name must be steve, bob or jim ]);

    I cannot get anything like this to work in the React component,.

    ...

    Please help with a PR if you have a solution. Thanks!

    Reply
  • Invalid table constructor (and column definition) options are clobbering my app.
    Invalid table constructor (and column definition) options are clobbering my app.

    Jul 30, 2019

    Invalid table constructor (and column definition) options are clobbering my app.

    Bug

    Since the latest tabulator update it seems, every tabulator table in my production app (which is many) is throwing these console warnings which are clobbering my performance.

    Environment Details

    • OS: OSX
    • Node.js version: 12.6.x
    • npm version: yarn 1.17.3

    Long Description tabulator.js?39ab:7339 Invalid table constructor option:

    headerClick headerDblClick headerContext headerTap headerDblTap headerTapHold

    I'm not actually using, registering listeners on or declaring any of these events anywhere in my app (that I'm aware of). How can i suppress these warnings? Screen Shot 2019-07-30 at 3 53 17 PM

    @ngduc @olifolkerd @ducwings @dependabot-bot Please help with a PR if you have a solution. Thanks!

    question 
    Reply
  • Adding a custom react component as a cell to each rows.
    Adding a custom react component as a cell to each rows.

    Dec 11, 2018

    Hi team, I want to use your react-tabulator for showing the list of alerts. Each alert will be a row. A row will have multiple cells with alert details. I wanted to add a button as one of the cell in each row. On button click the alert is acknowledged. Something similar to below screen shot : The below table contains a single row/ alert with a button to acknowledge it. screenshot_20181211-142148__01

    Reply
  • TypeError: this.table is null
    TypeError: this.table is null

    Aug 3, 2020

    TypeError: this.table is null

    • bug: Tabulator crashing on componentWillUnmount

    Environment Details

    • react-tabulator version: 0.13.2
    • react version: 16.13.1

    Long Description I am getting following error with the simplest example: TypeError: this.table is null componentWillUnmount ReactTabulator.js:131

    It seems that somewhere the table reference is deleted before the component's componentWillUnmount event is called, thus the error. My setup is like this: I have wrapped the my component with Tabulator in another component, that only renders its children when the status is not loading. It seems React instantiates the children before they are rendered, and then immediately unmounts them, before the this.table object is created.

    At the moment, I am using workaround below, but can you check why this.table is null? What could be a solution? Thank you!

    Workaround Replace this.table.destroy(); with if(this.table){ this.table.destroy(); } in ReactTabulator.js:131

    Reply
  • [Bug] react-tabulator 0.13.2 broken when using tabulator 4.8.0
    [Bug] react-tabulator 0.13.2 broken when using tabulator 4.8.0

    Sep 9, 2020

    Title

    • bug: TypeError: Tabulator is not a constructor

    Environment Details

    • react-tabulator version: 0.13.2
    • tabulator-tables version: 4.8.0 (thru package.json resolution section)
    • OS: macOS
    • Node.js version: v14.9.0

    Description

    螢幕截圖 2020-09-09 下午6 45 20 Since the download scope is fixed in tabulator-tables 4.8.0, I attempted to resolve the package into the newer version, yet the error above shown and blocked the entire table rendering.

    Related Repository https://github.com/lifehome/warsinhk-locationtableview

    Demo site This demo site(https://on9.link) is built with react-tabulator 0.13.2, and tabulator-tables 4.7.2. (Please use Google Translate to comprehend page contents.) It shows the problem that the green download button cannot export the filtered results, instead it downloads the first page and visible data rows only.

    Reply