过滤 React MUI-Datatables 时不确定复选框不起作用

Question

信息

我有一个项目正在使用 React、Redux 和 MUI-Datatables。这个项目的简单演示可以在CodeSandbox找到。

在这个应用程序中，有两个主要组件，一个地图和一个数据表。两者通过 redux 进行通信，因此当在表格中选择一行时，地图中的相应圆圈会突出显示，反之亦然。

问题

我的问题是表格上的不确定切换 selectAll 复选框。当用户选择一行然后应用过滤器时，selectAll 复选框会显示“-”不确定符号，但单击它时没有任何反应。

重建步骤：

• 用户选择表格的第一行，circle1。
• 用户在表格的右上角打开过滤器对话框。
• 从过滤器对话框的标记下拉菜单中，用户选择 circle3 作为过滤器值。
• 用户关闭过滤器对话框
• 用户单击选择行列顶部的全选复选框。它将显示“-”符号。
• 请注意，没有任何变化。未选择或取消选择任何行。

期望的行为：

当用户在表格中选择了一行然后应用过滤器时，selectAll 复选框仍应在第一次单击时选择所有可见行，并在第二次单击时取消选择所有行，与通常方式相同。

代码

直播：CodeSandbox

表格组件：

import React, { useEffect, useState } from "react";
import MUIDataTable from "mui-datatables";

import { connect } from "react-redux";

import { handleSelection } from "./redux";

import circles from "./assets/data/circles";

import { addToOrRemoveFromArray } from "./utils";

// Table component
const Table = ({ handleSelection, selections }) => {
  const [selectionIndexes, setSelectionIndexes] = useState([]);

  // When 'selections' changes in redux store:
  useEffect(() => {
    let indexes = [];
    // Iterate selections:
    selections.forEach((selection) => {
      // Push the index of the selected
      // circle into index arr:
      let index = circles.indexOf(selection);
      indexes.push(index);
    });
    // Set selections to local state hook:
    setSelectionIndexes(indexes);
  }, [selections]);

  // Table options:
  const options = {
    rowsSelected: selectionIndexes, // User provided array of numbers (dataIndexes) which indicates the selected rows
    selectToolbarPlacement: "none",
    selectableRows: "multiple", // Enable selection of multiple rows
    setRowProps: (row, dataIndex, rowIndex) => {
      return {
        style: {
          padding: ".5rem",
          margin: ".5rem auto"
        }
      };
    },
    // When a row(s) is/are selected:
    onRowSelectionChange: (
      currentRowsSelected,
      allRowsSelected,
      rowsSelected
    ) => {
      let temp = [];
      let indexes = [];
      // Iterate rowsSelected:
      rowsSelected.forEach((row) => {
        // Add or remove row index to/from indexes arr:
        indexes = addToOrRemoveFromArray(row, indexes, "indexes");
        // Circle data:
        let circle_data = circles[row];
        // Add or remove circle_data to/from temp arr:
        temp = addToOrRemoveFromArray(circle_data, temp, "temp");
      });
      // Set indexes to local hook:
      setSelectionIndexes(indexes);
      // Send the circle data to redux:
      handleSelection(temp);
    }
  };

  const columns = [
    {
      name: "marker",
      label: "Marker",
      options: {
        filter: true,
        sort: false
      }
    },
    {
      name: "lat",
      label: "Latitude",
      options: {
        filter: true,
        sort: false
      }
    },
    {
      name: "lon",
      label: "Longitude",
      options: {
        filter: true,
        sort: false
      }
    },
    {
      name: "radius",
      label: "Radius",
      options: {
        filter: true,
        sort: false
      }
    }
  ];

  const table_name = `Circle Markers`;

  return (
    <>
      <div style={{ display: "table", tableLayout: "fixed", width: "100%" }}>
        <MUIDataTable
          title={<h3>{table_name}</h3>}
          data={circles}
          columns={columns}
          options={options}
        />
      </div>
    </>
  );
};

const mapStateToProps = (state) => {
  return {
    selections: state.selection.selections
  };
};

const mapDispatchToProps = (dispatch) => {
  return {
    handleSelection: (selections) => dispatch(handleSelection(selections))
  };
};

export default connect(mapStateToProps, mapDispatchToProps)(Table);

如何在选择过滤数据之外的行被选中？

Answer 1

应用过滤器时是否可以取消选择所选行？我做了一个解决方法来满足所需的行为。

直播代码：CodeSandBox

我在 Table.jsx 第 34 行

中添加了额外的代码

onFilterChange: (changedColumn, changedColumnIndex, displayData) => {
  changedColumnIndex.forEach((data, key) => {
    if (Array.isArray(data) && data.length) {
      setSelectionIndexes([]);
    }
  });
},