Как мы можем добавить динамическую строку в начале таблицы antd в Reactjs, в то время как другие строки остаются статическими данными, полученными из API? - PullRequest
Новая
       20

Как мы можем добавить динамическую строку в начале таблицы antd в Reactjs, в то время как другие строки остаются статическими данными, полученными из API?

0 голосов
/ 30 октября 2019

Я создал таблицу, которая содержит два столбца. Данные в таблице извлекаются через API и передаются в качестве реквизита для компонента таблицы. Теперь я хочу добавить новый элемент в таблицу. Поэтому, когда я нажимаю кнопку «Создать», в начале таблицы будет создана строка. В этой строке один столбец будет входным текстом, а другой столбец - выпадающим.

Пока я не смогу сделать это, передав условие в заголовке таблицы. как указано ниже 

  <Table
            dataSource={data}
            rowSelection={rowSelection}
            columns={columns}
            pagination={{
              hideOnSinglePage: true,
            }}
            rowClassName={record =>
              record.name === variable ? 'table-primary' : 'bg-white'
            }
            rowKey={record => record}
            onRow={record => ({
              onClick: () => {
                selectVariable(record);
              },
            })}
            bordered
            title={() =>
              flagData ? (
                <Row>
                  <Col lg={4} xl={4}>
                    <Input
                      placeholder="Enter Variable Name"
                      onChange={handleVariableName}
                      value={variableName}
                      style={{ width: 170 }}
                    />
                  </Col>
                  <Col lg={4} xl={4}>
                                  //Selecting a value from the dropdown
                    <Select
                      showSearch
                      style={{ width: 180, marginLeft: '150px' }}

                      placeholder="Enter Entity Name"
                      onChange={value => handleEntityName(value)}
                      filterOption={(input, option) =>
                        option.props.children
                          .toLowerCase()
                          .indexOf(input.toLowerCase()) >= 0
                      }
                    > 
                      {EntityName.map(item => {
                        return (
                          <Option key={item} value={item}>
                            {item}
                          </Option>
                        );
                      })}
                    </Select>
                  </Col>
                </Row>
              ) : null
            }
          />
        </div>

Но это не в нужном месте. Вместо этого он должен быть внутри стола.

Любое понимание этого действительно поможет. TIA 

  [1]: https://i.stack.imgur.com/1wryK.png
...