如何在 React-Table 中重置过滤值的行索引？

Question

我正在尝试在我的表中实现一个功能，在 React-Table 中应用过滤器后我需要当前行索引。

下面的示例显示了问题，通过单击单选按钮，特定的行索引被选中，并显示在表格的底部。

如果应用了过滤器并且用户选择了第一行或第二行，则显示的索引是原始未过滤数据的索引。

示例： https://codesandbox.io/s/react-table-window-multiple-selection-tools-qsth1

应用过滤器后，显示 4 个结果，然后通过选择第一行，索引应为 0。

希望这是有道理的。

Answer 1

您没有提供所有场景，但我认为它可以正常工作，请检查并告诉我结果。

const ColumnFilter = ({ column }, setSelectedRadio) => {
  const { filterValue, setFilter } = column;
  return (
    <input
      style={{ width: "100%" }}
      value={filterValue || ""}
      onChange={(e) => {
        setFilter(e.target.value);
        setSelectedRadio([]);
      }}
    />
  );
};


const RadioCheckbox = ({ cell, selectedRadio, handleChange, filteredRows }) => {
  let itemValue;
  filteredRows.map((item, index) =>
    item.id === cell.row.id ? (itemValue = index.toString()) : null
  );

  return (
    <input
      name="radio-selection"
      type="radio"
      onClick={handleChange}
      value={itemValue}
      defaultChecked={selectedRadio.includes(itemValue)}
    />
  );
};

 // In App function      
  const columns = React.useMemo(
    () => [
      {
        id: "radio",
        Header: "on/off",
        Cell: (props) =>
          notAllowedRows.includes(props.cell.row.index) ? null : (
            <div>
              <RadioCheckbox
                cell={props.cell}
                filteredRows={props.filteredRows}
                selectedRadio={selectedRadio}
                handleChange={handleSelectedRadioChange}
              />
            </div>
          ),
        width: 60,
        Filter: (props) => ColumnFilter(props, setSelectedRadio)
      },
      {
        Header: "Row Index",
        accessor: (row, i) => i,
        width: 95,
        Filter: (props) => ColumnFilter(props, setSelectedRadio)
      },
      {
        Header: "First Name",
        accessor: "firstName",
        Filter: (props) => ColumnFilter(props, setSelectedRadio)
      },
      {
        Header: "Last Name",
        accessor: "lastName",
        Filter: (props) => ColumnFilter(props, setSelectedRadio)
      },
      {
        Header: "Age",
        accessor: "age",
        width: 50,
        Filter: (props) => ColumnFilter(props, setSelectedRadio)
      },
      {
        Header: "Visits",
        accessor: "visits",
        width: 60,
        Filter: (props) => ColumnFilter(props, setSelectedRadio)
      }
    ],
    [selectedRadio]
  );