CODEWITHSUNDEEP
javascriptreactjsreact-table
Ricardo Sanchez
Ricardo Sanchez

Reputation: 5167

How to reset row indexes on filtered values in React-Table?

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.

Upvotes: 0

Views: 1043

Answers (1)

Erfan HosseinPoor
Erfan HosseinPoor

Reputation: 1077

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

Upvotes: 1

Related Questions