Web Components Grid 列オプションの概要

Ignite UI for Web Components データ グリッドは、各列ヘッダに表示される UI による列のグループ化、非表示、移動、固定、フィルター、およびソートの機能をサポートします。

列オプション UI を有効にするには、グリッドの isColumnOptionsEnabled プロパティを true に設定します。

Web Components Grid 列オプションの例

Edit on CodeSandbox

列オプションの構成

列の isFilteringEnabled プロパティにより、列ごとにフィルタリングの有効/無効化を切り替えることができます。True または false に設定すると、列のオプション UI のフィルタリング セクションが表示または非表示になります。

headerClickAction プロパティを使用すると、グリッド全体のソートの有効/無効化を切り替えることができます。これを None に設定すると、グリッドのソートが完全に削除され、各列のオプション UI に反映されます。SortByOneColumnOnly を設定すると、一度に 1 つの列のソートが有効になります。

コード スニペット

以下のコードは、グリッドと列を調整することにより、列オプション UI でフィルタリングとソートをプログラムで有効にする方法を紹介します。

import { HeaderClickAction } from 'igniteui-webcomponents-grids';

//enable column options
this.grid.isColumnOptionsEnabled="true";

//adjust filtering for column
let idColumn = this.grid.actualColumns.item(0);
idColumn.isFilteringEnabled="false";

//adjust sorting
this.grid.headerClickAction = HeaderClickAction.SortByOneColumnOnly;
<igc-data-grid
     id="grid"
     height="calc(100% - 40px)"
     width="100%"
     header-click-action="SortByOneColumnOnly"
     is-column-options-enabled="true">
    <igc-text-column field="ID" is-filtering-enabled="false"></igc-text-column>
</igc-data-grid>