How can i create groups of cells?

[joaquinniicolas]

How can i manage groups? I would like to hide some columns or rows using a button

[Rosellines]

1. 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 plugin
univer.registerPlugin(GroupPlugin);

// Group rows
univerAPI.getActiveWorkbook()?.getActiveSheet()?.getRowManager().group(2, 5); // groups rows 2-5

// Collapse (hide) the group
univerAPI.getActiveWorkbook()?.getActiveSheet()?.getRowManager().collapse(2);

// Expand (show) the group
univerAPI.getActiveWorkbook()?.getActiveSheet()?.getRowManager().expand(2);


Same API exists for columns via getColumnManager().

2. Manual Show/Hide via API
```bash
If you don’t need full grouping, you can simply hide rows/columns directly:

const sheet = univerAPI.getActiveWorkbook()?.getActiveSheet();

// Hide rows 3–6
sheet?.getRowManager().setHidden(3, 6, true);

// Show them again
sheet?.getRowManager().setHidden(3, 6, false);

// Hide column B–D
sheet?.getColumnManager().setHidden(2, 4, true);

// Show again
sheet?.getColumnManager().setHidden(2, 4, false);

3. Hooking into a Button

Let’s say you have a button in your UI (outside the sheet). You can wire it like this:
```bash
const 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 manual setHidden() API.

[joaquinniicolas]

Thank you very much, that has resolved my question.