if (needABGrid(container)) return;

            function clearPanels(host){
                for (var i = 1; i <= 5; i++) {
                    const el = host.querySelector('[data-panel="category"]');
                    if (el) {
                        el.textContent = '';
                    }
                    const key = 'spec' + (i + 1);
                    const b = host.querySelector('#' + key + ' b');
                    if (b) {
                        b.textContent = '';
                    }
                    const span = host.querySelector('[data-panel="' + key + '"]');
                    if (span) {
                        span.textContent = '-';
                    }
                }
            }

            const productCfg = {
                readOnly: true,
                autoload: true,
                data: {
                    dataKey: 'gridDetailPanels',
                    url: '/api/demo/detailsPanels'
                },
                // ===== SCHEMA =====
                schema: {
                    fields: {
                        id: {type: 'int', ui: {label: 'id', grid: {visible: false}}},
                        categoryId: {type: 'int', ui: {label: 'categoryId', grid: {visible: false}}},
                        category: {type: 'string', ui: {label: 'Категория', grid: {visible: false}}},
                        name: {type: 'string', ui: {label: 'Наименование', grid: {visible: true, width: '60%'}}},
                        price: {type: 'number', ui: {label: 'Цена', grid: {visible: true, width: '15%'}}},
                        imageName: {
                            type: 'string',
                            ui: {label: 'Фото', grid: {visible: true, width: 160, colType: 'image'}}
                        },
                        extData: {type: 'string', ui: {grid: {visible: false}}},
                        specs:{type: 'string', ui: {grid: {visible:false}}},
                    }
                },

                // ===== VIEW =====
                view: {
                    checkbox: false,
                    height: 415,
                    tableTitle: {
                        enabled: true,
                        caption: 'Продукция',
                        hint: 'Продукция нашего магазина',
                        toggle: true
                    },
                    pager: {
                        enabled: true,
                        rpp: [5, 10]
                    },
                },
                detailsPanels: [
                    {
                        id: "requestDetailsPanels",
                        host: "#demoRequestDetailsHost",
                        emptyHint: "Выберите запись…",
                        onShow(ctx) {
                            let host = ctx.host;
                            if (typeof host === 'string') {
                                host = document.querySelector(host);
                            }
                            if (!ctx.masterRow) {
                                clearPanels(host)
                                return;
                            }

                            const category = ctx.masterRow.category ?? '—';
                            const el = host.querySelector('[data-panel="category"]');
                            if (el) {
                                el.textContent = category;
                            }

                            const specs = ctx.masterRow?.specs ?? [];
                            specs.forEach((spec, i) => {
                                const key = `spec${i + 1}`;
                                const b = host.querySelector(`#${key} b`);
                                if (b){
                                    b.textContent = (spec.specName ?? '') +': ';
                                }

                                const span = host.querySelector(`[data-panel="${key}"]`);
                                if (span) {
                                    span.textContent = spec.specValue ?? '—';
                                }
                            });

                            const categoryExtDataMap = {
                                1: "Гарантия,мес",
                                2: "Энергетический класс",
                                3: "Операционная система"
                            };
                            const extDataMap = {
                                1: "warrantyMonths",
                                2: "energyClass",
                                3: "os"
                            };
                            const categoryId = ctx.masterRow.categoryId;
                            const extDataName = categoryExtDataMap[categoryId];
                            const extData = ctx.masterRow.extData ?? '';
                            let b = host.querySelector(`#spec4 b`);
                            if (b) { b.textContent = 'Артикул: '; }
                            let span = host.querySelector(`[data-panel="spec4"]`);
                            if (span) { span.textContent = extData.sku ?? '—'; }
                            b = host.querySelector(`#spec5 b`);
                            if (b) { b.textContent = extDataName+': ';}
                            span = host.querySelector(`[data-panel="spec5"]`);
                            if (span) { span.textContent = extData[extDataMap[categoryId]] ?? '—'; }

                        }
                    }
                ]
            }
            const gridProduct = new ABGrid(container, productCfg);
       
    

Товары и их характеристики. Панель справа отображает характеристики товара текущей записи. Панель заполняется пользовательским кодом(код для демо устарел), в финальной версии компонента это может быть сделано автоматически.