如何在Material React Table中为指定列单独设置筛选功能

使用Material React Table时，点击“First Name”列的筛选选项后，“Id”、“Last Name”和“Full Name”列也都显示了筛选功能，如何仅为特定列开启筛选功能，其余列保持原有状态？

用户代码示例：

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

function Table() {
  const [data, setData] = useState([]);

  const columns = [
    { header: "id", accessorKey: "id" },
    { header: "First Name", accessorKey: "FirstName" },
    { header: "Last Name", accessorKey: "LastName" },
    { header: "Full Name", accessorKey: "FullName" },
  ];
  useEffect(() => {
    fetch("http://localhost:3030/getAllData")
      .then((resp) => resp.json())
      .then((resp) => {
        setData(resp["data"]);
      });
  }, []);
  return (
    <div>
      <MaterialReactTable
        data={data}
        columns={columns}    
      />
    </div>
  );
}

export default Table;

Material React Table默认给所有列开启筛选功能，要实现仅特定列可筛选，有两种可行方式：

方式一：全局关闭筛选，为指定列单独开启 #

在MaterialReactTable组件中设置enableColumnFilters={false}全局禁用筛选，再给需要开启筛选的列配置enableColumnFilter: true：

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

function Table() {
  const [data, setData] = useState([]);

  const columns = [
    { header: "id", accessorKey: "id" },
    { header: "First Name", accessorKey: "FirstName", enableColumnFilter: true }, //仅该列开启筛选
    { header: "Last Name", accessorKey: "LastName" },
    { header: "Full Name", accessorKey: "FullName" },
  ];
  useEffect(() => {
    fetch("http://localhost:3030/getAllData")
      .then((resp) => resp.json())
      .then((resp) => {
        setData(resp["data"]);
      });
  }, []);
  return (
    <div>
      <MaterialReactTable
        data={data}
        columns={columns}
        enableColumnFilters={false} //全局关闭筛选
      />
    </div>
  );
}

export default Table;

方式二：为不需要筛选的列单独关闭 #

保持全局筛选默认开启，给不需要筛选的列配置enableColumnFilter: false：

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

function Table() {
  const [data, setData] = useState([]);

  const columns = [
    { header: "id", accessorKey: "id", enableColumnFilter: false }, //关闭该列筛选
    { header: "First Name", accessorKey: "FirstName" }, //默认开启筛选
    { header: "Last Name", accessorKey: "LastName", enableColumnFilter: false }, //关闭该列筛选
    { header: "Full Name", accessorKey: "FullName", enableColumnFilter: false }, //关闭该列筛选
  ];
  useEffect(() => {
    fetch("http://localhost:3030/getAllData")
      .then((resp) => resp.json())
      .then((resp) => {
        setData(resp["data"]);
      });
  }, []);
  return (
    <div>
      <MaterialReactTable
        data={data}
        columns={columns}    
      />
    </div>
  );
}

export default Table;

两种方式都能实现仅“First Name”列开启筛选、其余列无筛选功能的效果，可根据实际场景选择。

内容的提问来源于stack exchange，提问作者Gourav Srivastava