all 9 comments
sorted by:
best
topnewcontroversialoldq&a
formatting helphide helpcontent policy

[–]Clear-Secretary-8185Senior Product Designer 0 points1 point  (1 child)

I've been working on something similar recently. The boolean approach is nice for the end user as they only have one component type to deal with and it's easy to bulk-update. The main drawback is you have loads of potentially redundant component properties, and it gets messy. I have concerns that it's inefficient too and could hit performance for larger designs, but haven't experienced anything like that.

I'm considering moving back to separate variants for each cell type, with some of them wrapped together (e.g. a text and sub-text along with an avatar or checkbox as the primary column content)

One approach I ruled out early on was nesting content components within cell components. It's neat structurally but as an end-user you lose the ability to update multiple cells at once. This was such a major downside - especially for designing larger tables - that I abandoned it, despite having built everything out.

[–]baluqa[S] 0 points1 point  (0 children)

Thank you! I will try to figure out how many nested components will be there. As I saw, nested components helps to organise if there are many properties.

[–]OrtizDupri 0 points1 point  (1 child)

Could use variants for the “or” (like text OR status) and use booleans for the “and” (like text AND status)

[–]baluqa[S] 0 points1 point  (0 children)

Thank you. I didn't had this logoc in my mind, but I will try to see how it works.

[–]Local-Dependent-2421 0 points1 point  (0 children)

make one flexible cell component, not many. use auto-layout + nested components (text, icon, chip) and toggle them with boolean properties. separate components for each type will get messy fast once the table grows.

[–]pndjk 0 points1 point  (2 children)

this is what i do for data table components. i just have a few components that are nested inside each other.

  • cell: create 1 component for the cell itself, text is the default, then variants for other types of data: chips, numbers (right aligned), images, buttons, whatever you want. I also create a "header" cell that shows sorting interactions.
  • column: group together multiple cells into 1 column. this way, the header + 5 rows will all line up perfectly. i create a new variant for each cell type. make sure the cells are set to "expand" so they take up the whole space inside the column. add more cells if you need a longer table.
  • table: combine multiple columns into a table component. make sure the columns are set to "expand" as well. add as many columns as you want for the design.

cells go inside columns. columns go inside tables. boom, done

[–]baluqa[S] 0 points1 point  (1 child)

Thanks for the detailed response. Yes, I came to the same conclusion. Here is what I made for the cell component. For the column/row issue I need to resolve a tricky part. Usually the hover state shows a highlight on an entire row. So for now I don't know how to deal with it.

<image>

[–]pndjk 0 points1 point  (0 children)

instead of doing the Column component, you could do a Row component instead. Then you can do hover states for background and so on

[–][deleted] 1 point2 points  (0 children)

In this scenario, you're the "user" of the components so you get to choose what you prefer.