Add Table row styling

[FlyersPh9]

Changes

• Change table header font styling.
• Change table body row hover styling.
• Change table cell spacing.
• Add sample for row selection.

Deploy preview 👀

Before	After

Screenshots show:

• Eclair row is hovered.
• Gingerbread row is selected.
• Ice cream sandwich row is selected & hovered.

Testing

• forced-colors is matching legacy StrataKit table. Would of liked to style the selected row differently, but the checkbox will suffice.

[mayank99]

Should we enable hover by default? It can be useful as a visual guide just for reading long rows without getting lost.

[FlyersPh9]

The hover interaction might signal to the end user that it's intractable.

[FlyersPh9]

Also the cursor change in 4f2c9a0 / #1360 (comment) is tied to hover.

[mayank99]

hover background change alone does not signal to the user that it's interactable. We used a hover background on all rows in the legacy Table just as a visual guide. "Interactable" row does not even make sense on its own; there should always be an explicit action (e.g. a checkbox in this case, or a button as shown in iTwinUI docs).

Ideally we would use the hover background with the default cursor, and add cursor: pointer when the row is selectable. Is this possible?

[FlyersPh9]

I can look for .MuiTableCell-paddingCheckbox within the row and apply the cursor. I think if the checkbox column is present then that must mean the row is selectable. ce355d9

[mayank99]

And what about hover as default?

[FlyersPh9]

I tried adding hover to TableRow but that gave the header row hover as well:

MuiTableRow: {
	defaultProps: { component: withRenderProp(Role, "tr"), hover: true },
},

Basically I need to check "if the TableRow is within TableBody then change the hover default to true". So now I'm exploring what I can do with MuiTableBody.

[mayank99]

Ah true. I can open a follow-up PR so we can keep this moving.

[FlyersPh9]

Follow-up PR is #1444.