Estoy tratando de implementar una función en mi tabla donde necesito el índice de fila actual después de aplicar un filtro en React-Table.
El siguiente ejemplo muestra el problema, al hacer clic en un botón de radio, se selecciona ese índice de fila en particular y se muestra en la parte inferior de la tabla.
Si se aplica un filtro y el usuario selecciona, por ejemplo, la primera o la segunda fila, el índice que se muestra corresponde a los datos originales sin filtrar.
Ejemplo: https://codesandbox.io/s/react-table-window-multiple-selection-tools-qsth1
Después de aplicar un filtro y mostrar 4 resultados, al seleccionar la primera fila, el índice debe ser 0.
Espero que tenga sentido.
No proporcionó todos los escenarios, pero creo que funciona bien, verifíquelo y dígame el resultado.
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] );