如何从MUI DataGridPro获取当前过滤后的数据

Question

在 DataGridPro 应用过滤器后，我想获取当前过滤后的数据，以便在另一个组件中使用它。

我尝试从 DataGridPro API 文档中查找事件，但找不到有用的内容。

Answer 1

获取过滤值的一个选项是在过滤器的更改事件上放置一个事件侦听器。一个简单的版本如下所示：

export default function App() {
    const apiRef = useGridApiRef();
    
    useEffect(() => {
        const handleFilterChange: GridEventListener<'filterModelChange'> = (params) => {
            // Do something with the params....
        }
        return apiRef.current.subscribeEvent('filterModelChange', handleFilterChange)
    }, [apiRef]);

    return (
        <DataGridPro apiRef={apiRef} />
    )
}

我没有在该片段中包含列或行。基本上，您使用 ref 来获取 DataGridPro 的当前状态，然后在 useEffect 中分配一个更改侦听器并传递一个回调函数以在更改后对数据执行某些操作。

这里是 MUI 演示的链接。

这是相关文档的链接。

希望有帮助！