Как сделать таблицу в личном кабинете с кастом выводом через JS

Специальный режим таблицы viewType=custom. В этом случае не выводится таблица или какой-то другой компонент. Данные передаются в callback GetItems и разработчик сам определяет вывод списковых данных через JS. От компонента таблица остается только заголовок и фильтры. Пагинация добавляется через вызов функции as.crud2.getPagingMakeup (см. пример ниже).

Из getItems данные передаются в виде 2 коллекций - items (SELECT 1) и footerItems (SELECT 4)

Как реализовать:

1. В select 3 ставим ViewType

CREATE PROCEDURE [dbo].[crud_watch_customViewType_getItems]
	@filters CRUDFilterParameter READONLY,  
	@sort sql_variant,
	@direction nvarchar(8),
	@page int,
	@pageSize int,
	@username nvarchar(32)
AS
BEGIN
	declare   @ids TABLE (id int)

	-- filters...
	declare @filterName nvarchar(128)
	select @filterName = Value from @filters where [Key] = 'name'
	
	insert into @ids
	select id
	from tst_categories c
    where isnull(@filterName, '')='' or name like '%'+@filterName+'%'
	-- SELECT 1
	select id, name, (select count(*) from tst_categoryProducts where categoryID = c.id)  cnt
    from tst_categories c
    where id in (select id from @ids)
	order by  
		case when @sort = 'name' and @direction = 'down' then name end desc,
		case when @sort = 'name' and @direction = 'up' then name end asc
	OFFSET @PageSize * (@Page - 1) ROWS
	FETCH NEXT @PageSize ROWS ONLY;
	
	-- SELECT 2
	select count(*) from @ids	

	-- SELECT 3
    Select 'h3' headerTag, 'custom' viewType
	
	-- 4 SELECT Footer data or kanban/gantt data
	select 11 x1, 12 x2
    union 
    select 21 x1, 22 x2
    
END

2. Реализуем JS коллбек GetItems: 

<script>
$(function(){
	as.crud2callbacks["watch_customViewType_getItems"] = function(options, data){
      console.log("table data", data)
      var cont = options.cont;
      var s = "";
      
      for(var i = 0; i < data.items.length; i++){
        var item = data.items[i];
       	 s+= "#"+item.id + " " + item.name + " (" + item.cnt + ")<br>";
      }
      s+="<hr>";
      if(data.footerItems){
      	s+="<h4>Footer items</h4>";
      	for(var i = 0; i < data.footerItems.length; i++){
        	var fi = data.footerItems[i];
 	        for(var key in fi) {
			    var value = fi[key];
              	s += key + "=" + value+ ", "
			}
          	s+="<br>";       	 	
      	}        
      }  
      s+=  as.crud2.getPagingMakeup(options, 'pgClass')
      cont.append(s);    
    }

});
</script>