使用 React-table 根据元数据过滤行

Question

我知道如何根据 table 中呈现的内容过滤行，但我如何根据未在 table 中显示的信息过滤（使用 useFilters）table table，但在数据集中可用吗？

我想我可以让 react-table 在 table 中显示 tags/meta-data 并通过样式隐藏它，但这似乎不太好。

示例数据：

{title:"Lesson One", author:"Joe", category:"math"}

其中 title 和 author 显示在 table 中，但 category 仅用于过滤。

Answer 1

我的解决方案不是最优雅的，但也许您可以调整它以满足您的需要。我使用 react-table 示例来完成大部分样板文件，因此这些字段与您提供的示例字段不匹配，但希望您可以调整它。

https://codesandbox.io/s/vigorous-ardinghelli-z7fc1?file=/src/App.js

总结：

任何您不想显示的字段都可以在 table 创建时通过传递给 hiddenColumns 属性字符串 ID 数组来隐藏。

const {
  ...
} = useTable(
  {
    columns,
    data,
    initialState: {
      hiddenColumns: ["firstName"] // In your case, "category"
    }
  },
  useFilters
);

我从 table 实例（第 86 行）

中获得了一个隐藏列数组

// Obtain an array of the hidden columns so we can render the filter for them
const hiddenColumns = React.useMemo(() => {
  return allColumns.filter(
    (column) => column.id === state.hiddenColumns.find(
        (columnId) => columnId === column.id))
}, [allColumns, state.hiddenColumns])

但是请注意，allColumns 属性 returns 一个平面列数组，这意味着如果您有嵌套列，那么它确实不跟踪该信息，而是需要使用 columns 属性并修改过滤以匹配您的列嵌套（如果跟踪嵌套对您来说是必要的）。 Ref

获得隐藏列后，我可以为每个隐藏列呈现 Filter，具体取决于 canFilter 是真还是假，然后是可见列。（第 111 行）

<thead>
  {hiddenColumns.map(hiddenColumn => {
     return hiddenColumn.canFilter ? 
       <tr key={hiddenColumn.id} role="row">
         <th colSpan={visibleColumns.length} style={{ textAlign: 'left'}}>
           {hiddenColumn.render('Filter')}
         </th>
       </tr> : null
     })}
     {headerGroups.map(headerGroup => (
       <tr {...headerGroup.getHeaderGroupProps()}>
         {headerGroup.headers.map(column => (
           <th {...column.getHeaderProps()}>
             {column.render('Header')}
             <div>{column.canFilter ? column.render('Filter') : null}</div>
           </th>
         ))}
      </tr>
   ))}
</thead>

您显然可以更改呈现隐藏列过滤器的位置以满足您的需要。

我还要提到挂钩 useGlobalFilter 搜索隐藏列，因此如果您正在寻找全局过滤器解决方案，那么它应该可以在没有任何变通方法的情况下工作。

使用 React-table 根据元数据过滤行

Using React-table to filter rows based on meta-data

reactjs

react-table