# Building a Data Table Component in React

DevFeed: [Building a Data Table Component in React](<https://devfeed.tech/articles/building-a-data-table-component-in-react-1325.md>)

Original publisher: [Read original article](<https://shopify.engineering/building-data-table-component-react>)

Author: Amber Armstrong

Published: 2018-10-17T17:30:00Z

Content type: tutorial

Language: en

Sources: [Shopify Engineering](<https://devfeed.tech/sources/shopify-engineering.md>), [Shopify Engineering - Shopify Engineering](<https://devfeed.tech/sources/shopify-engineering-shopify-engineering.md>)

Topics: [React](<https://devfeed.tech/topics/react.md>), [Front end](<https://devfeed.tech/topics/frontend.md>), [Design system](<https://devfeed.tech/topics/design-system.md>), [Web Development](<https://devfeed.tech/topics/web-development.md>), [jQuery](<https://devfeed.tech/topics/jquery.md>), [Document Object Model (DOM)](<https://devfeed.tech/topics/dom.md>)

Tags: [design-system](<https://devfeed.tech/tags/design-system.md>), [front-end](<https://devfeed.tech/tags/front-end.md>), [legacy-code](<https://devfeed.tech/tags/legacy-code.md>), [react](<https://devfeed.tech/tags/react.md>), [react-component](<https://devfeed.tech/tags/react-component.md>), [stateful](<https://devfeed.tech/tags/stateful.md>), [stateless](<https://devfeed.tech/tags/stateless.md>), [web-development](<https://devfeed.tech/tags/web-development.md>)

## AI overview

This article explains how Shopify's Polaris team built a data table component in React. It highlights reusable components, props, stateful and stateless subcomponents, lifecycle methods, DOM behavior, event-listener cleanup, and the differences from a jQuery-based approach.

## Source excerpt

I'm a front-end developer at Shopify, the leading commerce platform for over 600,000 merchants across the globe. I started in web development when the industry used tables for layout (nearly 20 years ago) and have learned my way through different web frameworks and platforms as web technology evolved.