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

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

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

    Web Components Grid 列オプションの例

    列オプションの構成

    列の 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>