I'm using react-table npm package () for generating my table:

<ReactTable
    data={ tableData }
    columns={ tableColumns }
    showPagination={ false }
    defaultPageSize={ tableData.length }
/>

The table is shown as expected. But now I would like to make this table editable. So I need to use input fields with data value instead of just text data values.

How do I have to do that? I do not understand the docs for this point... So I need some help.

I'm using react-table npm package (https://www.npmjs./package/react-table) for generating my table:

<ReactTable
    data={ tableData }
    columns={ tableColumns }
    showPagination={ false }
    defaultPageSize={ tableData.length }
/>

The table is shown as expected. But now I would like to make this table editable. So I need to use input fields with data value instead of just text data values.

How do I have to do that? I do not understand the docs for this point... So I need some help.

• javascript
• reactjs

• 1 If I understand it, <ReactTable> is available in v6 but not v7, which is "headless" – Eric Commented Sep 23, 2020 at 5:39

2 Answers 2

First you need to edit the Columns props

Check render: props => <input value={props.row.name} onChange={onChangeFct} />

For example:

const onChangeFct = () => console.log("onChange usually handled by redux");
const tableColumns = [
{
    header: 'Id',
    accessor: 'id'
},
{
    header: 'Name',
    accessor: 'name',
    render: props => <input value={props.row.name} onChange={onChangeFct} />
}
]


<ReactTable
    data={ tableData }
    columns={ tableColumns }
    showPagination={ false }
    defaultPageSize={ tableData.length }
/>

You can use text in place edit plugins like react-x-editable plugin to make table editable as it provides both modes: inline and popup.