Material React Table封装组件的columns属性类型定义问题

问题核心是你封装的可复用MRT组件未声明泛型，无法适配不同页面的不同数据类型，导致TypeScript抛出Generic type 'Props' requires 1 type argument(s)错误。以下是具体解决方案：

1. 定义泛型组件Props #

给封装组件的Props添加泛型约束，继承MRT的原生Props并指定数据类型参数：

import { MaterialReactTable, MaterialReactTableProps, ColumnDef } from 'material-react-table';

// T 代表当前表格对应的数据类型，可根据页面需求动态传入
type ReusableMRTProps<T> = Omit<MaterialReactTableProps<T>, 'columns'> & {
  columns: ColumnDef<T>[];
};

这里用Omit剔除原生Props中的columns，再重新定义带类型约束的columns，确保列配置和数据类型严格匹配。

2. 实现泛型可复用组件 #

将组件声明为泛型组件，接收不同页面的T类型参数：

export const ReusableMRT = <T,>(props: ReusableMRTProps<T>) => {
  // 在这里添加通用逻辑，比如默认分页、排序、全局样式等
  return (
    <MaterialReactTable
      {...props}
      // 示例：添加全局通用配置，减少重复代码
      enablePagination={true}
      enableSorting={true}
    />
  );
};

3. 在业务页面中使用 #

针对不同的数据类型（比如EVariablesType），使用组件时传入具体类型参数，并定义对应类型的列配置：

import { ReusableMRT } from './ReusableMRT';
import type { EVariablesType } from './your-types-file';
import { ColumnDef } from 'material-react-table';

// 定义当前页面的列，严格绑定EVariablesType类型
const variablesColumns: ColumnDef<EVariablesType>[] = [
  {
    accessorKey: 'id',
    header: '变量ID',
  },
  {
    accessorKey: 'variableName',
    header: '变量名称',
  },
  // 其他列配置...
];

const VariablesPage = () => {
  const [tableData, setTableData] = useState<EVariablesType[]>([]);

  // 传入EVariablesType作为泛型参数，确保类型匹配
  return (
    <ReusableMRT<EVariablesType>
      columns={variablesColumns}
      data={tableData}
      // 可添加当前页面特有的配置
      title="变量列表"
    />
  );
};

错误原因说明 #

Material React Table的MaterialReactTableProps是泛型类型，必须指定对应的数据类型才能正确推导列和数据的类型关系。之前的封装未声明泛型，导致TypeScript无法确定Props的类型参数，因此抛出错误。通过让组件支持泛型，既保留了复用性，又能适配不同页面的不同数据类型，彻底解决冗余代码和类型错误的问题。

内容的提问来源于stack exchange，提问作者Muhammad Abd-Elsattar