Subgrid

Демо подтаблицы (subgrid) под строкой. Субгрид является полноценным компонентом ABGrid Engine и задается своей конфигурацией, а это значит, что можно включить\отлючить пейджер, заголовок таблицы, панель инструментов (в демо уже отключена). Иерархия неограничена (у субгрида может быть свой субгрид). Показано 2 уровня субгрида. Раскрытие\закрытие субгрида происходит при клике по иконке папки в строке. При раскрытии данные загружаются автоматически исходя из заданной конфигурации.

Код (кликните для просмотра или скрытия)
Минимальный конфиг. Остальное компонент делает автоматически.

                
        const specCfg ={
               readOnly:true,
               data: {
                   dataKey: 'gridSpec',
                   url: '/api/demo/product-specs'
               },
               schema: {
                   fields: {
                       id: {type: 'int', ui: {label: 'id', grid: {visible: false}}},
                       productId: {type: 'int', ui: {label: 'productId', grid: {visible: false}}},
                       specName:{type:'text', ui:{label:'Характеристика', grid:{visible: true, width: '50%'}}},
                       specValue:{type:'text', ui:{label:'Значение', grid:{visible: true, width: '50%'}}},
                   }
               },
               view:{
                   width:500,
                   showHeader:false,
                   minHeight:null,
                   checkbox: false,
                   tableTitle: { enabled:false },
                   pager: { enabled: false }
               }
           }

        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: {
                   checkbox: false,
                   tableTitle: { enabled: false },
                   pager: {
                       enabled: true,
                       rpp: [3, 5, 10]
                   },
                   subGrid: {
                       enabled:true,
                       link:{masterField: 'id', detailField: 'productId'},
                       options: specCfg
                   }
               }
           }

        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]
                   },
                  // ===== SUBGRID =====
                  subGrid: {
                      enabled:true,
                      link:{masterField: 'id', detailField: 'categoryId'},
                      options: productCfg
                  }
               }
           };

        const gridCtg = new ABGrid("#demo-subgrid", categCfg);