How can I keep row selection in a React table after a page refresh?

Maintaining row selections in a React table after a page refresh requires persisting the selected row IDs. Here’s how to achieve this using browser storage, such as localStorage or sessionStorage.

1. Storing Selected Row IDs:

- Whenever a row is selected or deselected, update the selected row IDs in your React component's state. Then, persist this state to localStorage or sessionStorage.

2. Retrieving Selected Row IDs on Component Mount:

- When the component mounts or initially loads, retrieve the stored selected row IDs from localStorage or sessionStorage and update the component’s state accordingly. This will re-select the correct rows on page load.

3. Example using localStorage:

Let’s illustrate with a simple example. Assume you have a state variable selectedRows that holds an array of IDs.

import React, { useState, useEffect } from 'react';

function MyTable() {
  const [selectedRows, setSelectedRows] = useState([]);

  useEffect(() => {
    // Load selected rows from localStorage
    const storedRows = localStorage.getItem('selectedRows');
    if (storedRows) {
      setSelectedRows(JSON.parse(storedRows));
    }
  }, []);

  const handleRowSelect = (rowId) => {
    let newSelectedRows;
    if (selectedRows.includes(rowId)) {
      newSelectedRows = selectedRows.filter(id => id !== rowId);
    } else {
      newSelectedRows = [...selectedRows, rowId];
    }
    setSelectedRows(newSelectedRows);
    // Save to localStorage
    localStorage.setItem('selectedRows', JSON.stringify(newSelectedRows));
  };

  //... render the table with checkbox input etc..
}

export default MyTable;

4. Explanation:

- The useEffect hook with an empty dependency array simulates component mount. It attempts to retrieve selectedRows from localStorage.

- The handleRowSelect function is called when a row is selected. It updates the state and saves it to localStorage.

5. Considerations:

- For more complex data, you may want to use a unique ID from the row itself.

- localStorage has storage limitations, so if dealing with large datasets, consider using a backend for more persistent and scalable storage.

- If using session storage instead of localStorage, just use sessionStorage.setItem and sessionStorage.getItem to persist selection just for the current browser session.

By implementing this method, you will ensure that row selections are maintained even after page refreshes, improving user experience.

Learn more about this