Применить группировку кнопкой в ячейке

Данный раздел описывает расширение, добавляющее элемент в панель инструментов грида. Элемент будет отображаться в ячейках таблицы при наведении на них курсора мыши. Нажатие на элемент будет выполнять группировку по столбцу.

Ссылка на пример на GitHub: GridHoverPanelGrouping.

extensionManager.registerExtension({
    name: "HoverPanelGroping",
    version: "6.1",
    initialize() {
        app.setService($HoverPanel, new CustomHoverPanelService()); (1)
    },
})

1	Заменяем реализацию стандартного сервиса `$HoverPanel` на `CustomHoverPanelService`.

Следующим шагом добавляем в ячейку таблицы элемент, который будет выполнять функцию группировки:

export const HoverPanelGroupingByColumn: HeaderHoverPanelPlugin<$Grouping & $SidePanel> = {
    name: "HoverPanelGroupingByColumn",
    description: `
        Добавляет элемент в панель при наведении, который находится в ячейке шапки таблицы.
        При клике на элемент, происходит группировка по столбцу.
    `,
    feature: CustomHoverPanelFeature,
    composition: HeaderHoverPanelName,
    placement: PluginPlacement.AfterContent,
    component: (props) => {
        (1)
        const { data: { column }, services: { grouping, sidePanel } } = props.composition;



        (2)
        const groupingPath = useStore(grouping.$groupingPath);

        const groupByColumn = () => {
            (3)
            if (grouping.canAddColumnGrouping(column.id) && !sidePanel.$isOpen.getState()) {
                sidePanel.toggle();
            }

            grouping.addColumnGrouping(column.id); (4)
        };

        const isGrouped = Boolean(groupingPath.find(path => path.columnId == column.id)); (5)

        if (grouping.$groupingAvailable.getState() && (isGrouped || !grouping.canAddColumnGrouping(column.id))) {
            return <></>(6)
        }

        return (
            <Icon
                iconClass="dv-ico context-menu-group hover-panel-custom-grouping-by-column"
                onClick={groupByColumn}
                dv-tooltip="Сгруппировать по столбцу" /> (7)
        );
    }
};

1	Деструктуризируем объект `props`, получая все необходимые данные для реализации группировки по столбцу
2	С помощью хука useStore получаем данные из хранилища `$groupingPath`. Хук предоставляет возможность перерисовывать компонент при изменении состояния хранилища `$groupingPath`. Так как мы следим за состоянием хранилища и перерисовываем компонент, мы можем учитывать следующую логику: Если столбец уже сгруппирован, то не показывать иконку Если столбец не сгруппирован, то показывать иконку
3	Проверяем доступна ли колонка для группировки. Если колонка доступна и боковая панель закрыта, открываем боковую панель с группировкой.
4	Группируем по колонке.
5	Проверяем сценарий, что группировка по колонке уже применена.
6	Если группировка доступна и уже применена или недоступна для этой колонки, то ничего не отрисовываем.
7	Если группировка доступна, рисуем иконку. Группировка будет применена при нажатии на иконку.

export class CustomHoverPanelService implements IHoverPanelService { (1)


    getPlugins(defaultPlugins: HeaderHoverPanelPlugin<any>[]): HeaderHoverPanelPlugin<any>[] { (2)

        (3)

        defaultPlugins.push(HoverPanelGroupingByColumn); (4)

        return defaultPlugins;
    }
}

1	Создаём сервис алогичный `IHoverPanelService`..
2	При инициализации плагинов для `HoverPanel`, будет вызван этот метод. Внутри него мы можем убрать, добавить интересующие нас плагины для панели при наведении и вернуть новый массив плагинов.
3	К примеру: `defaultPlugins = defaultPlugins.filter(plugin => plugin.name !== target)` `defaultPlugins.push(ownPlugin)`
4	Добавляем плагин для группировки по колонке.

Проверка примера

Откройте папку с таблицей.
Наведите курсор на ячейку в столбце таблицы, которая доступна для группировки.
После нажатия на иконку "Сгруппировать по столбцу", должна открыться боковая панель, если она была закрыта, и добавиться колонка в группируемых элементах.