Move table row/column insertion controls to a floating menu (#8409)

[r4-rahul123]

• I signed and returned the Plone Contributor Agreement, and received and accepted an invitation to join a team in the Plone GitHub organization.
• I verified there aren't other open pull requests for the same change.
• I followed the guidelines in Contributing to Volto.
• I successfully ran code linting checks on my changes locally.
• I successfully ran unit tests on my changes locally.
• I successfully ran acceptance tests on my changes locally.
• If needed, I added new tests for my changes.
• If needed, I added documentation for my changes, either in the Storybook or narrative documentation.
• I included a change log entry in my commits.

---

Closes #8409

Summary of changes

• Updated the Table block edit component (TableBlockEdit.jsx) so that the row and column insertion/deletion controls float contextually above the currently selected row rather than staying fixed at the top of the table.
• Reuses the existing toolbar buttons and icons as guided in Move table row/column insertion controls to a floating menu #8409 (comment).
• Added smooth transition when navigating between table rows.
• Added Towncrier news entry (8409.feature).

[boring-cyborg]

Caution

The Volto Team has suspended its review of new pull requests from first-time contributors until the release of Plone 7, which is preliminarily scheduled for the second quarter of 2026.
Read details.

Thanks for submitting your first pull request! You are awesome! 🤗

If you haven't done so already, read
Plone's Code of Conduct,
Contributing to Plone,
First-time contributors, and
Contributing to Volto,
as this will greatly help the review process.

Welcome to the Plone community! 🎉

[wesleybl]

-32 and -34 are fixed numbers. If the CSS changes the button height, it will cause issues. The offset can be calculated using only CSS, based on the toolbar's actual height. Something like this:

.block.table {
  --toolbar-gap: 2px;
 .toolbar {
    top: 0;
    transform: translate(-50%, calc(-100% - var(--toolbar-gap)));
    transition: top 0.15s ease-in-out;
  }
}

This way, toolbarTop is used solely to define the top position (which line the toolbar should align with).

[wesleybl]

We can rely solely on:

selectedCell.row, selected, and data.table?.hideHeaders

to avoid unnecessary re-renders.

[read-the-docs-community]

Documentation build overview

📚 volto | 🛠️ Build #34395737 | 📁 Comparing b65c34d against latest (799e67d)

  🔍 Preview build  

1 file changed

± release-notes/index.html

[r4-rahul123]

Hi @wesleybl,

Thank you for the review and helpful suggestions!
I have updated the code to:

1. Handle toolbar height and offset purely via CSS using transform: translate(-50%, calc(-100% - var(--toolbar-gap))) and transition: top 0.15s ease-in-out.
2. Use rowEl.offsetTop directly for toolbarTop.
3. Optimize the useEffect dependencies to [selected, selectedCell?.row, data.table?.hideHeaders].

All lint and unit tests are passing and the branch is up to date with main. Please let me know if any further adjustments are needed!