javascript - How to add row to tabulator in react and extract data

Question

I’m using the react-tabulator library and want to know how I can add new rows once my tabulator has been generated. Preferably with a button below the tabulator which allows you to add a row everytime you click it.

I also want to know how I can extract my tabulator content into a JSON output or string after I have added my rows and happy with the content

question from:https://stackoverflow.com/questions/65832562/how-to-add-row-to-tabulator-in-react-and-extract-data

Answer 1

Adding Rows

Assuming that you have passed an array of data into the table, you should simply be able to push the row objects onto that array and then Tabulator will automatically pick up the change and display them:

So assuming you have a setup similar to the Tabulator React Setup Guide

where you have defined your data array:

var data = [
  {id:1, name:"Oli Bob", age:"12", col:"red", dob:""},
  {id:2, name:"Mary May", age:"1", col:"blue", dob:"14/05/1982"},
  {id:3, name:"Christine Lobowski", age:"42", col:"green", dob:"22/05/1982"},
  {id:4, name:"Brendon Philips", age:"125", col:"orange", dob:"01/08/1980"},
  {id:5, name:"Margret Marmajuke", age:"16", col:"yellow", dob:"31/01/1999"},
];

And then passed it into the tabulator component when you have instantiated it:

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

Then adding a row to the table is as simple as pushing a new object to your existing data array:

data.push({id:6, name:"Billy Jim", age:33, col:"pink", dob:"16/07/1995"});

JSON Data

To turn your array into json you can use the vanilla JS built in JSON.stringifyfunction:

var jsonData = JSON.stringify(data);