如何使用 Material React Table 构建强大的 React 表格 – wiki基地

作者： /

构建强大的 React 表格：Material React Table 深度指南

在现代 Web 开发中，表格是展示和管理结构化数据最常见的组件之一。然而，构建一个功能齐全、性能优异且用户体验良好的表格组件并非易事。我们需要考虑排序、过滤、分页、编辑、选择、可访问性等诸多复杂功能。手动实现这些功能不仅耗时，而且容易出错。

幸运的是，在 React 生态系统中，有许多优秀的表格库可以帮助我们事半功倍。而 Material React Table (MRT) 凭借其强大的功能集、与 Material UI 的无缝集成以及基于 TanStack Table（前身为 React Table）的坚实基础，成为了构建专业级 React 表格的理想选择。

本文将带你深入了解 Material React Table，从基础用法到高级特性，一步步指导你如何利用 MRT 构建出功能强大、高度可定制的 React 数据表格。无论你是刚接触 MRT 的新手，还是希望充分发挥其潜力的开发者，都能从中获益。

为什么选择 Material React Table?

在众多 React 表格库中，为什么 Material React Table 值得关注？主要有以下几个原因：

  1. 基于 TanStack Table: MRT 建立在业界广泛认可的 TanStack Table (v8) 之上。TanStack Table 是一个“Headless”表格库，它提供了表格的核心逻辑（数据处理、排序、过滤、分组等），但不提供任何 UI 渲染。MRT 利用 TanStack Table 的强大逻辑，并结合 Material UI 组件进行渲染，这意味着你获得了坚实的逻辑基础和美观统一的 UI 风格。
  2. 与 Material UI 深度集成: 如果你的项目已经使用了 Material UI，那么 MRT 将是你的不二之选。它完全遵循 Material Design 指南，所有组件都使用 Material UI 实现，保证了表格与你应用整体风格的一致性。
  3. 功能丰富: MRT 开箱即用地提供了大量企业级表格所需的功能，包括：
    • 客户端和服务器端分页、排序、过滤。
    • 全局搜索。
    • 列隐藏/显示、列调整大小、列拖拽排序。
    • 行选择。
    • 行扩展（详情面板）。
    • 单元格编辑、行编辑。
    • 分组、聚合。
    • 虚拟化（处理海量数据）。
    • 固定列（Sticky columns）。
    • 可自定义的工具栏、头部、尾部和单元格渲染。
    • 导出数据（CSV, Excel）。
    • 完善的可访问性支持。
  4. 高度可定制: 尽管提供了丰富的功能，MRT 依然提供了极高的灵活性。你可以轻松地自定义表格的各个部分，包括样式、渲染逻辑、交互行为等。
  5. 活跃的社区和良好的文档: MRT 拥有一个活跃的社区，并且官方文档详细且示例丰富，这为学习和使用提供了极大的便利。

前置条件

在开始使用 Material React Table 之前，请确保你的项目满足以下条件：

  • 已安装 Node.js 和 npm 或 yarn。
  • 已搭建一个 React 项目（如使用 Create React App, Next.js, Vite 等）。
  • 已在项目中安装并配置好 Material UI v5 或更高版本。如果你还没有安装 Material UI，可以参考其官方文档进行安装。

入门：安装与基本使用

首先，我们需要将 Material React Table 安装到项目中：

“`bash
npm install material-react-table @mui/material @emotion/react @emotion/styled

或

yarn add material-react-table @mui/material @emotion/react @emotion/styled
“`

请注意，MRT 依赖于 @mui/material 以及 @emotion/react 和 @emotion/styled (Material UI v5 的默认样式引擎)，所以确保它们也被安装。

接下来，我们创建一个简单的表格组件。一个基本的 MRT 表格需要两个核心配置：columns 和 data。

