[PBNTR-786] Custom Header in Tables POC

[ElisaShapiro]

What does this PR do? A clear and concise description with your runway ticket url.
PBNTR-786 asks for a POC PR and huddle doc addressing a build plan to make custom headers for tables.
The main principles are the following:

• headers can be borderless.
• headers can have a custom background color and blend in with the background of the element they are nested within
• the PR addresses how to achieve the desired look with both the "PB wrapper" and "Subcomponent" version of the table kit for both React and Rails.
• the final build looks slightly different from the mock in the ticket - having the first row of the table body adopt the same border radius curvature as the table card/table header itself caused issues with the nested table appearance because the tiny cut off corner remained a small speck of white.
• huddle doc has a lot more info.

Screenshots: Screenshots to visualize your addition/change
rails


react

How to test? Steps to confirm the desired behavior:

1. Go to table kit page, custom header doc example (rails react links to come).
2. See multiple table variations within the doc example with markdown explaining both props and how to achieve background color.

Checklist:

• LABELS Add a label: enhancement, bug, improvement, new kit, deprecated, or breaking. See Changelog & Labels for details.
• DEPLOY I have added the milano label to show I'm ready for a review.
  - [ ] TESTS I have added test coverage to my code.

[powerhome-portal]

A change to documentation files was detected in your PR. Please visit this link to preview changes: https://portal-staging.powerapp.cloud/docs?filters[kind]=all&filters[user]=all&filters[namespaceFilter]=pbntr-786-table-custom-header-poc

[ElisaShapiro]

In a last minute update yesterday I accidentally removed the code to flatten out the borderlessNested corners (to avoid little white spot). In final PR don't forget:

.header-borderless-nested > thead > tr:first-child > th:first-child,
.header-borderless-nested > .pb_table_thead > .pb_table_tr:first-child > .pb_table_th:first-child {
  border-top-left-radius: 0 !important;
}

.header-borderless-nested > thead > tr:first-child > th:last-child,
.header-borderless-nested > .pb_table_thead > .pb_table_tr:first-child > .pb_table_th:last-child {
  border-top-right-radius: 0 !important;
}