时间戳

首页 > 解决方案 > Is it possible to add a row of Input controls to Ant table for searching purposes. Please refer the Image attached

reactjs - Is it possible to add a row of Input controls to Ant table for searching purposes. Please refer the Image attached

问题描述

I want to add a row of inputs(text inputs,dropdowns) for filtering purposes right below the column header row in a antd table.Please refer the attached image.Is it possible to do ?

enter image description here

标签： reactjsantd

解决方案

我不知道您如何处理您的数据，但如果您只需要输入，我发现了两种可能性：

  • 您可以将 JSX 传递给title标头数组的属性：
{
  title: <div>Notes<br /><input type='text' /></div>,
  dataIndex: 'note',
  width: 100,
},

在这里我传递了一个输​​入，但您可以制作一个自定义组件来接受您想要过滤的数据片段。

  • 您可以添加一行，其中每个列都包含输入（将数据作为道具传递的自定义组件）：
{
  key:0,
  date: <input type='text' />,
  amount: <input type='text' />,
  type: <input type='text' />,
  note: <input type='text' />,
},

我认为第二个更容易设置。假设您的数据来自 API 调用，它们在data您用于在表中显示数据的数组之外可用。因此，您可以对其进行过滤，以将您想要的任何内容作为道具传递并在您的自定义输入/选择组件中对其进行管理。

这听起来像复制数据，但我想不出另一种方法来做到这一点。

推荐阅读