columns 数组定义了表格的列，每个对象代表一列，通常包含：
* accessorKey 或 accessorFn: 定义如何从数据对象中获取该列的值。accessorKey 用于直接访问对象属性（如 'name'），accessorFn 允许你提供一个函数来计算值或访问嵌套属性。
* header: 定义列头显示的文本。

data 数组是一个对象数组，每个对象代表表格中的一行数据。

这是一个基础示例：

“`jsx
import React, { useMemo } from ‘react’;
import MaterialReactTable from ‘material-react-table’;

// 示例数据类型定义 (可选，但推荐使用 TypeScript)
// interface Person {
// firstName: string;
// lastName: string;
// age: number;
// address: string;
// state: string;
// }

const BasicTable: React.FC = () => {
// 定义列配置
const columns = useMemo(
() => [
{
accessorKey: ‘firstName’, // 直接访问数据对象的 ‘firstName’ 属性
header: ‘名’,
},
{
accessorKey: ‘lastName’, // 直接访问数据对象的 ‘lastName’ 属性
header: ‘姓’,
},
{
accessorKey: ‘age’,
header: ‘年龄’,
},
{
accessorKey: ‘address’,
header: ‘地址’,
},
{
accessorKey: ‘state’,
header: ‘省份’,
},
],
[] // 依赖项为空，确保 columns 只有在组件挂载时创建一次
);

// 示例数据
const data = useMemo(
() => [
{
firstName: ‘张’,
lastName: ‘三’,
age: 30,
address: ‘北京市朝阳区’,
state: ‘北京’,
},
{
firstName: ‘李’,
lastName: ‘四’,
age: 25,
address: ‘上海市浦东新区’,
state: ‘上海’,
},
{
firstName: ‘王’,
lastName: ‘五’,
age: 35,
address: ‘广州市天河区’,
state: ‘广东’,
},
// … 更多数据
],
[] // 依赖项为空，确保 data 只有在组件挂载时创建一次
);

return (

);
};

export default BasicTable;
“`

将这个组件渲染到你的应用中，你将看到一个带有基本数据的表格。默认情况下，MRT 已经为你提供了基本的样式和结构。

核心功能详解

仅仅显示数据显然不够。Material React Table 提供了丰富的功能，让你的表格更具交互性和实用性。接下来，我们将详细探讨一些最常用的核心功能。

1. 分页 (Pagination)

分页是处理大量数据时必不可少的功能。MRT 支持客户端分页和服务器端分页。

客户端分页: 这是默认行为。MRT 会一次性接收所有数据，然后在前端进行分页处理。适用于数据量适中的情况。

只需通过 props 开启即可：

jsx
<MaterialReactTable
columns={columns}
data={data}
enablePagination // 开启分页 (默认开启)
// muiPaginationProps={{ rowsPerPageOptions: [5, 10, 20] }} // 可选：自定义每页显示条数选项
/>

服务器端分页: 当数据量非常大时（几千、几万甚至更多），一次性加载所有数据到客户端会导致性能问题。此时，你应该采用服务器端分页，只加载当前页所需的数据。

使用服务器端分页时，你需要：
* 维护分页相关的状态：当前页码 (pageIndex) 和每页条数 (pageSize)。
* 监听分页状态的变化，并在状态改变时从服务器获取新数据。
* 将这些状态和总数据条数 (rowCount) 传递给 MRT。

