使用Material React Table来维护列过滤器状态。

huangapple
go评论138阅读模式
英文:

Maintain Column Filter State using Materal React Table

问题

我正在使用Material React Table来显示记录列表。在初始化组件时，如何保持筛选状态？（例如，用户导航离开并返回等情况）

在我的列中，我有多选和文本字段变体的筛选。

  1. const columns = useMemo(
  2.   () => [
  3.     {
  4.       accessorKey: 'description',
  5.       header: 'Description',
  6.       filterVariant: 'text',
  7.       size: 150,
  8.     },
  9.     {
  10.       accessorKey: 'task_type',
  11.       header: 'Type',
  12.       size: 90,
  13.       filterVariant: 'multi-select',
  14.     }
  15.   ],
  16.   []
  17. )

这是我的表格。

  1. <MaterialReactTable
  2.   columns={columns}
  3.   data={rows}
  4.   enableStickyHeader
  5.   enablePinning
  6.   initialState={{ density: 'compact' }}
  7.   enableFacetedValues
  8.   enableFilterMatchHighlighting
  9.   muiTablePaperProps={{
  10.     elevation: 0,
  11.     sx: {
  12.       borderRadius: '0'
  13.     }
  14.   }}
  15.   muiTableContainerProps={{ sx: { maxHeight: '350px' } }}
  16. />
英文:

I am using Material React Table to display the list of records. How can I maintain the filter state while initializing the component? (In case the user navigates away and comes back etc.)

In my column, I have a multi-select and text field variant filter.

  1.     const columns = useMemo(
  2. () =&gt; [
  3.   {
  4.     accessorKey: &#39;description&#39;,
  5.     header: &#39;Description&#39;,
  6.     filterVariant: &#39;text&#39;,
  7.     size: 150,
  8.   },
  9.   {
  10.     accessorKey: &#39;task_type&#39;,
  11.     header: &#39;Type&#39;,
  12.     size: 90,
  13.     filterVariant: &#39;multi-select&#39;,
  14.   }
  15. ],
  16. []

)

This is my Table.

  1. &lt;MaterialReactTable
  2.       columns={columns}
  3.       data={rows}
  4.       enableStickyHeader
  5.       enablePinning
  6.       initialState={{ density: &#39;compact&#39; }}
  7.       enableFacetedValues
  8.       enableFilterMatchHighlighting
  9.       muiTablePaperProps={{
  10.         elevation: 0,
  11.         sx: {
  12.           borderRadius: &#39;0&#39;
  13.         }
  14.       }}
  15.       muiTableContainerProps={{ sx: { maxHeight: &#39;350px&#39; } }}
  16.       
  17.     /&gt;

答案1

得分: 0

如果我的假设是正确的，那么您需要在用户选择一个过滤器并导航到另一页，然后返回页面时不更改过滤器。

您可以使用自定义函数来实现这一点。请参阅此文档Material Table Custom Filter Function。

英文:

If my assumption is correct you need the filter to not been changed if the user select a filter and navigates to another page and reverts back to the page

you can use a custom function for this. See this documentation Material Table Custom Filter Function

huangapple
  • 本文由 发表于 2023年7月6日 16:19:51
  • 转载请务必保留本文链接：https://go.coder-hub.com/76626844.html
  • arrays
  • javascript
  • javascript-objects
  • reactjs
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定