How do I scroll to a row in a list of rows using React?

Question

I was using React-virtualized table and it has a very useful prop called scrollToIndex that was doing the job.

However, I had to get rid of the library and use my own JSX.

Now I have a big list of projects as follows:-

      render() {
        return(
          <div className="container">
            {projects.map(project => (
              <ProjectRow
                key={project.id}
                project={project}
              />
          ))}
   )};

Now let's assume projects array has more than 100 projects and I want to scroll initially to the middle of it, let's say project at index 50.

How to do that?

I tried using useRef() and createRef() on the div itself but without any scucess.

Aamin Khan · Accepted Answer · 2021-04-06 20:11:00Z

3

You can use scrollIntoView method to get into the specific position

export default function App() {
  const [projects, setProjects] = useState([]);
  useEffect(() => {
    let p = [];
    for (let i = 0; i < 300; i++) {
      p.push({
        projectId: i,
        projectName: `Project ${i}`
      });
    }
    setProjects(p);
  }, []);

  function scrollTo(position) {
    const project = document.getElementById(position);
    project.scrollIntoView();
  }

  return (
    <div className="App">
      <button onClick={() => scrollTo(50)}>Scroll to 50</button>
      <button onClick={() => scrollTo(150)}>Scroll to 150</button>
      <button onClick={() => scrollTo(250)}>Scroll to 250</button>
      {projects.map((px, index) => (
        <Project
          key={index}
          projectName={px.projectName}
          projectId={px.projectId}
        />
      ))}
    </div>
  );
}

Please find the complete example in the codesandbox https://codesandbox.io/s/happy-jennings-o7tob

answered Apr 6, 2021 at 20:11

Aamin Khan

7374 silver badges12 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Ziko Over a year ago

This works good but I see the CSS gets messed up at the end and the top of my page when the scroll happens. Let me see if I can fix that.

Ziko Over a year ago

this helps with the css issues I found. stackoverflow.com/questions/11039885/… Thanks!

Collectives™ on Stack Overflow

How do I scroll to a row in a list of rows using React?

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related