“`jsx
import React, { useEffect, useMemo, useState } from ‘react’;
import MaterialReactTable from ‘material-react-table’;

// 模拟一个异步获取数据的函数
const fetchData = async ({ pageIndex, pageSize, sortBy, globalFilter }) => {
// 实际应用中，这里会调用你的后端API
// 示例：构建API请求参数，包含分页、排序、过滤信息
console.log(‘Fetching data with:’, { pageIndex, pageSize, sortBy, globalFilter });

// 模拟延迟和数据返回
await new Promise(resolve => setTimeout(resolve, 500));

// 假设你的API返回一个包含 data 数组和 totalRowCount 的对象
const mockData = [
// … 你的完整数据集 (在实际服务器端，只返回当前页数据)
{ firstName: ‘张’, lastName: ‘三’, age: 30, address: ‘地址1’, state: ‘北京’ },
{ firstName: ‘李’, lastName: ‘四’, age: 25, address: ‘地址2’, state: ‘上海’ },
{ firstName: ‘王’, lastName: ‘五’, age: 35, address: ‘地址3’, state: ‘广东’ },
{ firstName: ‘赵’, lastName: ‘六’, age: 28, address: ‘地址4’, state: ‘浙江’ },
{ firstName: ‘孙’, lastName: ‘七’, age: 32, address: ‘地址5’, state: ‘江苏’ },
// … 假设总共有 100 条数据
];

// 在模拟中，我们需要手动处理分页、排序、过滤来模拟服务器行为
let filteredData = […mockData];

// 模拟全局过滤
if (globalFilter) {
filteredData = filteredData.filter(item =>
Object.values(item).some(value =>
String(value).toLowerCase().includes(globalFilter.toLowerCase())
)
);
}

// 模拟排序
if (sortBy && sortBy.length > 0) {
sortBy.forEach(sort => {
const { id, desc } = sort;
filteredData.sort((a, b) => {
const valueA = a[id];
const valueB = b[id];
if (valueA < valueB) return desc ? 1 : -1;
if (valueA > valueB) return desc ? -1 : 1;
return 0;
});
});
}

const totalRowCount = filteredData.length;
const paginatedData = filteredData.slice(pageIndex * pageSize, (pageIndex + 1) * pageSize);

return {
data: paginatedData,
meta: {
totalRowCount: totalRowCount,
},
};
};

const ServerSidePaginationTable: React.FC = () => {
const columns = useMemo(
() => [
{ accessorKey: ‘firstName’, header: ‘名’ },
{ accessorKey: ‘lastName’, header: ‘姓’ },
{ accessorKey: ‘age’, header: ‘年龄’ },
{ accessorKey: ‘address’, header: ‘地址’ },
{ accessorKey: ‘state’, header: ‘省份’ },
],
[]
);

// 表格状态
const [data, setData] = useState([]);
const [isError, setIsError] = useState(false);
const [isLoading, setIsLoading] = useState(false);
const [isRefetching, setIsRefetching] = useState(false);
const [rowCount, setRowCount] = useState(0);

// MRT 需要控制和监听的状态
const [columnFilters, setColumnFilters] = useState([]); // 列过滤
const [globalFilter, setGlobalFilter] = useState(”); // 全局过滤
const [sorting, setSorting] = useState([]); // 排序
const [pagination, setPagination] = useState({ // 分页
pageIndex: 0,
pageSize: 10,
});

// 当分页、排序、过滤状态改变时，获取数据
useEffect(() => {
const fetchDataFn = async () => {
if (data.length === 0) { // 首次加载
setIsLoading(true);
} else { // 后续状态改变触发的加载
setIsRefetching(true);
}

  try {
    // 在实际应用中，你需要将 columnFilters, globalFilter, sorting 的状态
    // 转换成你的后端 API 所需的格式，并传递给 fetchData
    const response = await fetchData({
        pageIndex: pagination.pageIndex,
        pageSize: pagination.pageSize,
        // 将 MRT 的排序状态转换为后端所需的格式，例如：[{ id: 'firstName', desc: false }]
        sortBy: sorting,
        // 将 MRT 的全局过滤状态传递给后端
        globalFilter: globalFilter,
        // 如果需要列过滤，也需要传递 columnFilters 给后端
        // columnFilters: columnFilters
    });

    setData(response.data);
    setRowCount(response.meta.totalRowCount);
  } catch (error) {
    setIsError(true);
    console.error(error);
  } finally {
    setIsLoading(false);
    setIsRefetching(false);
  }
};

fetchDataFn();

// 依赖项：当这些状态改变时，重新获取数据
}, [pagination.pageIndex, pagination.pageSize, columnFilters, globalFilter, sorting]);

return (
<MaterialReactTable
columns={columns}
data={data} // 显示当前页的数据
manualPagination // 手动处理分页（开启服务器端分页的关键）
rowCount={rowCount} // 总数据条数
onPaginationChange={setPagination} // 监听分页变化
onColumnFiltersChange={setColumnFilters} // 监听列过滤变化 (如果服务器端处理列过滤)
onGlobalFilterChange={setGlobalFilter} // 监听全局过滤变化 (如果服务器端处理全局过滤)
onSortingChange={setSorting} // 监听排序变化 (如果服务器端处理排序)

  state={{ // 将状态传递给 MRT，以便它正确显示分页、过滤、排序UI
    isLoading,
    isSaving: isRefetching, // MRT 内部使用 isSaving 来表示非首次加载中的状态
    showAlertBanner: isError, // 错误时显示提示
    pagination,
    columnFilters,
    globalFilter,
    sorting,
  }}
  muiToolbarAlertBannerProps={ // 自定义错误提示样式
    isError
      ? {
          color: 'error',
          children: '获取数据失败，请稍后重试',
        }
      : undefined
  }
/>

);
};

export default ServerSidePaginationTable;
“`

