main.ui.grid и main.ui.filter

Компоненты

Компонент	Описание
main.ui.grid	Компонент для визуального представления данных в виде таблицы.
main.ui.filter	Выводит фильтр + поиск О том, как выглядит работа с фильтром можно посмотреть в уроке Фильтр (новый интерфейс) в курсе Контент-менеджер. .

Компоненты являются системными и в визуальном редакторе не отображаются. В физической структуре их можно найти в папке /bitrix/components/bitrix/[название_компонента]

Связка компонентов

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

Для связи фильтра и таблицы необходимо передать данные из фильтра в грид. Общая схема выглядит так:

// Подключаем фильтр.
$APPLICATION->includeComponent(
	"bitrix:main.ui.filter",
	"",
	[
		"FILTER_ID" => "DEMO_FILTER",
		"GRID_ID" => "DEMO_GRID",
		// ...
	]
);

// Получаем данные для фильтрации.
$filterOptions = new \Bitrix\Main\UI\Filter\Options("DEMO_FILTER");
$filterFields = $filterOptions->getFilter([
	['id' => 'DATE', 'name' => 'Дата', 'type' => 'date'],
	['id' => 'IS_SPEND', 'name' => 'Тип операции',
	'type' => 'list',

	'params' => ['multiple' => 'Y']
	],
	['id' => 'AMOUNT', 'name' => 'Сумма', 'type' => 'number'],
	['id' => 'PAYER_INN', 'name' => 'ИНН Плательщика', 'type' => 'number'],
	['id' => 'PAYER_NAME', 'name' => 'Плательщик'],
]);

// Конвертируем то, что вернул фильтр в формат пригодный для выборки данных.
// (формат зависит от того, как и с помощью чего планируется выбирать данные)
$filter = [];
foreach ($filterFields as $key => $value)
{
	// ...
}

// Получаем данные на основе сконвертированного фильтра.
$data = \AnyClass::getList(..., $filter);

// Конвертируем данные в формат пригодный для грида
$rows = [];
foreach ($data as $key => $value)
{
	// ...
}

// Подключаем грид и передаем ему данные
$APPLICATION->includeComponent(
	"bitrix:main.ui.grid",
	"",
	[
		"GRID_ID" => "DEMO_GRID",
		"ROWS" => $rows,
		// ...
	]
);