如何在Material-react-table中获取过滤后的数据并同步至其他组件？

实现思路 #

Material React Table（MRT）内置了获取过滤后数据的方法，你可以通过表格实例的getFilteredRowModel()获取过滤后的行数据，再通过React状态管理将数据同步，最后传递给地图组件。

具体步骤 #

• 用useMaterialReactTable创建表格实例，拿到核心的表格操作对象
• 用React的useState声明状态来存储过滤后的数据
• 监听表格的过滤、搜索等状态变化，或者在数据更新时调用getFilteredRowModel()获取最新过滤数据并更新状态
• 将状态中的过滤数据作为props传入地图组件，用于渲染标记

代码示例 #

import { useState, useEffect } from 'react';
import MaterialReactTable, { useMaterialReactTable } from 'material-react-table';

export default function TableWithFilteredData() {
  // 原始表格数据
  const [tableData, setTableData] = useState([
    // 你的数据结构，比如{ id: 1, name: 'xxx', lat: 39.9, lng: 116.4 }
  ]);
  // 存储过滤后的数据，用于地图组件
  const [filteredMapData, setFilteredMapData] = useState([]);

  const table = useMaterialReactTable({
    data: tableData,
    columns: [
      // 你的列配置，比如{ accessorKey: 'name', header: '名称' }等
    ],
    // 监听列过滤条件变化，实时更新数据
    onColumnFiltersChange: () => {
      syncFilteredData();
    },
    // 监听全局搜索变化
    onGlobalFilterChange: () => {
      syncFilteredData();
    },
  });

  // 同步过滤后数据到状态
  const syncFilteredData = () => {
    // 提取过滤后的数据（row.original对应原始数据对象）
    const filteredRows = table.getFilteredRowModel().rows.map(row => row.original);
    setFilteredMapData(filteredRows);
  };

  // 初始化和原始数据更新时同步一次
  useEffect(() => {
    syncFilteredData();
  }, [tableData, table.getFilteredRowModel()]);

  return (
    <div>
      <MaterialReactTable table={table} />
      {/* 把过滤后的数据传给地图组件 */}
      <MapComponent markers={filteredMapData} />
    </div>
  );
}

关键细节 #

• getFilteredRowModel()返回的模型里，rows数组的每个row.original是你传入表格的原始数据项，直接用它来生成地图标记即可
• 如果需要包含排序、分页后的当前页数据，可以改用getFilteredSortedRowModel()，或者结合表格的分页状态（table.getState().pagination）来筛选
• 除了上述监听事件，也可以在需要的时机手动调用syncFilteredData()，比如表格数据重新加载后

内容的提问来源于stack exchange，提问作者Muhammad Sami