Hi @bhaveshraja, I'm tidying up the table in our component kit and want to lock the defaults with you.
For each thing below, could you tell me whether it should always look this way (I'll bake it in so it stays consistent and nobody has to think about it), or whether it should be adjustable depending on where it's used?
-
The header row. Today the column titles sit on a light grey strip, in a small 12px size, a bit bolder than the rows, and in our muted grey text. The header also stays stuck to the top when you scroll. Should every table header look and behave exactly like that, or should some be allowed to look different?
-
The two table looks. We have a "regular" table (a rounded outer border with thin lines only between rows) and a denser "spreadsheet" look (every box fully outlined like a grid). Are these two the full set we want, and should the regular one always be the everyday default?
-
Row height and cell spacing. Each header row is about 38px tall with a set amount of breathing room on the left/right and top/bottom of every cell. Should that spacing always be the same, or do you want a tighter and a roomier option?
-
The sort arrow on sortable columns. When a column can be sorted, the title turns into a button with a little chevron next to it, and clicking cycles through none, up, down. Should that be the one and only sort marker and order everywhere?
-
The little avatar inside the first cell. In the example, the first column shows a tiny rounded avatar before the name. Is that a table thing we should make standard for "name" columns, or just something the person building each table decides to drop in?
Anything you mark "always," I'll build into the component. Anything that's "depends," I'll leave open for the team to set. Thanks!
Hi @bhaveshraja, I'm tidying up the table in our component kit and want to lock the defaults with you.
For each thing below, could you tell me whether it should always look this way (I'll bake it in so it stays consistent and nobody has to think about it), or whether it should be adjustable depending on where it's used?
The header row. Today the column titles sit on a light grey strip, in a small 12px size, a bit bolder than the rows, and in our muted grey text. The header also stays stuck to the top when you scroll. Should every table header look and behave exactly like that, or should some be allowed to look different?
The two table looks. We have a "regular" table (a rounded outer border with thin lines only between rows) and a denser "spreadsheet" look (every box fully outlined like a grid). Are these two the full set we want, and should the regular one always be the everyday default?
Row height and cell spacing. Each header row is about 38px tall with a set amount of breathing room on the left/right and top/bottom of every cell. Should that spacing always be the same, or do you want a tighter and a roomier option?
The sort arrow on sortable columns. When a column can be sorted, the title turns into a button with a little chevron next to it, and clicking cycles through none, up, down. Should that be the one and only sort marker and order everywhere?
The little avatar inside the first cell. In the example, the first column shows a tiny rounded avatar before the name. Is that a table thing we should make standard for "name" columns, or just something the person building each table decides to drop in?
Anything you mark "always," I'll build into the component. Anything that's "depends," I'll leave open for the team to set. Thanks!