3

我正在使用react-table组件来显示和过滤我的数据集。我的过滤器如下所示:

在此处输入图像描述

从上图中可以看出,每一列都可以提供过滤组件(inputselect)。

现在,我需要实现类似 excel 的过滤器,如下所示:

在此处输入图像描述

到目前为止,我想出的是实现一个自定义组件来显示所需的小部件并将其定位为与标题标题相关的绝对位置:

<ReactTable
   columns={[
       ....
       {
          Header: "Name",
          accessor: "name",
          Filter: ({ filter, onChange }) =>
          <ExcelFilter
             onChange={event => onChange(event.target.value)}
             styles={{position: 'absolute', top: '0', right: 0}}
             value={filter}
          />
       }
   ]}
   ...
/>

这是解决我的任务的可接受方法(尤其是 CSS 定位)还是有更好的方法来存档?

4

0 回答 0