const productCfg = {
                 readOnly:true,
                 data: {
                     dataKey: 'gridDetail',
                     url: '/api/demo/products'
                 },
                 // ===== SCHEMA =====
                 schema: {
                     fields: {
                         id: {type: 'int', ui: {label: 'id', grid: {visible: false}}},
                         categoryId: {type: 'int', ui: {label: 'categoryId', 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'}}
                         },
                     }
                 },

                 // ===== VIEW =====
                 view: {
                     height:440,
                     tableTitle: {
                         enabled: true,
                         caption:'Продукция',
                         hint: 'Продукция нашего магазина',
                         toggle: true
                     },
                     pager: {
                         enabled: true,
                         rpp: [3, 5, 10]
                     }
                 }
             }

             const categCfg = {
                 autoLoad: true,
                 readOnly: true,
                 data: {
                     dataKey: 'gridMaster',
                     url: '/api/demo/categories'
                 },
                 // ===== SCHEMA =====
                 schema: {
                     fields: {
                         id: {type: 'int', ui: {label: 'id', grid: {visible: false}}},
                         imageName: {
                             type: 'string',
                             ui: {label: 'Иконка', grid: {visible: true, width: 100, colType: 'image'}}
                         },
                         name: {type: 'string', ui: {label: 'Наименование', grid: {visible: true, width: '100%'}}},
                     }
                 },
                 // ===== VIEW =====
                 view:{
                     checkbox: false,
                     tableTitle: {
                         enabled: true,
                         caption:'Категории продукции',
                         hint: 'Категории товаров',
                         toggle: true
                     },
                     pager: {
                         enabled: true,
                         rpp: [3, 5]
                     }
                 },
                 // ===== DETAILGRIDS =====
                 detailGrids: [{
                     gridId: 'demo-md-detail',
                     link:{masterField: 'id', detailField: 'categoryId'},
                     options: productCfg
                 }],
                 // управление размерами подчиненной сетки
                 toggleGrids: [{
                     gridId: 'demo-md-detail',
                     enable: true,
                     share: 100, // сколько в % свободного места хочет взять
                     reload: true
                 }]
             };
             const gridCtg = new ABGrid(masterContainer, categCfg);

                    
                

Категории товаров и товары. Детальная таблица автоматически обновляется при выборе строки. Управление пространством-при сворачивании таблицы категорий товаров, таблица с товарами получает освобождающееся пространство и перезагружается с максимально заданным в ее конфигурации rpp, при разворачивании таблицы категорий таблица продукции принимает исходный размер.