如何重置行索引上的过滤值在反应表?

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]
);