这个示例展示了服务器端分页的基本模式：利用 React 的 useState 和 useEffect 管理表格状态，并在状态变化时触发数据获取。manualPagination prop 告诉 MRT 不要自行处理分页，而是依赖外部提供的 pagination 状态和 rowCount。同时，通过 onPaginationChange 等回调函数，我们可以获取到用户在 UI 上进行的操作（如点击下一页、改变每页条数），从而更新状态并触发新的数据请求。

2. 排序 (Sorting)

排序让用户可以按照某一列的值升序或降序排列数据。MRT 支持客户端和服务器端排序，以及多列排序。

客户端排序: 默认行为。MRT 在接收到所有数据后在客户端进行排序。

jsx
<MaterialReactTable
columns={columns}
data={data}
enableSorting // 开启排序 (默认开启)
enableMultiSort // 开启多列排序 (Ctrl/Cmd + 点击列头)
/>

在列定义中，你可以通过 enableSorting: false 禁止某一列排序。

服务器端排序: 与服务器端分页类似，当数据量大时，排序逻辑也应放在服务器端。

如上文服务器端分页示例所示，你需要：
* 维护一个 sorting 状态，其格式通常是 { id: 'columnId', desc: boolean } 的数组。
* 监听 onSortingChange 事件，更新 sorting 状态。
* 在数据获取逻辑中，将 sorting 状态传递给后端 API。
* 设置 manualSorting prop 为 true。

3. 过滤 (Filtering)

过滤允许用户根据特定条件筛选数据显示。MRT 提供了强大的过滤功能，包括全局过滤和列过滤。

全局过滤: 通常是一个搜索框，用户输入的关键词会与表格所有列的数据进行匹配。

jsx
<MaterialReactTable
columns={columns}
data={data}
enableGlobalFilter // 开启全局过滤 (默认开启)
// muiSearchTextFieldProps={{ placeholder: '搜索所有列...' }} // 可选：自定义搜索框样式
/>

列过滤: 为每一列提供一个输入框或选择框，用户可以针对该列设置过滤条件。

jsx
<MaterialReactTable
columns={columns}
data={data}
enableColumnFilters // 开启列过滤 (默认开启)
/>

默认情况下，MRT 会根据列的数据类型尝试使用合适的过滤方法（如文本包含、数字范围等）。你也可以通过在列定义中设置 filterFn 或 filterVariant 来自定义过滤行为和 UI。

服务器端过滤: 与分页和排序一样，大数据的过滤也应在服务器端完成。

  • 维护 columnFilters (数组) 和 globalFilter (字符串) 状态。
  • 监听 onColumnFiltersChange 和 onGlobalFilterChange 事件，更新状态。
  • 将这些状态传递给后端 API。
  • 设置 manualFiltering prop 为 true。

服务器端分页示例中已经包含了如何监听和传递 globalFilter 和 columnFilters 的状态。

4. 行选择 (Row Selection)

允许用户选择表格中的一行或多行。这在需要对选定行执行操作时非常有用（如批量删除、导出）。

“`jsx
import React, { useMemo, useState } from ‘react’;
import MaterialReactTable from ‘material-react-table’;

const RowSelectionTable: React.FC = () => {
const columns = useMemo(/ … /);
const data = useMemo(/ … /);

const [rowSelection, setRowSelection] = useState({}); // 存储选中的行状态

// rowSelection 是一个对象，键是行的ID（默认是索引），值是 true

// 可以根据 rowSelection 状态获取选中的行数据
const selectedRows = useMemo(
() => data.filter((_, index) => rowSelection[index]),
[data, rowSelection]
);

console.log(‘Selected Rows:’, selectedRows);

return (

);
};
“`

你可以通过 enableMultiRowSelection={false} 禁用多选，只允许单选。通过 enableRowSelection: false 在列定义中禁用特定列的行选择。

5. 行扩展 (Row Expansion)

允许用户点击一行，展开显示更多详细信息，通常是一个详情面板。这对于在主表格中只显示关键信息，而在需要时查看完整细节非常有用。

“`jsx
import React, { useMemo } from ‘react’;
import MaterialReactTable from ‘material-react-table’;
import { Typography, Box } from ‘@mui/material’; // 示例：使用 Material UI 组件展示详情

const RowExpansionTable: React.FC = () => {
const columns = useMemo(/ … /);
const data = useMemo(/ … /);

return (
( // 定义详情面板的渲染内容

详细信息
地址: {row.original.address}
省份: {row.original.state}
{/ 你可以根据 row.original 访问当前行的所有数据 /}

)}
/>
);
};
“`

renderDetailPanel prop 接收一个对象作为参数，其中 row 属性包含了当前行的所有信息，row.original 就是原始数据对象。

6. 编辑 (Editing)

MRT 提供了多种编辑模式，包括单元格编辑和行编辑。这使得表格不仅仅是数据展示，还能用于数据录入和修改。

行编辑: 用户点击编辑按钮后，整行进入编辑状态，所有单元格变成输入框。编辑完成后，点击保存或取消。

