Компонент main.ui.grid: Создание современной таблицы данных в Битрикс

Старые таблицы (CAdminList) работают только в админке. Для публичной части (и современных админок) Битрикс предлагает компонент bitrix:main.ui.grid.

Это мощный JS-грид с поддержкой сортировки, перетаскивания колонок, inline-редактирования и групповых действий.

Подготовка данных

Грид требует данные в строго определенном формате.

1. ID Грида: Уникальная строка, например, my_report_grid.
2. Колонки (COLUMNS): Массив описаний заголовков.
3. Строки (ROWS): Массив данных.

$gridId = 'my_custom_grid';

// 1. Описание колонок
$columns = [
    ['id' => 'ID', 'name' => 'ID', 'sort' => 'ID', 'default' => true],
    ['id' => 'NAME', 'name' => 'Название', 'sort' => 'NAME', 'default' => true],
    ['id' => 'DATE', 'name' => 'Дата создания', 'sort' => 'DATE_CREATE', 'default' => true],
    ['id' => 'STATUS', 'name' => 'Статус', 'sort' => 'STATUS', 'default' => true],
];

// 2. Получение данных (например, из ORM)
$rows = [];
$res = \My\Table::getList([
    'select' => ['ID', 'NAME', 'DATE_CREATE', 'STATUS'],
    'limit' => 20
]);

while ($item = $res->fetch()) {
    $rows[] = [
        'id' => $item['ID'], // Уникальный ID строки
        'data' => $item,     // "Сырые" данные для JS-обработчиков
        'columns' => [       // HTML-представление ячеек
            'ID' => $item['ID'],
            'NAME' => '<a href="/detail.php?id='.$item['ID'].'">'.htmlspecialchars($item['NAME']).'</a>',
            'DATE' => $item['DATE_CREATE'],
            'STATUS' => ($item['STATUS'] == 'Y') ? '<span style="color:green">Активен</span>' : 'Скрыт'
        ],
        'actions' => [       // Контекстное меню строки
            [
                'text'    => 'Редактировать',
                'onclick' => 'document.location.href="/edit.php?id='.$item['ID'].'"'
            ],
            [
                'text'    => 'Удалить',
                'onclick' => 'if(confirm("Удалить?")) { ... }'
            ]
        ]
    ];
}

Вызов компонента

<?$APPLICATION->IncludeComponent(
    'bitrix:main.ui.grid',
    '',
    [
        'GRID_ID' => $gridId,
        'COLUMNS' => $columns,
        'ROWS' => $rows,
        'SHOW_ROW_CHECKBOXES' => true, // Чекбоксы для множественного выбора
        'NAV_OBJECT' => $nav, // Объект постраничной навигации (PageNavigation)
        'AJAX_MODE' => 'Y',
        'AJAX_ID' => \CAjax::getComponentID('bitrix:main.ui.grid', '.default', ''),
        'PAGE_SIZES' => [
            ['NAME' => "5", 'VALUE' => '5'],
            ['NAME' => '10', 'VALUE' => '10'],
            ['NAME' => '20', 'VALUE' => '20'],
        ],
        'TOTAL_ROWS_COUNT' => $totalCount, // Общее кол-во записей
        'ALLOW_COLUMNS_SORT' => true,
        'ALLOW_COLUMNS_RESIZE' => true,
        'ALLOW_HORIZONTAL_SCROLL' => true,
        'ALLOW_SORT' => true,
        'ALLOW_PIN_HEADER' => true,
    ]
);?>

Вывод:
main.ui.grid — это стандарт де-факто для вывода табличных данных в современном Битрикс. Он обеспечивает единый UI/UX с системными разделами и предоставляет богатый функционал «из коробки» без написания сложного JS.

main.ui.grid, битрикс грид, таблица данных, список элементов, кастомный грид, интерфейс, Rows, Columns.