Is it possible to insert form into each row in table using Ant.design?

Question

I'm using React + Ant.design and I need to make a table where each row will be a form with a number of inputs which are represents fields of this row and user can edit value in each field and push Save at the end of each row.

But I have no idea how to do it, because there is only datasource property in Table component for the plain data in JSON format.

    const dataSource = [
  {
    id: 1,
    name: 'Name 1',
    number: 1,
    username: 'user1',
    date: '09-09-2011',
    status: 'reviewed'
  },
  {
    id: 2,
    name: 'Name 2',
    number: 2,
    username: 'user2',
    date: '01-10-2021',
    status: 'reviewed'
  }
]

<Table
        size="small"
        rowKey="id"
        dataSource={dataSource}  <-- row data here, need to have form with input for each field
        columns={this.columns}
        bordered={false}
        rowClassName={(record, index) => {
          return cssClasses.tableRow
        }}
        title={TableTitle}
      >

Is it possible at all to have forms within table rows or it's better to make it using just React components?

Answer 1

I'm not fully understand your problem

Do you mean the render callback from columns props?

You can defined in columns props to render an input:

const column = [
  {
    title: 'input',
    dataIndex: 'value',
    render: (value, row, index) => { return <input /> }  // just an example
  }
]

for more info check this example:

https://ant.design/components/table/#components-table-demo-edit-row

Answer 2

Yes its possible...

your datasource should be in a state

you can do something like this

state = {dataSource: this.dataSource.map(data => {
        return {
          key: data.id,
          item: (
            <Select
              <Option></Option>
            </Select>
          ),
          quantity: <InputNumber/>,
          comments:<TextArea/>,

        };
      })}`

and you can replace this.dataSource with this.state.dataSource

<Table
        dataSource={this.state.dataSource} 
/>