ngduc / react-tabulator

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

react-tabulator

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

• 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
• Example code: /src/ReactTabulatorExample.tsx
• More Examples, Use cases, FAQ: More Live Examples / Use cases

🌟 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.

• More Examples, Use cases, FAQ: More Live Examples / Use cases

🔧 Development - Commands

Require: NodeJS

$ npm install --legacy-peer-deps        install dependencies for development.
$ export NODE_OPTIONS=--openssl-legacy-provider     to work with Node 18+
$ 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

📖 Documentation

• Change Log
• Todo / Roadmap

🙌 Thanks

All contributions are welcome!

• Main library olifolkerd/tabulator (Thanks olifolkerd for this great library!)

While you're here, also check out

• 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 or TODO.md spec

react-tabulator's Issues

[Question] Use of date-fns

Hello,

I notice date-fns is added as a dependency to this project.

The original tabulator doesn't include date formatting natively - but instead it is set up in a way that allows people to include momentjs and they play nice together.

Personally, I use date-fns and think it is superior, but I'm curious as to why it was included in the React version of this lib? I thought for the most part it was just exposing the original library to React. Seems like the decision was made for a specific reason. I also don't see any docs on it's use.

I'm using date-fns in my component and wrote a custom sorter and a custom formatter:

const columns = [
  { title: 'First Name', field: 'firstName', headerFilter: 'input' },
  { title: 'Last Name', field: 'lastName', headerFilter: 'input' },
  { title: 'Email', field: 'email', headerFilter: 'input' },
  {
    title: 'Date',
    field: 'createdAt',
    formatter: function(cell) {
      return cell && cell.getValue()
        ? format(cell.getValue().toDate(), 'PPp')
        : null;
    },
    sorter: function(a, b) {
      if (!a || !b) return 0;
      return compareDesc(a.toDate(), b.toDate());
    }
  }
];

This works fine, but since date-fns is included in React-Tabulator, it would make sense for me to use it in the way the module wants. Is it included in React-Tabulator as a developer convenience? If so, how can I use it to sort and format without including date-fns myself and writing my own functions? I'd like to switch, otherwise I'm double including a library for no reason and it could make my project bigger. If it can't be used as a default sorter, I'd consider removing it to avoid confusion and bloat. But maybe I'm missing something.

Thanks!

Validator: Maximum call stack size exceeded

Im found the following problem:

When use validator(required,min) on number type editor the problem occures.
The following link describe the problem, and is currently fixed in the original tabulator.
olifolkerd/tabulator#1887

Can I ask you to update the tabulator to new version or how can we do this manualy?

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

Add setup example in readme

Title
Ive had feedback from a couple of users that they are unsure how to setup the react component, it might be worth including an example in the readme passing in a data array and column definitions.

I'dd offer to do it myself, but i only occasionally dabble in react so i dont want to add a bad example.

Cheers

Oli :)

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

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?

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

ajaxURL not working when data props are not sent

Title
ajaxURL not working

Environment Details

• OS: Ubuntu
• Node.js version: v10.2.0
• npm version: 5.6.0

Long Description
I'm trying to load data into my ReactTabulator by sending the ajaxURL in the options. But since I do not send any data in the props, it is throwing an error.

Code

const options = {
        ajaxFiltering: true,
        height: "225px",
        selectable: 1,
        pagination: "remote",
        ajaxURL: "/does/not/matter",
        headerFilterPlaceholder: "",
        ajaxSorting: true,
        movableColumns: true,
        resizableRows: false
};

<ReactTabulator
            options={options}
            columns={[some columns]}
 />

I think that the solution may be to update the line 144 of the ReactTabulator.tsx by checking that state.data exists before accessing its length, same with props.

Adding a custom react component as a cell to each rows.

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.

Custom PaginationElement

Followed the documentation for Tabulator and have the references setup but the Custom PaginationElement is never created
It still throws it into the footer of the existing table

