Uh oh!
There was an error while loading.Please reload this page.
- Notifications
You must be signed in to change notification settings - Fork999
How can i create groups of cells?#5543
AnsweredbyRosellines
joaquinniicolas asked this question inQ&A | 常见问题
-
How can i manage groups? I would like to hide some columns or rows using a button |
BetaWas this translation helpful?Give feedback.
All reactions
Answered by RosellinesAug 23, 2025
- Using Univer’s Built-in Group Plugin
Univer already has a GroupPlugin that lets you group rows/columns and collapse/expand them. Example usage:
import { GroupPlugin } from'@univerjs/sheets-group-ui';// Register the pluginuniver.registerPlugin(GroupPlugin);// Group rowsuniverAPI.getActiveWorkbook()?.getActiveSheet()?.getRowManager().group(2, 5); // groups rows 2-5// Collapse (hide) the groupuniverAPI.getActiveWorkbook()?.getActiveSheet()?.getRowManager().collapse(2);// Expand (show) the groupuniverAPI.getActiveWorkbook()?.getActiveSheet()?.getRowManager().expand(2);Same API existsfor columns viagetColumnManager().2. Manual Show/Hide via API```bashIf you don’t need f…Replies: 1 comment 1 reply
-
Univer already has a GroupPlugin that lets you group rows/columns and collapse/expand them. Example usage: import { GroupPlugin } from'@univerjs/sheets-group-ui';// Register the pluginuniver.registerPlugin(GroupPlugin);// Group rowsuniverAPI.getActiveWorkbook()?.getActiveSheet()?.getRowManager().group(2, 5); // groups rows 2-5// Collapse (hide) the groupuniverAPI.getActiveWorkbook()?.getActiveSheet()?.getRowManager().collapse(2);// Expand (show) the groupuniverAPI.getActiveWorkbook()?.getActiveSheet()?.getRowManager().expand(2);Same API existsfor columns viagetColumnManager().2. Manual Show/Hide via API```bashIf you don’t need full grouping, you can simply hide rows/columns directly:const sheet =univerAPI.getActiveWorkbook()?.getActiveSheet();// Hide rows 3–6sheet?.getRowManager().setHidden(3, 6, true);// Show them againsheet?.getRowManager().setHidden(3, 6, false);// Hide column B–Dsheet?.getColumnManager().setHidden(2, 4, true);// Show againsheet?.getColumnManager().setHidden(2, 4, false);3. Hooking into a ButtonLet’s say you have a buttonin your UI (outside the sheet). You can wire it like this:```bashconst toggleBtn = document.getElementById('toggle-columns');let hidden =false;toggleBtn.addEventListener('click', () => { const sheet =univerAPI.getActiveWorkbook()?.getActiveSheet(); hidden =!hidden;sheet?.getColumnManager().setHidden(2, 4, hidden); // toggle col B–D});This way the user can click the button to hide/unhide the group.✅ Recommendation:If you want Excel-like grouping with expand/collapse icons, use the GroupPlugin.If you only want a custom hide/unhide button, use the manualsetHidden() API. |
BetaWas this translation helpful?Give feedback.
All reactions
1 reply
-
Thank you very much, that has resolved my question. |
BetaWas this translation helpful?Give feedback.
All reactions
Answer selected byjoaquinniicolas
Sign up for freeto join this conversation on GitHub. Already have an account?Sign in to comment