I'm using react-table npm package (https://www.npmjs.com/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.
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.
