Data Table Component

When I was at Weave I got to help out a bit with our design system.

In software development, a design system is a library of reusable components that allows designers and developers to be more consistent, allowing for a more uniform experience for the end user.

Within the Weave software there were all kinds of data tables used throughout different parts of the app. They all looked and functioned a little bit differently. I studied all the different instances of these tables and then tried to build a data table that would work in all use cases and provide the best user experience.

I started by creating smaller components – different kinds of cells, headers, rows – and figuring out how all of them would respond when the window is resized. Then I combined those building blocks to create the final component.

It was a fun challenge to create something flexible enough to be useful while remaining simple enough that the design team would want to use it.

I'm wondering how much easier this would be now that Figma has released it's max/min width features and it's auto layout "wrap" feature.