Web Components Grid 列選択の概要

Ignite UI for Web Components Data Grid は、IgcDataGridToolbarComponent コンポーネントまたはページのどこにでも配置できる columnChooser コンポーネントによって UI から列の表示/非表示を行う機能をサポートしています。列の isHidden プロパティにより、手動生成の列に対してプログラムによって列の表示/非表示を設定することができます。isHidden の値は columnChooser コンポーネントに反映されます。各方法は列の表示状態を変更するために使用できます。

Web Components Grid 列選択の例

Edit on CodeSandbox

ツールバーの列選択 UI

列選択 UI は、グリッドとは別に IgcDataGridToolbarComponent コンポーネント内でアクセスできます。このため、ツールバーの columnChooser プロパティを true に設定します。 ツールバーは IgcButtonComponent を表示し、クリックすると列選択 UI を表示します。このボタンは、非表示列の合計も表示します。ツールバーが作成されていない場合、columnChooser プロパティを有効にしても効果はなく、ボタンを非表示にします。

IgcDataGridToolbarComponent は、toolbarTitle プロパティを使用してツールバーにタイトルを追加、columnChooserText プロパティを設定して IgcButtonComponent にテキストを配置、columnChooserTitle を設定して、タイトル ヘッダーを列選択 UI に追加などの追加プロパティを提供します。

列選択は、グリッドの columnHidingAnimationMode および columnShowingAnimationMode プロパティを設定することでアニメーションで構成できます。

コード スニペット

以下は、データ グリッドの列選択ツールバー UI の実装方法を示します。

<igc-dataGrid-toolbar
    toolbar-title="Grid Title"
    column-chooser="true"
    column-chooser-text="Columns"
    column-chooser-title="Column Chooser">
</igc-dataGrid-toolbar>
<igc-data-grid
    id="grid"
    height="calc(100% - 40px)"
    width="100%"
    auto-generate-columns="false"
    default-column-min-width="120px"
    scrollbar-style = "thin"
    column-hiding-animation-mode="SlideOver">
</igc-data-grid>
import { IgcDataGrid } from 'igniteui-webcomponents-grids';
import { IgcToolbar } from 'igniteui-webcomponents-grids';
import { ColumnMovingAnimationMode } from 'igniteui-webcomponents-grids';

private grid: IgcDataGridComponent;
private toolbar: IgcToolbarComponent;

connectedCallback() {
    this.toolbar.targetGrid = this.grid;
    let productNameColumn = document.getElementById("productname") as IgcTextColumnComponent;
    productNameColumn.isHidden = true;
    this.toolbar.columnChooser = true;
    this.toolbar.toolbarTitle = "Grid Title";
    this.toolbar.columnChooserText = "Choose Text";
    this.toolbar.columnChooserTitle = "Choose Title Text";
    this.grid.columnMovingAnimationMode = ColumnMovingAnimationMode.SlideOver;
}

シンプルな列選択

ツールバーなしで columnChooser UIを手動で表示し、ページの任意の場所に配置するとします。マークアップでコンポーネントのインスタンスを作成して簡単に行うことができます。

サンプル

Edit on CodeSandbox

コード スニペット

以下は、データ グリッドの列選択 UI の実装方法を示します。

<igc-column-chooser
    id="columnUI"
    height="100%"
    width="250px"
    title="Column Chooser"
    show-all-text="Show All"
    hide-all-text="Hide All">
</igc-column-chooser>
<igc-data-grid
    id="grid"
    height="100%"
    width="100%"
    data-source={this.data}
    auto-generate-columns="false"
    column-hiding-animation-mode="SlideOver">
    <igx-text-column is-hidden="true" field="ProductPrice" header-text="Product Price"><igc-text-column>
</igc-data-grid>
import { IgcDataGrid } from 'igniteui-webcomponents-grids';
import { IgcColumnChooser } from 'igniteui-webcomponents-grids';
import { ColumnMovingAnimationMode } from 'igniteui-webcomponents-grids';

private grid: IgcDataGridComponent;
private columnChooser: IgcColumnChooserComponent;

connectedCallback() {
    this.columnChooser.targetGrid = this.grid;
    this.columnChooser.showAllText = "Show All";
    this.columnChooser.hideAllText = "Hide All";
    this.grid.columnMovingAnimationMode = ColumnMovingAnimationMode.SlideOver;
}