Question

118

ReactJS: Make a table editable using react-table

rated 0 times [ 121] [ 3] / answers: 1 / hits: 18215 / 7 Years ago, thu, july 6, 2017, 12:00:00

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.

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

shannon

Add To Favorites

Follow

Total Points: 606

Total Questions: 106

Total Answers: 111

Location: Lesotho

Member since Thu, Jun 30, 2022

2 Years ago

answered 7 Years ago sashacitlallik · Accepted Answer

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 }

/>