Source
r/FigmaDesign•
werdlyfe

Table Component by row or by column?

feedback

When working on a complex data table component what is a better standard? By column or by row?

I had this debate with a teammate who strongly believes tables should be pieced together by column components. The basis of this argument is that it’s easier to manipulate if you need to add or remove columns to the table. I lean more towards building tables by rows as it translates more to development and is easier to add/remove rows if necessary.

Is there some standards or best practices for crafting Table components out there? I’ve checked on YouTube but it’s a mixed bag. Some build by columns, some build by rows.

Posted Jan 30, 2023, 9:40 PM UTC

37
Johnfohf•

I build by cell, but group by columns.

Auto layout with columns makes it easier to move or remove data as opposed to row.

Especially true since stakeholders or customers care more about the order of the data headers and less about randomly generated data in row cells.

7
werdlyfeOP•

Yeah, I agree with that point 100% that’s why I became so conflicted. The need to manipulate the order or contents of the table columns is far more important than add/removing arbitrary number of rows.

However, i find that add/removing rows happens more frequently in my case. Which becomes more resource intensive.

Thanks for your input! Very helpful! 🙌

1
Johnfohf•

I'd suggest starting with the maximum number of rows to fill the screen.

If you need to show less, then just crop the table.

Btw, if you're not already using Mockaroo for generating realistic data I highly recommend it.

1
kevmasgrande•

Rows. A single row is a design system molecule, and it’s how it will get coded. Rearranging the the order/contents of columns should be rather easy just by updating the row component.

2
pro-megafauna•

I hadn’t considered by column until I came across the Webpixels Design System community file. It has a really nice example of how a flexible column component can be made. Ended up with a similar one that the team seems to really like.

1
joshjohnsonux•

Both. In early phases when deciding what data to show, columns are better. Once you’ve locked in and fixed the schema, rows will be much more useful for things like showing the “add” flow or “selecting” a row. If you manage cells well, then it’s easy to do both.

1
Wake_99_Dr3am•

There’s no right way! Just make one table cell a component then build from there! Easier to manipulate and swap instance!

1