“`jsx
import React, { useMemo, useState, useCallback } from ‘react’;
import MaterialReactTable from ‘material-react-table’;
import { Button, Box, Dialog, DialogActions, DialogContent, DialogContentText, DialogTitle } from ‘@mui/material’; // 示例：使用 Material UI 组件

// 假设一个保存函数，模拟异步操作
const saveRowData = async (rowData) => {
console.log(“Saving row data:”, rowData);
return new Promise(resolve => setTimeout(() => resolve(rowData), 500)); // 模拟保存延迟
};

const RowEditingTable: React.FC = () => {
const [data, setData] = useState([
{ firstName: ‘张’, lastName: ‘三’, age: 30, address: ‘地址1’, state: ‘北京’ },
{ firstName: ‘李’, lastName: ‘四’, age: 25, address: ‘地址2’, state: ‘上海’ },
{ firstName: ‘王’, lastName: ‘五’, age: 35, address: ‘地址3’, state: ‘广东’ },
]);

// 跟踪正在编辑的行 (可选，但常见于自定义保存逻辑)
const [isSaving, setIsSaving] = useState(false);

const columns = useMemo(
() => [
{ accessorKey: ‘firstName’, header: ‘名’, muiTableBodyCellEditTextFieldProps: { required: true } },
{ accessorKey: ‘lastName’, header: ‘姓’, muiTableBodyCellEditTextFieldProps: { required: true } },
{ accessorKey: ‘age’, header: ‘年龄’, muiTableBodyCellEditTextFieldProps: { type: ‘number’, required: true } },
{ accessorKey: ‘address’, header: ‘地址’ },
{ accessorKey: ‘state’, header: ‘省份’ },
],
[]
);

// 保存编辑行的回调函数
const handleSaveRowEdits = useCallback(
async ({ exitEditingMode, row, values }) => {
// values 包含编辑后的数据
console.log(“Edited values:”, values);
console.log(“Original row:”, row.original);

      // 可以在这里进行数据校验
      if (!values.firstName || !values.lastName || !values.age) {
          alert('姓名和年龄是必填项！');
          return; // 阻止保存
      }

      setIsSaving(true);
      try {
          // 模拟调用API保存数据
          await saveRowData(values);

          // 更新本地 state 中的数据（通常你会从API重新获取数据或根据API返回更新）
          setData(prevData => {
              const newData = [...prevData];
              // 根据行的唯一标识（如果数据中有ID）或索引找到需要更新的行
              // 在这个例子中，我们使用索引 row.index
              newData[row.index] = values; // 直接替换整行数据
              return newData;
          });

          exitEditingMode(); // 退出编辑模式
      } catch (error) {
          console.error("保存数据失败:", error);
          // 可以显示错误提示给用户
      } finally {
          setIsSaving(false);
      }
  },
  [data] // 依赖 data 确保能正确更新 state

);

// 取消编辑行的回调函数
const handleCancelRowEdits = () => {
    console.log("Editing cancelled.");
    // 如果有需要，可以在这里处理取消逻辑
};

return (
( // 自定义每行的操作按钮

{/ 设置当前行为编辑状态 /}

)}
/>
);
};
“`

在列定义中，你可以通过 muiTableBodyCellEditTextFieldProps 为编辑状态下的输入框设置 Material UI 的 TextField props，例如设置 type、required 等。

onEditingRowSave 回调函数接收一个包含 row（原始行信息）、values（编辑后的值）和一个 exitEditingMode 函数的对象。你需要在函数中处理数据保存逻辑（通常是调用 API），并在成功后调用 exitEditingMode() 退出编辑状态。

单元格编辑: 用户点击单元格后，该单元格变成输入框。编辑完成后，按 Enter 或点击外部区域保存。

只需将 editingMode 设置为 "cell" 或 "table"。"table" 模式下，用户可以直接点击任何可编辑的单元格进行编辑，而无需先点击编辑按钮。

jsx
<MaterialReactTable
columns={columns}
data={data}
enableEditing
editingMode="cell" // 或 "table"
onEditingCellSave={({ cell, values }) => {
// 处理单元格保存逻辑
console.log(`Cell saved: ${cell.id}`, values);
// 更新 data state
}}
/>
onEditingCellSave 回调函数接收一个包含 cell（被编辑的单元格信息）和 values（新值）的对象。

7. 自定义渲染与样式

Material React Table 提供了极其灵活的自定义选项，你可以控制表格的每一个部分，包括：

  • 列头 (Header): 使用 header prop 或 Header prop (更灵活，可以渲染 JSX) 在列定义中自定义列头内容。
  • 单元格 (Cell): 使用 Cell prop 在列定义中自定义单元格内容的渲染。你可以根据需要渲染不同的组件，如按钮、图片、链接等。
  • 工具栏 (Toolbar): 使用 renderTopToolbarCustomActions 和 renderBottomToolbarCustomActions prop 在顶部和底部工具栏添加自定义内容（如按钮、下拉菜单）。
  • 行操作 (Row Actions): 使用 renderRowActions prop 为每一行添加操作按钮或其他组件（如编辑、删除按钮）。
  • 样式: MRT 利用 Material UI 的样式系统。你可以通过各种 mui...Props prop（如 muiTableContainerProps, muiTableHeadCellProps, muiTableBodyRowProps, muiTableBodyCellProps 等）向对应的 Material UI 组件传递 props，从而自定义样式。你也可以使用 sx prop 或 className 进行更细粒度的控制。

