Aligning rows between tables with React


In one of my recent projects, I faced the problem of having to visually align corresponding rows between multiple HTML tables to make them behave as if they were one. These tables contained rows of content to be compared with the corresponding rows at the same index in the other tables. Unfortunately, some of this content could be larger than others, causing the tables to become unaligned at some point. The goal was then to make the tables align dynamically with respect to the larger content as outlined in the two pictures below.

how it looks
👆 how it looks

how it should look like 👇
how it should look like

After a bit of googling thinking hard I found a relatively simple way to solve it with React using a combination of createRef , useLayoutEffect and clientHeight .

Basically, the idea is to assign a ref to each row and - inside useLayoutEffect, just before the browser repaints the screen - determine the row with the tallest height between all tables at the same index by examining the clientHeight property. Then, assign this maximum height table-wide to all rows with the same index.

So, let’s create the refs for the rows in each table,

const rows = content => => ({ data, ref: createRef() }));

const tables = [
  rows(["content", "content", "content"]),
  rows(["content", "so much many more large content", "content"])

link them to their corresponding table row

{ => (
      { => (
        <tr ref={row.ref}>

and find the row with the tallest height between all rows at the same index and adapt for all.

useLayoutEffect(() => {
    for (const i of Array(rowsCount).keys()) {
      const max = Math.max( => table[i].ref.current.clientHeight)
      tables.forEach(table => {
        table[i] = `${max}px`

You can find the fully working example on CodeSandbox by clicking the button below.

edit on codesandbox

Just wanted to share this idea with you real quick.

In my actual project I extended that code a bit to also handle window resize events and shrinking content and was left with a pretty simple yet stable solution. Hit me up if you want more details on how I did that!

Lernen Sie uns kennen

Das sind wir

Wir sind ein Software-Unternehmen mit Hauptsitz in Karlsruhe und auf die Umsetzung von Digitalstrategien durch vernetzte Cloud-Anwendungen spezialisiert. Wir sind Microsoft-Partner und erweitern Standard-Anwendungen bei Bedarf – egal ob Modernisierung, Integration, Implementierung von CRM- oder ERP-Systemen, Cloud Security oder Identity- und Access-Management: Wir unterstützen Sie!

Mehr über uns

Der Objektkultur-Newsletter

Mit unserem Newsletter informieren wir Sie stets über die neuesten Blogbeiträge,
Webcasts und weiteren spannenden Themen rund um die Digitalisierung.

Newsletter abonnieren