main.ui.grid and main.ui.filter

Components main.ui.grid (Grid classes) and main.ui.filter (Filter classes).

These components are system components and are not displayed in visual editor. They can be found in the folder /bitrix/components/bitrix/[component_name]

Сomponent joint operation

Components can operate jointly which allows displaying information in a table format with available filtering and search features.

// Connect the filter.
$APPLICATION->includeComponent(
    "bitrix:main.ui.filter",
    "",
    [
        "FILTER_ID" => "DEMO_FILTER",
        "GRID_ID" => "DEMO_GRID",
        // ...
    ]
);

// Get data for filtering.
$filterOptions = new \Bitrix\Main\UI\Filter\Options("DEMO_FILTER");
$filterFields = $filterOptions->getFilter([
           ['id' => 'DATE', 'name' => 'Date', 'type' => 'date'],
           ['id' => 'IS_SPEND', 'name' => 'Operation type',
          'type' => 'list',
         
          'params' => ['multiple' => 'Y']
          ],
          ['id' => 'AMOUNT', 'name' => 'Total', 'type' => 'number'],
          ['id' => 'PAYER_INN', 'name' => 'Payer INN', 'type' => 'number'],
          ['id' => 'PAYER_NAME', 'name' => 'Payer'],
]);

// Convert the filter results into format suitable for data retrieval.
// (format depends on how and what is going to be used for data retrieval)
$filter = [];
foreach ($filterFields as $key => $value)
{
    // ...
}

// Get data based on converted filter.
$data = \AnyClass::getList(..., $filter);

// Convert data into format suitable for grid
$rows = [];
foreach ($data as $key => $value)
{
    // ...
}

// Connect grid and pass data for it
$APPLICATION->includeComponent(
    "bitrix:main.ui.grid",
    "",
    [
        "GRID_ID" => "DEMO_GRID",
        "ROWS" => $rows,
        // ...
    ]
);