options: {
            downloadDataFormatter: (data)=> data,
            downloadReady: (fileContents, blob) => blob,
            pagination:"local",
            paginationSize:2,
            paginationButtonCount:3,
            pageSizeSelector:[19,50,100],
            paginationElement: document.getElementById("tbPagination")

...

<ReactTabulator columns={this.state.columns} data={this.state.data} options={this.state.options} ref={ref => (this.ref =ref)}/>

Not only does the pagination not render in the "tbPagination" element i'm specifying but
the buttonCount and Size Selectors don't seem to work either
is this functionality not supported in the "react-tabulator" or am i doing something wrong/ missing a step somewhere?

Forgot to add console logs
tabulator.js Invalid table constructor option: pageSizeSelector

Tabulator is updating state on its own

I'm make an api call to get the data to fill the table
what i have is

this.state={
tableData :[],
 tableBackup:[{
            DisplayOrder: "",
            DataType:"",
            Required:"",
            Question:"",
            Options:""
          }
        ]

}

ComponentDidMount(){
fetch.....
.then((resp)=>{
...
}).then(res)=>{
this.setState({tableData:res.AQ})
this.ref.table.addRow(this.state.tableBackup) 
}
}



resetBtnClick=()=>{
this.ref.table.clearData();
this.ref.table.setData(this.state.tableData)
}

Down here if someone makes an edit to the table and wants to go back to clean (from the api state) they have a reset button
which should set it back to the initial state as I don't update or set this tableData state anywhere else
However what is happening is that those edits are saved into the state automatically...
Ok fine so i added a RefreshData state.

Set it in the Fetch the same as the tableData
ie( setState{(RefreshData:res.AQ})

so then i can call

resetBtnClick=()=>{
this.ref.table.clearData();
this.setState({tabledata:this.RefreshData})
this.ref.table.setData(this.state.tableData)
}

however it too has been updated with the edits
with the exception of the resetBtn these states are never set to each other.
I verified it is from the react-tabulator
causing this because if i add inner objects to RefreshData
ie

RefreshData.Name= "test"

in fetch{
RefreshData.AQ=res.AQ
}

if i update a name field outside of the table and click reset
it goes back to "test" as expected

Any idea why the table is updating the state of components and how to stop it?

Row and Cells are re-rendering for all state changes, not just data.

Rows and Cell get re-rendered for all state changes

• bug: Setting the state with unrelated changes causes re-rendering rows and cells

Short Description:

• When I set a boolean value in the state that isn't passed to react-tabulator, the table rerenders the row and cell data anyways.

Environment Details

• OS: Windows 10
• Node.js version: 10.15.1
• npm version: 6.4.1
• browser: chrome 73.0.3683.75

Long Description
In the example below, when editing data, I want to change the state to enable save button but when editing a large grid (30 columns, 10 rows) I noticed there was quite a bit of delay (1 sec?) when selecting the next column. If I remove the handleDataEdited prop, then it is very fast because the state doesn't get updated. I added the RowFormatter below to have it print a line in the console and sure enough, it prints for each row after setting the disabledSave in the state.

Code

handleDataEdited = (newData) => {
        this.setState({  disabledSave: false });
    }
render() {
        return (
           <div>
            <ReactTabulator
                columns={this.state.columns}
                data={this.state.data}
                dataEdited={this.handleDataEdited}
                options={{
                    clipboard: true,
                    clipboardCopyStyled: false,
                    clipboardPasteAction: "update",
                    height: 'auto',
                    layout: 'fitDataFill',
                    variableHeight: true,
                    reactiveData: true,
                    rowFormatter: RowFormatter //custom row formatter that just logs when called
                }}
            >
            </ReactTabulator>
            <Button color="primary" variant="contained" disabled={this.state.disabledSave} onClick={this.handleSave}>Save</Button>
           <div>
        )
    }

Workaround

...

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

Missing types?

Where are the typings for this repo? It says it couldnt find typings in @types/react-tabulator can you please suggest?

Table cursor is positioned on the first row (data reload?) after update of this.state

Title

• bug: Table cursor is positioned on the first row (data reload?) after update of this.state

Short Description:

• Table cursor is positioned on the first row (data reload?) after update of this.state

Environment Details

• OS: Windows 10
• Node.js version: 9.8.0 (irrelevant)
• npm version: 4.3.0 (irrelevant)
• React version: 16.8.6
• React Tabulator: 0.9.1

Long Description
See code (modified react-tabulator example code):
https://codesandbox.io/s/react-tabulator-examples-ok3t0
See the first grid/table: when the user scrolls to the last rows and then selects (with mouse click) one of the last rows, then the table table automatically scrolls back and the cursors is positioned on the first row of the table. No select of one of the last rows happen. All this happens because there is handleRowSelected event inside which then state update happens. If there is no handler with the state update, then the row is visibly selected and the uncontrolled/automatic scroll does not happen.

I am guessing - this issues can be duplicate of #82

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

please add new attributes

Would you please add full tabulator options to tabulator react version?
like (groupBy, groupStartOpen, etc)

How can I create a custom link formatter?

I cannot for the life of me get the formatter to work.

I get blank cells instead of a formatted link.

The React documentation could really use some explanations.

Side-question: Can I use the vanilla Tabulator in React, instead of the adapted one?

import React, { useState, useEffect } from "react";
import { Link } from 'react-router-dom';
import "tabulator-tables/dist/css/tabulator.min.css";
import { ReactTabulator } from 'react-tabulator'

function Journals(props) {

    const [journals, setJournals] = useState([]);
    const [inputs, setInputs] = useState([]);

    useEffect(() => {
        fetch("http://localhost:4000/journals")
            .then(res => res.json())
            .then(data => {
                setJournals(data)
            })
            .catch(err => err);
    }, []);

    const journalLinkFormatter = (cell, formatterParams) => {
        let key = cell.getValue()
        let link = `/journals/${key}`
        return <Link style={{ color: "blue", fontWeight: "bold", background: "red" }} to={link}>{key}</Link>
    }

    const columns = [
        { title: "Number", field: "key_", formatter: journalLinkFormatter },
        { title: "Date", field: "date_" },
    ];

    return (
        <div>
            <h1>Journals</h1>
            <ReactTabulator
                data={journals}
                columns={columns}
                tooltips={true}
                layout={"fitData"}
            />
        </div >
    )
}

export default Journals;

This way works, but it beats the purpose, as it reloads everything.

const columns = [
        {
            title: "Number", 
            field: "key_", 
            formatter: "link", 
            formatterParams: { url: cell => { return "/journals/" + cell.getValue() } }
        },
        { title: "Date", field: "date_" },
    ];

I'd like to learn how to use custom formatters.

bug: Selectable doesn't work

Short Description:
"Selectable" doesn't work neither on react 16 nor react 15.

Avoid using `react-dom/server` for props validation

react-tabulator/src/ConfigUtils.tsx

Line 148 in 7b4fa80

output['footerElement'] = renderToString(props['footerElement'])

React DOM Server is intended for use with Node servers. This import makes it so that anyone bundling this library also has to bundle react-dom/server (which is expensive). Can this file be refactored to avoid doing this?

can remove tags using click

when I hover over any tag, like for example, in editing mode here

https://0mwpy612xw.csb.app/

appears a popup indicating that you can remove a tag just clicking them, but this doesnt work because if you click you change the active editor and became the cell...a fix would be using double click for activate the editor, do you think that this could fix the problem?

thanks

bug: onRendered is not a function

Column Data does not respond to a state change

Title

• bug: Column Data does not respond to a column data state change
• feature:
• enhancement: would like flexible tables (hiding columns on the fly for example)

Short Description:

• I have tried everything I could think of for debugging, and it is ignoring state changes to the column data. All other components respond fine to the state changes (with this.state.columns)
  -I've tested elsewhere in the app (same component) that it is acknowledging columns state change and read out data.

Environment Details

• OS: Windows 10
• Node.js version:
• npm version :6.4.1

Code
some relevant code:
renderTabulator(){
const tabOptions = {
movableRows: true
};
return(
<ReactTabulator
columns={this.state.columns} //<====this is what gets ignored on change here, data works fine...
data={this.state.assignments}
options={tabOptions}
className="min-table"
/>)
}

Workaround
none found yet.

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

reactFormatter error in Redux

When I pass containers in reactFormater, I see this error:
Could not find "store" in the context of "Connect(Invoices)". Either wrap the root component in a <Provider>, or pass a custom React context provider to <Provider> and the corresponding React context consumer to Connect(Invoices) in connect options.
How can I pass "store" in Redux?

Table reference not available inside the renderComplete callback

I am using react-tabulator plugin to display a data-grid. I would like to hide some of the grid columns once react-tabulator grid is loaded. My code is on the following lines,

<ReactTabulator
    columns={this.columns}
    data={this.data}
    options={this.options}
    renderComplete={(e) => this.hideColumns()}
    ref={ref => (this.ref = ref)}
/>

hideColumns = () => {        
   this.hiddenColumns.forEach(column => {
     this.ref.table.hideColumn(column);
   });        
}

But the this.ref is always undefined in the hideColumns function. I was expecting this.ref to be available in the renderComplete callback. My query is how can I access this.ref inside renderComplete callback.

Adding Pagination

Hi,

I'm trying to add a pagination section in the footer of my table, according to the Tabulator documentation:

<ReactTabulator
                data={data}
                columns={columns}
                pagination={'local'}
                paginationSize={6}
/>

But it doesn't seem to work. The table works fine otherwise.
Please help if you have a solution. Thanks!

Large data loads freeze browser

Short Description:

• Trying to load large data into a table with 1500-2000 rows, of 4 columns of data seems to freeze the browser. I'm trying to take advantage of the virtualized DOM functionality. I have added a demo below.

On line 33, you can set data = generator(clientsSchema, [min], [max]) for min and max row amounts to be generated. Currently set to 500 and 600.

Environment Details

• OS: Windows 10
• Node.js version: 9.11.1
• react-tabulator version: 0.7.11
• react: 16.7.0

Code
https://codesandbox.io/embed/opl1qj2ny

select editor not working in "development" environment

I'm on latest react-tabulator. It seems I've hit a snag and someone here might've encountered something similar. I know it's far-fetched, but bear with with me.

if I do a npm run build and npm run start I get the select editor working, whereas on my startdev it's not showing up. It's a conundrum because these are my start, and startdev respectively:

start: NODE_ENV=production node_modules/.bin/babel-node server.js
startdev: NODE_ENV=development npm run server

and then server is:
server: nodemon --exec babel-node server.js --ignore public/ --ignore src/ --ignore _cache/

(same thing if I remove --ignores)

Any ideas? Thanks.

MultiSelectEditor can only delete the last element

In a column, I did something like this, but the editor can only delete the last element which is bad.
I want to put the cursor back so that I can delete whichever the element I want
{
title: "Pets",
field: "pets",
editor: MultiSelectEditor,
editorParams: { values: petOptions },
formatter: MultiValueFormatter,
formatterParams: { style: "PILL" }
},

how execute an event when I make a change (add some tag in a cell)

Hi, I've a table similar to the provided in the example where you can add new pets to some cell, everything works so far but I need dispatch some redux action every time that new tags are added or removed...is this possible?

thanks

Please how do I print the React15Tabulator component?

Title

• bug: XYZ broken...
• feature: please add...
• enhancement: add this to existing features...

Short Description:

• Unable to get a result from blah...

Environment Details

• OS:
• Node.js version:
• npm version:

Long Description

• etc.

Code

JS code example goes here...

Workaround

...

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

Downloading doesn't work without callbacks

Title
Downloading doesn't work out of the box.

Short Description:
You have to add dummy downloadDataFormatter and downloadReady callbacks to the options to make it work. I don't know if this is by design or not. If you do not add these callbacks then when tabulator-tables calls these functions react-tabulator calls a NOOPS dummy function that does nothing and therefore causes errors.

Environment Details

• OS: Linux Debian 8
• Node.js version: 9.11.2
• npm version: 5.6.0
• react version: 16.5.2
• tabulator-tables version: 4.2.3 (included with react-tabulator)
• react-tabulator version: 0.9.1

Long Description
I'm trying to download a csv of the table data which uses grouped columns. My first attempt was to simply create a reference to the ReactTabulator component and call the following function as per tabulator's instructions:

this.tableRef.current.table.download("csv", "data.csv")

This causes the following error:

TypeError: Cannot read property 'forEach' of undefined parseRows

node_modules/react-tabulator/node_modules/tabulator-tables/dist/js/tabulator.js:9608
9605 |
9606 | function parseRows(data) {
9607 | //generate each row of the table
9608 | data.forEach(function (row) {
| ^ 9609 | var rowData = [];
9610 | fields.forEach(function (field) {
9611 | var value = self.getFieldValue(field, row);

What is happening is that the data is undefined as it is being overwritten by the following code:

Download.download
node_modules/react-tabulator/node_modules/tabulator-tables/dist/js/tabulator.js:9336
9333 | this.processColumns();
9334 |
9335 | if (downloadFunc) {
9336 | downloadFunc.call(this, self.processDefinitions(), self.processData(), options || {}, buildLink, this.config);
| ^ 9337 | }
9338 | };

As we have not set a downloadDataFormatter option which would be stored in downloadFunc, react-tabulator provides a NOOPS function that returns undefined.

var NOOPS = function NOOPS() {}; // get callbacks from props (default: NOOP) to set them to Tabulator options later.

Ok so we can fix this by implementing a downloadDataFormatter as shown in the workaround and then this error goes away. However we then have a new issues and the download fails silently. This is now due to tabulator-tables calling a downloadReady callback which also does not exist and therefore calls the NOOPs dummy function that returns undefined. The downloadReady expects to either return a blob which then triggers the actual download or if undefined then stops further processing.
see docs

9514 | Download.prototype.triggerDownload = function (data, mime, type, filename, newTab) {
9515 | var element = document.createElement('a'),
9516 | blob = new Blob([data], {
9517 | type: mime
9518 | }),
9519 | filename = filename || "Tabulator." + (typeof type === "function" ? "txt" : type);
9520 | blob = this.table.options.downloadReady.call(this.table, data, blob);
9521 | ^ fails here

Workaround
To make the download work correctly you simply need to provide the two missing callbacks in the tabulator options:

<ReactTabulator 
  ref={this.tableRef} 
  columns={columns} 
  data={items} 
  options={options}
/>

...

options  = {
    downloadDataFormatter: (data) => data,
    downloadReady: (fileContents, blob) => blob,
}

Possible solutions would be for react-tabulator to provide these required options instead of calling a NOOPS function which would therefore work the same was as the tabulator docs or provide information in the react-tabulator docs to state that these callbacks are necessary.

I hope this is useful to someone :)

Tabulator Div ID

Is it possible to set the div ID for the tabulator instance ? This is required for the drag-and-drop feature.

var table = new Tabulator("#my-table-div-id", { ... });

TypeError: undefined is not an object (evaluating 'self.table.options') when navigating away from table

Title

• Bug: React app (next.js) crashes when navigating away from a React Tabulator table

Short Description:

• My app is crashing with a TypeError: undefined is not an object (evaluating 'self.table.options') error. It seems to happen when I leave (unmount a component) a page that has a table on it

Environment Details

• OS: Mac
• Node.js version: 8.14

Code

  renderLeads() {
    if (this.state.leads.length < 1) return false;
    const columns = [
      {
        title: 'First Name',
        field: 'firstName',
        headerFilter: this.props.isDashboard ? null : 'input'
      },
      {
        title: 'Last Name',
        field: 'lastName',
        headerFilter: this.props.isDashboard ? null : 'input'
      },
      {
        title: 'Email',
        field: 'email',
        headerFilter: this.props.isDashboard ? null : 'input'
      },
      {
        title: 'Most Important',
        field: 'mostImportant',
        headerFilter: this.props.isDashboard ? null : 'select',
        headerFilterParams: { values: true }
      },
      { title: 'Status', field: 'status' },
      {
        title: 'Date',
        field: 'createdAt',
        formatter: function(cell) {
          return format(cell.getValue().toDate(), 'PPp');
        },
        sorter: function(a, b) {
          return compareDesc(a.toDate(), b.toDate());
        }
      }
    ];
    return (
      <Fragment>
        <ReactTabulator
          data={this.state.leads}
          columns={columns}
          rowClick={this.handleLeadClick}
          options={{
            pagination: 'local', //enable local pagination.
            paginationSize: 20,
            initialSort: [
              { column: 'status', dir: 'desc' },
              { column: 'createdAt', dir: 'asc' } //sort by this first
            ]
          }}
        />
      </Fragment>
    );
  }

Does it have anything to do with upstream? Perhaps olifolkerd/tabulator#1790 or olifolkerd/tabulator#1792

Enhancement: last column of table needs to resize dynamically with resizable columns

Short Description:
When resizing the columns, it leaves a blank grey area on the right side of the table. Sorry for the small image, but the table data is irrelevant anyways :P

I feel like this is probably more of a bug than an enhancement, because I don't much want to use resizable columns if it behaves like this, but since it's not breaking the code or anything, it's more of an optimization I guess.

Environment Details

• OS: MacOS Mojave
• Node.js version: 10.10.0
• npm version: 6.4.1

Code
I'm using the same code as the example on codesandbox.

Workaround
When I finish the site, I'll have a shot at trying to fix this, for now I just need to turn resizable columns off :P

Upgrade tabulator to 4.1.3

@olifolkerd are you about to release a new version? otherwise, I'll upgrade to 4.1.3 this weekend. Thanks.

how fit the data to my cell?

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

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

Custom Formatters / Editors

Hey @ngduc

Nice to see things are going well here.

Ive notice you've create a few nice formatters/edtiors etc on the wrapper. You would be welcome to submit any of the non-react specific ones of these as pull requests to the Tabulator library itself if you want, things like the list formatter i can see being very useful to people.

Also if you have any that are react specific i would be happy to mention them on the docs website if you have more info.

That way even more people could have access to them :)

Cheers

Oli :)

Cannot get setFilter to work.

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!

Adding / deleting rows

Hi, for some reason when I addRow (on a table) or delete row (from a cellL cell.getRow().delete()) - tabulator adds and/or deletes a row, but then immediately reverts itself back. So, if I add a row, it adds it and then immediately removes it. Also, if I delete it, it deletes the row but immediately row shows up again.

Data is coming in through the props, but that's not the issue since I've tried deep copying the data that's coming in.

Adding component to the footer element

Hi, this is more of a question than an issue.

Any idea how one could add a component to the footerElement?

I want to do add this component to the footerElement:

<DefaultButton
            data-automation-id="test"
            allowDisabledFocus={true}
            disabled={disabled}
            checked={checked}
            text="Button"
            onClick={this._alertClicked}
          />

Insecure dependency: event-stream 3.3.6

We noticed this repo pulls in event-stream at version 3.3.6 as a dependency. This version has had malicious code injected into it (see dominictarr/event-stream#116 for more information) and we recommend that you either upgrade to 4.0.1 or downgrade to 3.3.4 as soon as possible. You can do this by setting a Yarn resolution in your package.json.

(Dependabot can't generate downgrade PRs for sub-dependencies at the moment, but we wanted to warn you about the issue all the same.)

rowFormatter prop gets dropped when ConfigUtils.propToOptions is called

rowFormatter prop does not work

Short Description:

• rowFormatter prop does not make it to Tabulator object

Environment Details

• OS: Windows 10
• Node.js version: v8.11.1
• npm version: 5.6.0

Long Description

• When supplying the ReactTabulator component a rowFormatter prop, it appears that the rowFormatter prop doesn't get added as an option to the Tabulator object. It appears that in the ConfigUtils.propsToOptions function the rowFormatter prop gets dropped before being assigned to the Tabulator object.

Code

<ReactTabulator
    columns={[...]}
    data={[...]}
    rowFormatter={(row) => {...}} //<- This function never gets called
/>

Question: Tabulator in React - double virtual DOM?

@ngduc thank you for putting react-tabulator together, very handy!

When using react-tabulator - should one expect tabulator to use its own virtual DOM, then react to process result of that in its own virtual DOM, or are there smarts to avoid that, or is best practice to turn off tabulator's virtual DOM (or not)?

I would expect double-virtual-DOM-ing be performance hit, hence the concern.

Initial ajaxRequestFunc blocked due to componentSetUpdate call to setData

Short Description:
The componentSetUpdate calls setData which blocks the initial ajaxRequestFunc load request by the wrapped Tabulator object.

Environment Details

• OS: Linux
• Node.js version: 11.9.0
• npm version: 6.7.0

Long Description
When the Tabulator component is first rendered, "Page.setPage" is called, which invokes the ajaxRequestFunc. This causes Tabulator to keep track of the number of calls; it expects the handling of the promise to not have any blocking calls between when it started and when it finally resolves.

However, the React componentSetUpdate call will eventually invoke setData, after the ajaxRequestFunc is called. This in turn causes the result of the ajaxRequestFunc to resolve after the setData.

Code

const OPTIONS = {
  ajaxProgressiveLoad: "scroll",
  ajaxURL: "does/not/matter",
  ajaxRequestFunc: (url, config, params) => {
    return new Promise((resolve, reject) => {
      setTimeout(() => resolve({
        status: 200,
        json: () => ({last_page: 1, data: [1,2,3]})
      }), 1000);
    });
  }
}

Workaround

The best I've found is forcing a refresh after the page is loaded. However, this causes two loads, which is really impractical. Not specifying the data

It seems like the fix is to avoid calling setData if ajax loading is being used.

QUESTION - moment.js date format

QUESTION

Short Description:

...
I have this timestamp which I want to order

but I get this error in the console
index.js:1375 Sort Error - 'datetime' sorter is dependant on moment.js

how can I use that in react? ...I have installed moment and imported but is not working ... Thanks

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

Table not updating with updated data

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.

Any way to access Tabulator instance itself? (need to replace columns)

I need to replace columns in my table, can I do something like table.setColumns(newColumns) like below?
http://tabulator.info/docs/4.0/columns#replace

Pagination: managing pagination

Hi, I want to know if (and how) we can set some pagination controls in react-tabulator because I have a customized layout that adds in a checkbox to the row data and will need to keep track of the values selected as I navigate to different pages.

For example, to set the current page, I have tried the following and was unsuccessful:

let options = {
    pagination: 'local',
    paginationSize: 10,
    page: 3
}

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

In the Tabulator documentation, the following function is available:

table.setPage(1)
.then(function(){
    //run code after table has been successfully updated
})
.catch(function(error){
    //handle error loading data
});

Reference: http://tabulator.info/docs/4.1/page#manage

So I would like to know if this is supported and how this be achieved with react-tabulator.

Adding / deleting rows question

I'm changing json / prop which tabulator is editing now and it works fine for adding/deleting rows. However, it forces an update/redraw.

Regular tabulator has an addRow function which mitigates that. Is there something similar in React version?

Update table data when row is moved?

Right now, the data object does not update when a row is moved (i.e. dataEdited won't trigger anything). From the Tabulator documentation, it seems like rowMoved should might firing an event. Is that true? Has someone tested it?
Does this.table.getData() work?
Thank you!

select editor seems to be broken now

I'm on the latest master.

It seems like I can't get select editor to show up neither in a cell nor as a filter. All other editors seem to work.

I'm aware of new changes to editorParams / values in tabulator. I've even tried ad absurdum test with an example from tabulator itself:

            { title: "Name", field: "country", editor: "select",
                editorParams: {
                    values: {
                        "steve": "Steve Boberson",
                        "bob": "Bob Jimmerson",
                        "jim": "Jim Stevenson",
                    },
                },
                headerFilter: "select",
                headerFilterParams: {
                    values: {
                        "steve": "Steve Boberson",
                        "bob": "Bob Jimmerson",
                        "jim": "Jim Stevenson",
                    },
                },
            },

Can't get select to show up. When I click the field it shows up as an input, but an empty input and reverts back to showing correct value once I click out of it. Filter column, in same vein, shows an iput field with placeholder text: 'filter column...'

Tabulator Themes

• feature: Access to all the Tabulator Themes

Short Description:
I notice the readme instructs users to use the styles.css, i was wondering if it would be possible include all of the Tabulator themes in this project :)

Cheers

Oli :)

How to create new tables not the same copy

I tried to create new tables but the result was just a clone of the first table
I want to create an entirely different table for each tab but with the same data and columns

my code is

componentDidMount() {
let panes;

panes = options.map(opt => {
  axios
    .get("https://reqres.in/api/users")
    .then(response => {
      this.setState({data: response.data.data});
    })
    .catch(function(error) {
      console.log(error);
    });

  return {
    menuItem: opt,
    render: () => {
      return (
        <Tab.Pane>
          <ReactTabulator
            ref={ref => {
              this.ref.push(ref);
            }}
            data={this.state.data}
            columns={columns}
            tooltips={true}
            layout={"fitData"}
            rowClick={this.rowClick}
          />
        </Tab.Pane>
      );
    }
  };
});

setTimeout(() => {
  this.setState({ panes: panes });
}, 2000);

}

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

Data grouping is not working

Title

• bug: Data grouping is not working

Short Description:
Tried to group my table data by giving groupBy={"name"} property and nothing is happening. after some digging, I found that groupBy is not set as a option in ConfigUtils.js So the fix could be as simple as adding that to the valid options.

Environment Details

• OS: Windows
• Node.js version: 8.11.3
• npm version: 6.3.0

Code

interface tabulatorcolumn {
    title: string;
    field: string;
    align?: "left" | "center" | "right";
    width?: number;
    editor?: string;
    visible?: boolean;
}

const TABULATOR_COLUMNS: tabulatorcolumn[] = [
    { title: "Alaotsikko", field: "subtitle" },
    { title: "Aines", field: "name", editor: "input" },
    { title: "Yksikkö", field: "unit", editor: "input" },
    { title: "Määrä", field: "quantity", editor: "input" },
];
// etc.
return (
        <ReactTabulator
            className="ingredient-table"
            data={props.ingredients}
            columns={TABULATOR_COLUMNS}
            layout={"fitData"}
            movableRows={true}
            groupBy={"subtitle"}
            cellEdited={cell =>
                props.valueChangeHandler(
                    cell.getRow().getPosition(),
                    cell.getField(),
                    cell.getValue()
                )
            }
        />
    );

Workaround
None

...

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