将 head 行添加到 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提供给 的 value中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" />
        )}
      </>
    )
  }
];

将导致：

在下一个组件中：

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并自己管理它们。