---
title: "Building a Data Table Component in React"
description: "Building a responsive data table in React requires preserving a rigid grid while accommodating narrow screens, long words, readable alignment, contextual headings, and accessible markup. The Polaris example starts with headings and rows passed as props, then maps them into a stateful table component and a stateless Cell subcomponent. To contain overflow, the table sits in a max-width: 100vw wrapper with horizontal scrolling, while an absolutely positioned, explicitly sized first column remains fixed and later cells receive matching left spacing. Because absolute positioning breaks natural row-height behavior, refs, clientHeight measurements, Math.max, componentDidMount(), and resize handling recalculate and apply the tallest height for each row. The finished component adds a caption and scope attributes for screen readers, and the described result is a responsive, accessible table for comparing and analyzing data, with the full Polaris version adding truncation, totals, sorting, and navigation."
---

# Building a Data Table Component in React

[Shopify](https://yomu.fyi/company/shopify) · Amber Armstrong · Oct 17, 2018

**Type:** Tutorial

## Summary

Building a responsive data table in React requires preserving a rigid grid while accommodating narrow screens, long words, readable alignment, contextual headings, and accessible markup. The Polaris example starts with headings and rows passed as props, then maps them into a stateful table component and a stateless Cell subcomponent. To contain overflow, the table sits in a max-width: 100vw wrapper with horizontal scrolling, while an absolutely positioned, explicitly sized first column remains fixed and later cells receive matching left spacing. Because absolute positioning breaks natural row-height behavior, refs, clientHeight measurements, Math.max, componentDidMount(), and resize handling recalculate and apply the tallest height for each row. The finished component adds a caption and scope attributes for screen readers, and the described result is a responsive, accessible table for comparing and analyzing data, with the full Polaris version adding truncation, totals, sorting, and navigation.

## Context

The component must remain responsive without stacking or collapsing its grid. It also needs to keep product or row context visible during horizontal scrolling, preserve readability for long values, align comparable data, and provide semantic markup for screen readers.

## Approach / What changed

Pass headings and rows into a React table component, render cells through a reusable Cell subcomponent, and wrap the table in a horizontally scrolling container. Fix the first column with explicit sizing and absolute positioning, offset the remaining cells, then measure fixed and remaining cells through a table ref, use Math.max to calculate each row’s tallest height, and update those measurements on mount and window resize. Add a caption and scope attributes for accessibility.

## Takeaways

- A max-width: 100vw wrapper alone does not prevent long words from expanding the table; an overflow-x: auto container keeps horizontal overflow from moving the entire document.
- Fixing the first column with absolute positioning preserves row context during horizontal scrolling, but it removes the browser’s natural equal-height behavior for cells in a row.
- Cell heights must be measured after rendering and recalculated on window resize, using clientHeight and Math.max to apply each row’s tallest value.

## FAQ

### Why keep the first column fixed instead of collapsing the table’s columns?

Collapsing columns works only with a limited number of columns, and the collapsed widths can still exceed the screen. A fixed first column keeps row context visible while the remaining columns scroll horizontally.

### How does the component keep absolutely positioned cells aligned by row height?

The component reads clientHeight from the fixed cell and remaining cells in each row, then uses Math.max to find the tallest value. It stores those values in state and reapplies them to the cells after mounting and whenever the window is resized.

### Which accessibility details does the data table include?

The table adds a caption for screen readers and a scope attribute for each cell. The post identifies these as the two important attributes used to make the data table accessible.

**Tags:** [Accessibility](https://yomu.fyi/topic/accessibility), [React](https://yomu.fyi/topic/react)

- Source: [Shopify](https://shopify.engineering/building-data-table-component-react)
- Source URL: https://shopify.engineering/building-data-table-component-react
- Ingested by Yomu: 2026-09-17T14:06:32.131Z

[Read original post](https://shopify.engineering/building-data-table-component-react)