自定义单元格渲染示例:

“`jsx
import { Button } from ‘@mui/material’;

// 在 columns 定义中…
{
accessorKey: ‘website’,
header: ‘个人网站’,
Cell: ({ cell }) => ( // 使用 Cell prop 自定义渲染

),
}
“`

自定义工具栏操作示例:

“`jsx
import { Button, Box } from ‘@mui/material’;
import FileDownloadIcon from ‘@mui/icons-material/FileDownload’; // 假设已安装 @mui/icons-material

// 导出数据的函数
const handleExportData = (data) => {
console.log(“Exporting data:”, data);
// 实现导出逻辑，例如生成CSV或Excel文件
alert(“导出功能待实现”);
};

( // 接收 table 实例，可以访问 table 的很多状态和方法





)}
/>
“`

renderTopToolbarCustomActions 和 renderBottomToolbarCustomActions 回调函数会接收 table 实例，通过它可以获取到表格的很多内部状态，比如当前选中的行 (table.getSelectedRowModel())、过滤后的行 (table.getFilteredRowModel()) 等，这让你能够实现更复杂的自定义操作。

8. 固定列 (Sticky Columns)

对于列数较多的表格，固定某些列（通常是第一列或最后一列操作列）可以极大地提升用户体验，即使水平滚动，这些重要列也始终可见。

jsx
<MaterialReactTable
columns={columns}
data={data}
enableStickyHeader // 固定头部
enableStickyFooter // 固定尾部 (如果使用)
enableColumnPinning // 开启列固定功能
/>

在列定义中，设置 pinned: 'left' 或 pinned: 'right' 来固定某一列：

jsx
const columns = useMemo(
() => [
{
accessorKey: 'firstName',
header: '名',
pinned: 'left', // 固定在左侧
},
// ... 其他列
{
id: 'actions', // 操作列通常没有 accessorKey
header: '操作',
Cell: ({ row, table }) => ( /* ... */ ),
size: 150,
enableSorting: false,
enableColumnFilter: false,
enableColumnDragging: false,
pinned: 'right', // 固定在右侧
}
],
[]
);

9. 虚拟化 (Virtualization)

当表格数据量极其巨大（几万、几十万甚至更多）时，即使使用服务器端分页，一次性渲染几百条甚至几千条 DOM 元素也可能导致性能瓶颈。虚拟化是一种优化技术，它只渲染当前用户在视口中可见的行和少量上下缓冲区的行，从而显著减少 DOM 元素的数量。

Material React Table 结合 TanStack Table 的特性，支持行虚拟化。

jsx
<MaterialReactTable
columns={columns}
data={data} // 如果使用服务器端虚拟化，data 仍然只包含当前视口 + 缓冲区的少量数据
enableRowVirtualization // 开启行虚拟化
// rowVirtualizerInstanceRef={rowVirtualizerInstanceRef} // 如果需要手动控制滚动等，可以获取虚拟化实例
// rowVirtualizerOptions={{ overscan: 10 }} // 可选：配置虚拟化选项，如缓冲区大小
/>

虚拟化通常与服务器端数据获取结合使用。在使用虚拟化时，你通常需要根据用户的滚动位置来动态加载更多数据（无限滚动）。这比传统的服务器端分页稍微复杂一些，需要更精细地控制数据加载和表格状态。MRT 提供了一些 hooks 和 ref 来帮助实现这一点。

10. 国际化 (Localization)

MRT 内置了国际化支持，你可以轻松地将表格中的文本（如分页信息、过滤文本、工具栏提示等）翻译成不同的语言。

“`jsx
import { MaterialReactTable, MRT_Localization_ZH_CN } from ‘material-react-table’;


“`

MRT 提供了多种语言的内置本地化文件（MRT_Localization_...），你也可以创建自己的本地化对象。

