Добавьте строку thead в компонент таблицы Antd

Question

Я хотел бы добавить еще одну строку в компонент таблицы Antd, чтобы она выглядела следующим образом:

Я не могу добавить строку как<tbody> строка, так как она будет отфильтрована и отсортирована с остальными данными.Я хотел бы, чтобы это была внешняя часть данных таблицы.

Размещение входных данных в уже существующих ячейках <th> далеко от удовлетворительного решения, потому что мне нужно было бы много взломать CSS, чтобы он заработал, и потерять некоторые переменные LESS на этом пути.

Это моя текущая попытка, с элементами формы внутри первого thead > th

Чтобы фон оставался только в строке формы,Мне нужно было бы отделить его от первого (и единственного) элемента thead <tr> до его собственной "пользовательской" строки.

У кого-нибудь есть идеи, как реализовать этот дизайн с помощью Antd <Table>?

---

Я бы хотел, чтобы конечный результат выглядел следующим образом: (изменено с помощью инспектор )

Answer 1

Первое решение

Компонент-обертка, который управляет состоянием двух Tables:

1. Таблица ввода с одной строкой.
2. Таблица данныхбез заголовка.

function TableWrapper() {
  ...
  return (
    <Flexbox>
      <Table
        size="medium"
        rowSelection={rowSelection}
        columns={columnsInput}
        dataSource={[{}]}
        pagination={false}
      />
      <Table
        size="medium"
        showHeader={false}
        rowSelection={rowSelection}
        columns={columns}
        dataSource={dataSource}
      />
      <Button onClick={handleAdd} type="primary" style={{ margin: '3%' }}>
        Add a row
      </Button>
    </Flexbox>
  );
}

Для сортировки, выполненной оберткой, вам нужно как минимум два элемента, чтобы можно было вызвать сортировку:dataSource={[{},{}]}

// columnsInput
    {
      title: 'Age',
      dataIndex: 'age',
      render: () => <Input />,
      sort: () => // setDataSource...
    }

Второе решение

В dataSource значении, которое передано в Table, добавьте передний макет элемента и затем соответственно отобразите строку дляпример:

const initial = {
  key: 'initial',
  name: 'initial',
  age: 'initial',
  address: 'initial'
};

Затем при рендеринге строки:

const columns = [
  {
    title: 'Name',
    dataIndex: 'name',
    render: value => (value === 'initial' ? <Input /> : value)
  },
  {
    title: 'Age',
    dataIndex: 'age',
    render: value => (value === 'initial' ? <Input /> : value),
    sorter: (a, b) => a.age - b.age
  },
  {
    title: 'Address',
    dataIndex: 'address',
    render: value => (value === 'initial' ? <Input /> : value)
  },
  {
    title: '',
    dataIndex: 'action',
    width: '50px',
    render: (_, record) => (
      <>
        {record.name === 'initial' && <Button icon="plus" shape="circle" />}
        {record.name !== 'initial' && (
          <Button icon="delete" shape="circle" type="danger" />
        )}
      </>
    )
  }
];

Результат:

inследующий компонент:

function TweakedTable() {
  const [dataSource, setDataSource] = useState([makeRow(0)]);
  const [counter, setCounter] = useState(1);
  const handleAdd = () => {
    setDataSource([...dataSource, makeRow(counter)]);
    setCounter(prev => prev + 1);
  };
  return (
    <Flexbox>
      <Table
        size="small"
        rowSelection={rowSelection}
        columns={columns}
        dataSource={[initial, ...dataSource]}
      />
      <Button onClick={handleAdd} type="primary" style={{ margin: '3%' }}>
        Add a row
      </Button>
    </Flexbox>
  );
}

Нет затрат на сортировку, просто добавьте sorter в столбцы таблицы.

Кроме того, ваш dataSource отделен от первой строки.

Примечание: я не делал никакого управления состоянием в демо, я уверен, что вы сможете справиться с этим, даже если вы хотитеубрать инвалида Checkbox не стоитиспользуйте rowSelection={rowSelection} и визуализируйте Checkbox в каждом ряду и управляйте ими самостоятельно.