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?

Solution

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

Comments

[Muhaimin CS]

how does it looks like if I want to use Radio button?

[Yichz]

the render is a callback funcion, you can return anything, means just replace the <input /> with <radio />