Tables are complex components. My team needed one that was flexible enough to accommodate different types of content while maintaining a consistent structure and styling across the platform. I've developed a method using nested components and variants to meet my team's needs.
The first step is to determine which features you want available in your table component and assemble the necessary base components.
Make sure to include a placeholder component for the row’s content. (This will get swapped out with a local component in your table instance.)
For this example, I’ll add a checkbox to make the rows selectable, and a menu icon to show additional options.
Once you have your base components, the next step is to build the row component.
This row component should include any interactive states like hover effects.
For this example, I’ll show a hover state, selected state, and hover state for the options menu.
Once the row component is built, you’re ready to build your table component.
Think of this as the shell component that contains the structure, styling, and interactions that you want to use consistently.
For this example, I’ve created variants so that the selectable rows and row menus can be turned on and off at the table level, instead of having to configure each row individually.
The final step is to create a local row component with the content for your table instance. Then you can swap out the placeholder component with your new one.
For this example, I’ve created two variants, one for the column headers, and another for the actual rows of data.
If you use this approach, you’ll want to make sure your column widths are consistent between variants to ensure content stays properly aligned.
