Можно ли с помощью Ant.design вставить форму в каждую строку таблицы?

Я использую React + Ant.design, и мне нужно создать таблицу, в которой каждая строка будет формой с несколькими входами, которые представляют поля этой строки, и пользователь может редактировать значение в каждом поле и нажимать Сохранить в конце каждый ряд.

Но я понятия не имею, как это сделать, потому что в компоненте Table есть только свойство источника данных для простых данных в формате JSON.

    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}
      >

Возможно ли вообще иметь формы внутри строк таблицы или лучше использовать только компоненты React?


reactjs javascript antd twitter-bootstrap
person Dmitry    schedule 20.02.2018    source источник

Ответы (2)


arrow_upward
1
arrow_downward

Я не совсем понимаю вашу проблему

Вы имеете в виду обратный вызов рендеринга от columns props?

Вы можете определить свойства столбцов для рендеринга ввода:

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

для получения дополнительной информации проверьте этот пример:

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

person Yichaoz    schedule 21.02.2018
comment
как это выглядит, если я хочу использовать радиокнопку? - person Muhaimin CS; 29.03.2019
comment
рендеринг - это функция обратного вызова, вы можете вернуть что угодно, просто замените <input /> на <radio /> - person Yichaoz; 29.03.2019

arrow_upward
0
arrow_downward

Да, это возможно ...

ваш источник данных должен быть в состоянии

ты можешь сделать что-то вроде этого

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

        };
      })}`

и вы можете заменить this.dataSource на this.state.dataSource

<Table
        dataSource={this.state.dataSource} 
/>
person Itunu Adekoya    schedule 24.04.2019