What is the minimum row height/margins for data grids and tables?

[mtl87]

I am working on a project that has a data grid that will be very dense (potentially 1000s of rows). I am using zebra striping to help with parsing each row. I was wondering if I can set the margin top/bottom of table rows to 8px? Also, can I also display more than 10 rows at a time? Thank you.

[loreina]

Hey @mtl87, I've brought this back to the team and we'll follow up here shortly. Thanks for your patience!

[loreina]

Hi @mtl87,

I'm afraid the row height for Data Grid and Table isn't customizable.

It's possible to display more than 10 rows at a time in the coded component; in Figma, we've built the variants to 10 rows. If there's a lot of actionable content in cells, consider pairing the Data Grid/Table with Pagination since a keyboard-only user would have to tab 1000 times to get past the Table if there are 1000 rows to get through. Also with such a large number of rows, Pagination would help with batch loading the content.

Hope this helps!

[mtl87]

Hi @loreina,

Thank you for the concise and clear answer on this. I forgot to mention the use case I have for this table.

The goal is to do bulk assignment (or un-assigment) of phone numbers. Doing 10 a time can be a very tedious task as some customers may need to do 100s or 1000s of numbers at a time.

I assume my solution could be to show 20-50 rows per view with pagination and like Gmail, allow for a bulk selection of the entire table while only showing a set amount (gmail shows 50 at a time).

Let me know if this works and/or if there is a conflict to paste with this.

Thank you!

[gloriliale]

Hi @mtl87! That seems like a perfectly reasonable direction to go. Let us know if we can be of further help!