Skip to content

[PLAY-3207] Table Kit: Add ColSpan Support + Docs to React and Rails - #6596

Merged
nidaqg merged 7 commits into
masterfrom
PLAY-3207-tablekit-colspan-prop
Sep 4, 2026
Merged

[PLAY-3207] Table Kit: Add ColSpan Support + Docs to React and Rails#6596
nidaqg merged 7 commits into
masterfrom
PLAY-3207-tablekit-colspan-prop

Conversation

@ElisaShapiro

@ElisaShapiro ElisaShapiro commented Sep 1, 2026

Copy link
Copy Markdown
Contributor

What does this PR do? A clear and concise description with your runway ticket url.
PLAY-3207 adds the colSpan prop to the React Table Header and Table Cell, colspan to the Rails Table Cell, and adds docs for the prop. Rails Table Header already has colspan, and this is a precursor story to creating a Custom Sort embedded in the Header React doc example.

Screenshots: Screenshots to visualize your addition/change
doc with vertical borders

How to test? Steps to confirm the desired behavior:

  1. Go to the Table with Colspan doc example (rails, react) to see colspan in action.
    Playground test: no prop override but can edit children to give Table.Header or Table.Cell a colSpan example code:
<Table.Head>
  <Table.Row>
    <Table.Header colSpan={2} text="Territory ID" />
    <Table.Header text="Name" />
    <Table.Header text="Status" />
  </Table.Row>
</Table.Head>
<Table.Body>
  <Table.Row>
    <Table.Cell colSpan={2} text="1001" numberSpacing="tabular" />
    <Table.Cell text="Ada Lovelace" />
    <Table.Cell text="Active" />
  </Table.Row>
  <Table.Row>
    <Table.Cell text="1002" numberSpacing="tabular" />
    <Table.Cell text="Grace Hopper" />
    <Table.Cell text="Pending" />
    <Table.Cell text="Apr 10, 2026" textAlign="right" />
  </Table.Row>
  <Table.Row>
    <Table.Cell text="1003" numberSpacing="tabular" />
    <Table.Cell text="Katherine Johnson" />
    <Table.Cell text="Active" />
    <Table.Cell text="Apr 11, 2026" textAlign="right" />
  </Table.Row>
</Table.Body>

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.
  • PLAYGROUND I have added and tested Playground metadata and overrides for all kits and props updated in my code.
  • SEMVER I have added a minor, major, or patch label for release.
  • RC I have added an inactive RC label if not an active RC.

@ElisaShapiro ElisaShapiro self-assigned this Sep 1, 2026
@ElisaShapiro ElisaShapiro added enhancement New Features, Props, & Variants (USED IN CHANGELOG) milano 20 MAX - Deploy this PR to a review environment via Milano minor Semver Target labels Sep 1, 2026
@powerhome-portal

Copy link
Copy Markdown

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]=play-3207-tablekit-colspan-prop

@nitro-pr-review nitro-pr-review Bot left a comment

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

First-class colSpan/colspan for Table cell/header looks directionally right, but the Rails default of 1 is a likely regression for existing cells, and the React attribute merge can drop htmlOptions colspan that used to work.

Comment thread playbook/app/pb_kits/playbook/pb_table/table_cell.rb Outdated
Comment thread playbook/app/pb_kits/playbook/pb_table/subcomponents/_table_cell.tsx Outdated
Comment thread playbook/app/pb_kits/playbook/pb_table/subcomponents/_table_header.tsx Outdated
@ElisaShapiro

Copy link
Copy Markdown
Contributor Author

@nitro-pr-review

@nitro-pr-review nitro-pr-review Bot left a comment

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

No blocking correctness, security, or reliability issues. Dedicated colSpan/colspan is applied only on native table cells, existing htmlOptions/html_options still work, and the dedicated prop correctly wins when both are supplied.

Comment thread playbook/app/pb_kits/playbook/pb_table/docs/_table_colspan.html.erb
@nidaqg

nidaqg commented Sep 1, 2026

Copy link
Copy Markdown
Contributor

this didn't add anything to the schema or playground, which I'm assuming is because the prop is not on the table itself but on the subcomponent. I think we probably need to do something similar to what we do for the advancedTable for this kit as far as playground overrides is concerned so its knows when props go to a subcomponent. Declare a type in the main file so schema picks it up + have the extra setup in playgrounds overrides.. but I thin k that can be a separate story if you prefer

@ElisaShapiro

Copy link
Copy Markdown
Contributor Author

this didn't add anything to the schema or playground, which I'm assuming is because the prop is not on the table itself but on the subcomponent. I think we probably need to do something similar to what we do for the advancedTable for this kit as far as playground overrides is concerned so its knows when props go to a subcomponent. Declare a type in the main file so schema picks it up + have the extra setup in playgrounds overrides.. but I thin k that can be a separate story if you prefer

Oh good call - I had tested in Playground by editing the Children to include it, but schema did not occur to me. Will look into your suggestion now, thanks!

@github-actions

github-actions Bot commented Sep 2, 2026

Copy link
Copy Markdown

🎉 Congratulations on creating an Alpha Version!

Your Alpha for Ruby Gems is 17.1.0.pre.alpha.PLAY3207tablekitcolspanprop18966

Your Alpha for NPM is 17.1.0-alpha.PLAY3207tablekitcolspanprop18966

@ElisaShapiro ElisaShapiro removed the alpha label Sep 2, 2026
@github-actions

github-actions Bot commented Sep 2, 2026

Copy link
Copy Markdown

🎉 Congratulations on creating an Alpha Version!

Your Alpha for Ruby Gems is 17.1.0.pre.alpha.PLAY3207tablekitcolspanprop18994

Your Alpha for NPM is 17.1.0-alpha.PLAY3207tablekitcolspanprop18994

@ElisaShapiro ElisaShapiro added Ready for Release merged to master, ready for a versioned released and removed in alpha testing labels Sep 3, 2026
@nidaqg nidaqg added the Inactive RC Skip the release candidate process label Sep 4, 2026
@nidaqg
nidaqg merged commit 89b4473 into master Sep 4, 2026
24 checks passed
@nidaqg
nidaqg deleted the PLAY-3207-tablekit-colspan-prop branch September 4, 2026 13:12
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

agentic-review alpha enhancement New Features, Props, & Variants (USED IN CHANGELOG) Inactive RC Skip the release candidate process milano 20 MAX - Deploy this PR to a review environment via Milano minor Semver Target Ready for Release merged to master, ready for a versioned released

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants