adding a row to the react table by clicking a button

Question

I am looking to add a new row to the existing table. Is there any way achieving that I have read the api of the reactdatagrid but no luck in finding it. any other way of doing this?

Answer 1

First map you need the data you need to render in table to your component state. Let's say to an array.

tableData = [
  {
    id: 1,
    name: 'Tim',
    age: 25,
  },
  {
    id: 2,
    name: 'Jane',
    age: 22,
  },
]

And populate the table with that state array. Then add a button and on button click just push some empty value to the array.

const { tableData } = this.state;
tableData.push({ id: null, name: '', age: null});
this.setState({ tableData });