I'm trying to implement a feature in my table where I need the current row index after a filter is applied in React-Table.
The example below, shows the problem, by clicking on a radio button, that particular row index is selected, and displayed at the bottom of the table.
If a filter is applied and the user selects, say the first or second row, the index shown is of the original unfiltered data.
Example: https://codesandbox.io/s/react-table-window-multiple-selection-tools-qsth1
After a filter is applied, and 4 results are shown, then by selecting the first row, the index should be 0.
Hope that makes sense.
You didn't provide all the scenarios, but I think it works fine, please check it and tell me the result.
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]
);