11. 可访问性 (Accessibility)

Material React Table 基于语义化的 HTML 元素和 Material UI 组件构建，并且遵循 ARIA (Accessible Rich Internet Applications) 规范，提供了良好的可访问性支持。它支持键盘导航、屏幕阅读器等，确保残障用户也能方便地使用表格。作为开发者，在使用自定义渲染时，也应该注意保持良好的语义和 ARIA 属性。

高级应用与技巧

  • 复杂的 accessorFn: 当你的数据结构比较复杂，或者需要计算得出列值时，accessorFn 非常有用。例如，将名和姓组合成全名：

    jsx
    {
    accessorFn: (row) => `${row.firstName} ${row.lastName}`,
    header: '全名',
    id: 'fullName', // 使用 accessorFn 时，通常需要指定一个唯一的 id
    enableColumnFilter: false, // 计算列通常禁用过滤和排序，除非你自己实现逻辑
    enableSorting: false,
    }

  • 自定义过滤 UI 和逻辑: 除了默认的文本输入框，你可以通过 filterVariant prop 选择不同的内置过滤 UI（如 select, multi-select, range 等），或者通过 Filter prop 完全自定义过滤 UI 和逻辑。

  • 条件样式: 根据数据内容动态改变单元格或行的样式。这通常通过在 muiTableBodyRowProps 或 muiTableBodyCellProps 中使用函数实现：

    jsx
    <MaterialReactTable
    // ... 其他 props
    muiTableBodyCellProps={({ cell }) => ({
    sx: {
    backgroundColor: cell.column.id === 'age' && (cell.getValue() as number) > 30 ? 'rgba(255, 0, 0, 0.1)' : undefined,
    fontWeight: cell.column.id === 'firstName' ? 'bold' : 'normal',
    },
    })}
    />

  • Context Menu (右键菜单): MRT 提供了 muiTableBodyRowProps 和 muiTableBodyCellProps 的 onContextMenu 事件，你可以利用它来实现右键菜单功能。

  • 拖拽调整列宽和列顺序: 通过 enableColumnResizing 和 enableColumnDragging 可以分别开启列宽调整和列顺序拖拽功能。

潜在的挑战与注意事项

  • 数据结构: 合理设计你的数据结构对于高效使用 MRT 至关重要。尽量保持扁平化结构，或者使用 accessorFn 处理嵌套数据。
  • 性能优化: 对于非常大的数据集，理解客户端和服务器端数据处理的区别，并适时启用虚拟化是关键。避免在渲染函数中执行昂贵的计算。
  • 状态管理: 当使用服务器端数据处理或复杂交互时，组件的状态管理会变得复杂。合理组织你的 useState 和 useEffect Hooks，或者考虑使用状态管理库（如 Redux, Zustand, Recoil）来管理表格相关的状态。
  • 自定义的复杂度: 尽管 MRT 提供了高度定制性，但完全自定义渲染或实现复杂的交互逻辑有时会需要深入理解 TanStack Table 和 Material UI 的工作原理。

总结

Material React Table 是一个功能强大、灵活且与 Material UI 无缝集成的 React 表格库。它基于 TanStack Table 的坚实基础，提供了客户端和服务器端分页、排序、过滤、编辑、选择、扩展、虚拟化等丰富功能。通过详细了解其核心 props 和自定义渲染能力，你可以轻松构建出满足各种需求的复杂数据表格。

从基础的数据展示到企业级的交互功能，Material React Table 为你提供了构建强大 React 表格所需的一切工具。结合 Material UI 的美观和 TanStack Table 的高性能逻辑，MRT 能够帮助你显著提高开发效率，并为用户提供卓越的数据交互体验。

开始探索 Material React Table 的文档，尝试不同的功能组合，你将发现它在构建复杂数据界面方面的巨大潜力。 Happy Coding!

发表评论

您的邮箱地址不会被公开。 必填项已用 * 标注

滚动至顶部