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

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

Ссылка на пример на 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 Добавляем плагин для группировки по колонке.

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

  1. Откройте папку с таблицей.

  2. Наведите курсор на ячейку в столбце таблицы, которая доступна для группировки.

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