Web Components Tree Grid の Excel スタイル フィルタリング
Web Components Tree Grid は、Excel のようなフィルタリング UI を提供する Excel スタイルのフィルタリング機能を公開します。これにより、大規模なデータセットを操作するプロセスが簡素化されます。主なアイデアは、無関係なエントリを排除しながら、最も関連性の高いデータをフィルタリングできるようにすることです。
Web Components Tree Grid Excel スタイル フィルタリングの例
export class FoodsDataItem {
public constructor(init: Partial<FoodsDataItem>) {
Object.assign(this, init);
}
public ID: number;
public ParentID: number;
public Name: string;
public UnitPrice: number;
public AddedDate: string;
public Discontinued: boolean;
}
export class FoodsData extends Array<FoodsDataItem> {
public constructor(items: Array<FoodsDataItem> | number = -1) {
if (Array.isArray(items)) {
super(...items);
} else {
const newItems = [
new FoodsDataItem(
{
ID: 1,
ParentID: -1,
Name: `Foods`,
UnitPrice: 0,
AddedDate: `2009-06-19`,
Discontinued: false
}),
new FoodsDataItem(
{
ID: 101,
ParentID: 1,
Name: `Chef Antons Gumbo Mix`,
UnitPrice: 21.35,
AddedDate: `2011-11-11`,
Discontinued: true
}),
new FoodsDataItem(
{
ID: 102,
ParentID: 1,
Name: `Grandmas Boysenberry Spread`,
UnitPrice: 25,
AddedDate: `2017-12-17`,
Discontinued: false
}),
new FoodsDataItem(
{
ID: 103,
ParentID: 1,
Name: `Uncle Bobs Organic Dried Pears`,
UnitPrice: 30,
AddedDate: `2016-07-17`,
Discontinued: false
}),
new FoodsDataItem(
{
ID: 104,
ParentID: 1,
Name: `Mishi Kobe Niku`,
UnitPrice: 97,
AddedDate: `2010-02-17`,
Discontinued: true
}),
new FoodsDataItem(
{
ID: 105,
ParentID: 1,
Name: `Queso Cabrales`,
UnitPrice: 21,
AddedDate: `2009-11-17`,
Discontinued: false
}),
new FoodsDataItem(
{
ID: 106,
ParentID: 1,
Name: `Queso Manchego La Pastora`,
UnitPrice: 38,
AddedDate: `2015-11-17`,
Discontinued: false
}),
new FoodsDataItem(
{
ID: 107,
ParentID: 1,
Name: `Konbu`,
UnitPrice: 6,
AddedDate: `2025-03-17`,
Discontinued: false
}),
new FoodsDataItem(
{
ID: 108,
ParentID: 1,
Name: `Tofu`,
UnitPrice: 23.25,
AddedDate: `2019-06-17`,
Discontinued: false
}),
new FoodsDataItem(
{
ID: 109,
ParentID: 1,
Name: `Ikura`,
UnitPrice: 31,
AddedDate: `2010-05-17`,
Discontinued: false
}),
new FoodsDataItem(
{
ID: 110,
ParentID: 1,
Name: `Pavlova`,
UnitPrice: 17.45,
AddedDate: `2018-03-28`,
Discontinued: false
}),
new FoodsDataItem(
{
ID: 111,
ParentID: 1,
Name: `Alice Mutton`,
UnitPrice: 39,
AddedDate: `2015-08-17`,
Discontinued: true
}),
new FoodsDataItem(
{
ID: 112,
ParentID: 1,
Name: `Carnarvon Tigers`,
UnitPrice: 62.5,
AddedDate: `2015-09-27`,
Discontinued: false
}),
new FoodsDataItem(
{
ID: 113,
ParentID: 1,
Name: `Teatime Chocolate Biscuits`,
UnitPrice: 9.2,
AddedDate: `2011-03-17`,
Discontinued: false
}),
new FoodsDataItem(
{
ID: 2,
ParentID: -1,
Name: `Beverages`,
UnitPrice: 0,
AddedDate: `2009-06-19`,
Discontinued: false
}),
new FoodsDataItem(
{
ID: 201,
ParentID: 2,
Name: `Chai`,
UnitPrice: 18,
AddedDate: `2012-02-12`,
Discontinued: false
}),
new FoodsDataItem(
{
ID: 202,
ParentID: 2,
Name: `Chang`,
UnitPrice: 19,
AddedDate: `2013-03-17`,
Discontinued: false
}),
new FoodsDataItem(
{
ID: 3,
ParentID: -1,
Name: `Sauces`,
UnitPrice: 0,
AddedDate: `2009-06-19`,
Discontinued: false
}),
new FoodsDataItem(
{
ID: 301,
ParentID: 3,
Name: `Aniseed Syrup`,
UnitPrice: 10,
AddedDate: `2016-03-17`,
Discontinued: false
}),
new FoodsDataItem(
{
ID: 302,
ParentID: 3,
Name: `Chef Antons Cajun Seasoning`,
UnitPrice: 22,
AddedDate: `2012-03-17`,
Discontinued: true
}),
new FoodsDataItem(
{
ID: 303,
ParentID: 3,
Name: `Northwoods Cranberry Sauce`,
UnitPrice: 40,
AddedDate: `2012-01-17`,
Discontinued: false
}),
new FoodsDataItem(
{
ID: 304,
ParentID: 3,
Name: `Genen Shouyu`,
UnitPrice: 15.5,
AddedDate: `2010-03-17`,
Discontinued: false
}),
new FoodsDataItem(
{
ID: 305,
ParentID: 3,
Name: `Sir Rodneys Marmalade`,
UnitPrice: 18,
AddedDate: `2015-03-17`,
Discontinued: false
}),
];
super(...newItems.slice(0));
}
}
}
tsimport { IgcPropertyEditorPanelModule } from 'igniteui-webcomponents-layouts';
import 'igniteui-webcomponents-grids/grids/combined';
import { ComponentRenderer, PropertyEditorPanelDescriptionModule, WebGridDescriptionModule } from 'igniteui-webcomponents-core';
import { IgcPropertyEditorPanelComponent, IgcPropertyEditorPropertyDescriptionComponent } from 'igniteui-webcomponents-layouts';
import { IgcTreeGridComponent, IgcColumnComponent } from 'igniteui-webcomponents-grids/grids';
import { FoodsDataItem, FoodsData } from './FoodsData';
import { IgcPropertyEditorPropertyDescriptionChangedEventArgs } from 'igniteui-webcomponents-layouts';
import { IgcCellTemplateContext } from 'igniteui-webcomponents-grids/grids';
import { html, nothing } from 'lit-html';
import "igniteui-webcomponents-grids/grids/themes/light/bootstrap.css";
import 'igniteui-webcomponents/themes/light/bootstrap.css';
import { defineAllComponents } from 'igniteui-webcomponents';
import { ModuleManager } from 'igniteui-webcomponents-core';
defineAllComponents();
import "./index.css";
ModuleManager.register(
IgcPropertyEditorPanelModule
);
export class Sample {
private propertyEditor: IgcPropertyEditorPanelComponent
private sizeEditor: IgcPropertyEditorPropertyDescriptionComponent
private treeGrid: IgcTreeGridComponent
private column1: IgcColumnComponent
private _bind: () => void;
constructor() {
var propertyEditor = this.propertyEditor = document.getElementById('PropertyEditor') as IgcPropertyEditorPanelComponent;
var sizeEditor = this.sizeEditor = document.getElementById('SizeEditor') as IgcPropertyEditorPropertyDescriptionComponent;
this.webTreeGridSetGridSize = this.webTreeGridSetGridSize.bind(this);
var treeGrid = this.treeGrid = document.getElementById('treeGrid') as IgcTreeGridComponent;
var column1 = this.column1 = document.getElementById('column1') as IgcColumnComponent;
this._bind = () => {
propertyEditor.componentRenderer = this.renderer;
propertyEditor.target = this.treeGrid;
sizeEditor.changed = this.webTreeGridSetGridSize;
treeGrid.data = this.foodsData;
column1.bodyTemplate = this.webGridBooleanCellTemplate;
}
this._bind();
}
private _foodsData: FoodsData = null;
public get foodsData(): FoodsData {
if (this._foodsData == null)
{
this._foodsData = new FoodsData();
}
return this._foodsData;
}
private _componentRenderer: ComponentRenderer = null;
public get renderer(): ComponentRenderer {
if (this._componentRenderer == null) {
this._componentRenderer = new ComponentRenderer();
var context = this._componentRenderer.context;
PropertyEditorPanelDescriptionModule.register(context);
WebGridDescriptionModule.register(context);
}
return this._componentRenderer;
}
public webTreeGridSetGridSize(sender: any, args: IgcPropertyEditorPropertyDescriptionChangedEventArgs): void {
var newVal = (args.newValue as string).toLowerCase();
var grid = document.getElementById("treeGrid");
grid.style.setProperty('--ig-size', `var(--ig-size-${newVal})`);
}
public webGridBooleanCellTemplate = (ctx: IgcCellTemplateContext) => {
if (ctx.cell.value) {
return html`<img src="https://static.infragistics.com/xplatform/images/grid/active.png" title="Continued" alt="Continued" />`
} else {
return html`<img src="https://static.infragistics.com/xplatform/images/grid/expired.png" title="Discontinued" alt="Discontinued" />`;
}
}
}
new Sample();
ts<!DOCTYPE html>
<html>
<head>
<title>Sample | Ignite UI | Web Components | infragistics</title>
<meta charset="UTF-8" />
<link rel="shortcut icon" href="https://static.infragistics.com/xplatform/images/browsers/wc.png" >
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" />
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Kanit&display=swap" />
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Titillium Web" />
<link rel="stylesheet" href="https://static.infragistics.com/xplatform/css/samples/shared.v8.css" />
<link rel="stylesheet" href="/src/index.css" type="text/css" />
</head>
<body>
<div id="root">
<div class="container sample ig-typography">
<div class="options vertical">
<igc-property-editor-panel
name="PropertyEditor"
id="PropertyEditor"
description-type="WebGrid"
is-horizontal="true"
is-wrapping-enabled="true">
<igc-property-editor-property-description
name="SizeEditor"
id="SizeEditor"
label="Grid Size:"
value-type="EnumValue"
drop-down-names="Small, Medium, Large"
drop-down-values="Small, Medium, Large">
</igc-property-editor-property-description>
</igc-property-editor-panel>
</div>
<div class="container fill">
<igc-tree-grid
auto-generate="false"
id="treeGrid"
name="treeGrid"
id="treeGrid"
primary-key="ID"
foreign-key="ParentID"
moving="true"
allow-filtering="true"
filter-mode="excelStyleFilter">
<igc-grid-toolbar
>
<igc-grid-toolbar-actions
>
<igc-grid-toolbar-hiding
>
</igc-grid-toolbar-hiding>
<igc-grid-toolbar-pinning
>
</igc-grid-toolbar-pinning>
</igc-grid-toolbar-actions>
</igc-grid-toolbar>
<igc-column
field="ID"
header="ID"
sortable="true">
</igc-column>
<igc-column
field="Name"
header="Product Name"
sortable="true">
</igc-column>
<igc-column
field="UnitPrice"
header="Unit Price"
sortable="true"
data-type="currency">
</igc-column>
<igc-column
field="AddedDate"
header="Added Date"
sortable="true"
data-type="date">
</igc-column>
<igc-column
field="Discontinued"
data-type="boolean"
name="column1"
id="column1">
</igc-column>
</igc-tree-grid>
</div>
</div>
</div>
<!-- This script is needed only for parcel and it will be excluded for webpack -->
<% if (false) { %><script src="src/index.ts"></script><% } %>
</body>
</html>
html/* shared styles are loaded from: */
/* https://static.infragistics.com/xplatform/css/samples */
css
このサンプルが気に入りましたか? 完全な Ignite UI for Web Componentsツールキットにアクセスして、すばやく独自のアプリの作成を開始します。無料でダウンロードできます。
使用方法
IgcTreeGridComponent
コンポーネントの Excel スタイル フィルタリングをオンにするには、2 つの入力を設定します。AllowFiltering
を true に設定し、FilterMode
を ExcelStyleFilter
に設定してください。
<igc-tree-grid auto-generate="true" allow-filtering="true" filter-mode="excelStyleFilter" >
</igc-tree-grid>
html
インタラクション
特定の列のフィルター メニューを開くには、ヘッダーの Web Components フィルター アイコンをクリックします。さらに、選択したヘッダーで Ctrl + Shift + L の組み合わせを使用できます。列でフィルタリング機能とソート、ピン固定、移動、選択、非表示が設定された場合、オンになっている機能のボタンが表示されます。
フィルターが適用されていない場合、リストのすべての項目が選択されます¥。リストの上の入力からフィルターされます。データのフィルターは、リストで項目を選択/非選択して [適用] ボタンをクリックするか、あるいは Enter. を押します。リスト項目に適用したフィルタリングは、equals
オペレーターでフィルター式を作成します。各式間のロジック オペレーターは OR
です。
検索ボックスに入力してフィルターを適用すると、検索条件に一致する項目のみが選択されます。ただし、現在フィルターされている項目に項目を追加したい場合は、[現在の選択をフィルターに追加] オプションを選択する必要があります。
フィルターをクリアしたい場合、[すべて選択] オプションをチェックして [適用] ボタンを押します。
異なる式でフィルターを適用する場合、テキスト フィルターをクリックし、特定の列で使用できるフィルター演算子のサブメニューを開きます。いずれかを選択してカスタム フィルター ダイアログを開き、フィルターとロジック演算子を使用して式を追加できます。[クリア] ボタンでフィルターをクリアできます。
メニュー機能の構成
ソート、ピン固定、および非表示機能は、対応する入力を使用してフィルター メニューから削除できます: sortable
、selected
、disablePinning
、disableHiding
。
<igc-tree-grid id="treegrid1" auto-generate="false" height="480px" width="100%" moving="true" allow-filtering="true"
primary-key="ID" foreign-key="ParentID" filter-mode="ExcelStyleFilter">
<igc-column field="ID" header="Product ID" data-type="String">
</igc-column>
<igc-column field="Name" header="Product Name" sortable="true" data-type="'string'">
</igc-column>
<igc-column field="UnitPrice" header="Unit Price" data-type="Number" sortable="false" disable-pinning="true" disable-hiding="true">
</igc-column>
<igc-column field="AddedDate" header="Added Date" data-type="Date" sortable="false">
</igc-column>
<igc-column field="Discontinued" header="Discontinued" data-type="Boolean" sortable="true">
</igc-column>
</igc-tree-grid>
html
以下のサンプルでは、「Product Name」 列と 「Discontinued」 列で 3 つの機能がすべて有効化され、「Unit Price」 で 3 つすべてが無効化され、「Added Date」 でピン固定と非表示のみが設定されています。
export class FoodsDataItem {
public constructor(init: Partial<FoodsDataItem>) {
Object.assign(this, init);
}
public ID: number;
public ParentID: number;
public Name: string;
public UnitPrice: number;
public AddedDate: string;
public Discontinued: boolean;
}
export class FoodsData extends Array<FoodsDataItem> {
public constructor(items: Array<FoodsDataItem> | number = -1) {
if (Array.isArray(items)) {
super(...items);
} else {
const newItems = [
new FoodsDataItem(
{
ID: 1,
ParentID: -1,
Name: `Foods`,
UnitPrice: 0,
AddedDate: `2009-06-19`,
Discontinued: false
}),
new FoodsDataItem(
{
ID: 101,
ParentID: 1,
Name: `Chef Antons Gumbo Mix`,
UnitPrice: 21.35,
AddedDate: `2011-11-11`,
Discontinued: true
}),
new FoodsDataItem(
{
ID: 102,
ParentID: 1,
Name: `Grandmas Boysenberry Spread`,
UnitPrice: 25,
AddedDate: `2017-12-17`,
Discontinued: false
}),
new FoodsDataItem(
{
ID: 103,
ParentID: 1,
Name: `Uncle Bobs Organic Dried Pears`,
UnitPrice: 30,
AddedDate: `2016-07-17`,
Discontinued: false
}),
new FoodsDataItem(
{
ID: 104,
ParentID: 1,
Name: `Mishi Kobe Niku`,
UnitPrice: 97,
AddedDate: `2010-02-17`,
Discontinued: true
}),
new FoodsDataItem(
{
ID: 105,
ParentID: 1,
Name: `Queso Cabrales`,
UnitPrice: 21,
AddedDate: `2009-11-17`,
Discontinued: false
}),
new FoodsDataItem(
{
ID: 106,
ParentID: 1,
Name: `Queso Manchego La Pastora`,
UnitPrice: 38,
AddedDate: `2015-11-17`,
Discontinued: false
}),
new FoodsDataItem(
{
ID: 107,
ParentID: 1,
Name: `Konbu`,
UnitPrice: 6,
AddedDate: `2025-03-17`,
Discontinued: false
}),
new FoodsDataItem(
{
ID: 108,
ParentID: 1,
Name: `Tofu`,
UnitPrice: 23.25,
AddedDate: `2019-06-17`,
Discontinued: false
}),
new FoodsDataItem(
{
ID: 109,
ParentID: 1,
Name: `Ikura`,
UnitPrice: 31,
AddedDate: `2010-05-17`,
Discontinued: false
}),
new FoodsDataItem(
{
ID: 110,
ParentID: 1,
Name: `Pavlova`,
UnitPrice: 17.45,
AddedDate: `2018-03-28`,
Discontinued: false
}),
new FoodsDataItem(
{
ID: 111,
ParentID: 1,
Name: `Alice Mutton`,
UnitPrice: 39,
AddedDate: `2015-08-17`,
Discontinued: true
}),
new FoodsDataItem(
{
ID: 112,
ParentID: 1,
Name: `Carnarvon Tigers`,
UnitPrice: 62.5,
AddedDate: `2015-09-27`,
Discontinued: false
}),
new FoodsDataItem(
{
ID: 113,
ParentID: 1,
Name: `Teatime Chocolate Biscuits`,
UnitPrice: 9.2,
AddedDate: `2011-03-17`,
Discontinued: false
}),
new FoodsDataItem(
{
ID: 2,
ParentID: -1,
Name: `Beverages`,
UnitPrice: 0,
AddedDate: `2009-06-19`,
Discontinued: false
}),
new FoodsDataItem(
{
ID: 201,
ParentID: 2,
Name: `Chai`,
UnitPrice: 18,
AddedDate: `2012-02-12`,
Discontinued: false
}),
new FoodsDataItem(
{
ID: 202,
ParentID: 2,
Name: `Chang`,
UnitPrice: 19,
AddedDate: `2013-03-17`,
Discontinued: false
}),
new FoodsDataItem(
{
ID: 3,
ParentID: -1,
Name: `Sauces`,
UnitPrice: 0,
AddedDate: `2009-06-19`,
Discontinued: false
}),
new FoodsDataItem(
{
ID: 301,
ParentID: 3,
Name: `Aniseed Syrup`,
UnitPrice: 10,
AddedDate: `2016-03-17`,
Discontinued: false
}),
new FoodsDataItem(
{
ID: 302,
ParentID: 3,
Name: `Chef Antons Cajun Seasoning`,
UnitPrice: 22,
AddedDate: `2012-03-17`,
Discontinued: true
}),
new FoodsDataItem(
{
ID: 303,
ParentID: 3,
Name: `Northwoods Cranberry Sauce`,
UnitPrice: 40,
AddedDate: `2012-01-17`,
Discontinued: false
}),
new FoodsDataItem(
{
ID: 304,
ParentID: 3,
Name: `Genen Shouyu`,
UnitPrice: 15.5,
AddedDate: `2010-03-17`,
Discontinued: false
}),
new FoodsDataItem(
{
ID: 305,
ParentID: 3,
Name: `Sir Rodneys Marmalade`,
UnitPrice: 18,
AddedDate: `2015-03-17`,
Discontinued: false
}),
];
super(...newItems.slice(0));
}
}
}
tsimport 'igniteui-webcomponents-grids/grids/combined';
import { ComponentRenderer, WebGridDescriptionModule } from 'igniteui-webcomponents-core';
import { IgcTreeGridComponent, IgcColumnComponent } from 'igniteui-webcomponents-grids/grids';
import { FoodsDataItem, FoodsData } from './FoodsData';
import { IgcCellTemplateContext } from 'igniteui-webcomponents-grids/grids';
import { html, nothing } from 'lit-html';
import "igniteui-webcomponents-grids/grids/themes/light/bootstrap.css";
import "./index.css";
export class Sample {
private grid: IgcTreeGridComponent
private column1: IgcColumnComponent
private _bind: () => void;
constructor() {
var grid = this.grid = document.getElementById('grid') as IgcTreeGridComponent;
var column1 = this.column1 = document.getElementById('column1') as IgcColumnComponent;
this._bind = () => {
grid.data = this.foodsData;
column1.bodyTemplate = this.webGridBooleanCellTemplate;
}
this._bind();
}
private _foodsData: FoodsData = null;
public get foodsData(): FoodsData {
if (this._foodsData == null)
{
this._foodsData = new FoodsData();
}
return this._foodsData;
}
private _componentRenderer: ComponentRenderer = null;
public get renderer(): ComponentRenderer {
if (this._componentRenderer == null) {
this._componentRenderer = new ComponentRenderer();
var context = this._componentRenderer.context;
WebGridDescriptionModule.register(context);
}
return this._componentRenderer;
}
public webGridBooleanCellTemplate = (ctx: IgcCellTemplateContext) => {
if (ctx.cell.value) {
return html`<img src="https://static.infragistics.com/xplatform/images/grid/active.png" title="Continued" alt="Continued" />`
} else {
return html`<img src="https://static.infragistics.com/xplatform/images/grid/expired.png" title="Discontinued" alt="Discontinued" />`;
}
}
}
new Sample();
ts<!DOCTYPE html>
<html>
<head>
<title>Sample | Ignite UI | Web Components | infragistics</title>
<meta charset="UTF-8" />
<link rel="shortcut icon" href="https://static.infragistics.com/xplatform/images/browsers/wc.png" >
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" />
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Kanit&display=swap" />
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Titillium Web" />
<link rel="stylesheet" href="https://static.infragistics.com/xplatform/css/samples/shared.v8.css" />
<link rel="stylesheet" href="/src/index.css" type="text/css" />
</head>
<body>
<div id="root">
<div class="container sample ig-typography">
<div class="container fill">
<igc-tree-grid
auto-generate="false"
name="grid"
id="grid"
primary-key="ID"
foreign-key="ParentID"
moving="true"
allow-filtering="true"
filter-mode="excelStyleFilter">
<igc-grid-toolbar
>
<igc-grid-toolbar-actions
>
<igc-grid-toolbar-hiding
>
</igc-grid-toolbar-hiding>
<igc-grid-toolbar-pinning
>
</igc-grid-toolbar-pinning>
</igc-grid-toolbar-actions>
</igc-grid-toolbar>
<igc-column
field="ID"
header="ID">
</igc-column>
<igc-column
field="Name"
header="Product Name"
sortable="true">
</igc-column>
<igc-column
field="UnitPrice"
header="Unit Price"
sortable="false"
data-type="number"
disable-pinning="true"
disable-hiding="true">
</igc-column>
<igc-column
field="AddedDate"
header="Added Date"
sortable="false"
data-type="date">
</igc-column>
<igc-column
field="Discontinued"
data-type="boolean"
sortable="true"
name="column1"
id="column1">
</igc-column>
</igc-tree-grid>
</div>
</div>
</div>
<!-- This script is needed only for parcel and it will be excluded for webpack -->
<% if (false) { %><script src="src/index.ts"></script><% } %>
</body>
</html>
html/* shared styles are loaded from: */
/* https://static.infragistics.com/xplatform/css/samples */
css
テンプレート
Excel スタイル フィルター メニューをさらにカスタマイズする場合は、ExcelStyleHeaderIconTemplate
プロパティを使用して、メニューのヘッダー アイコンのカスタム テンプレートを定義できます。
次のコードは、ExcelStyleHeaderIconTemplate
を使用して Excel スタイル フィルター メニューをカスタマイズする方法を示しています。
constructor() {
var grid = this.grid = document.getElementById('grid') as IgcTreeGridComponent;
grid.excelStyleHeaderIconTemplate = this.webGridFilterAltIconTemplate;
}
public webGridFilterAltIconTemplate = (ctx: IgcCellTemplateContext) => {
return html`<img height="15px" width="15px" src="http://static.infragistics.com/xplatform/images/grid/propeller-logo.svg" title="Continued" alt="Continued" />`
}
ts
export class FoodsDataItem {
public constructor(init: Partial<FoodsDataItem>) {
Object.assign(this, init);
}
public ID: number;
public ParentID: number;
public Name: string;
public UnitPrice: number;
public AddedDate: string;
public Discontinued: boolean;
}
export class FoodsData extends Array<FoodsDataItem> {
public constructor(items: Array<FoodsDataItem> | number = -1) {
if (Array.isArray(items)) {
super(...items);
} else {
const newItems = [
new FoodsDataItem(
{
ID: 1,
ParentID: -1,
Name: `Foods`,
UnitPrice: 0,
AddedDate: `2009-06-19`,
Discontinued: false
}),
new FoodsDataItem(
{
ID: 101,
ParentID: 1,
Name: `Chef Antons Gumbo Mix`,
UnitPrice: 21.35,
AddedDate: `2011-11-11`,
Discontinued: true
}),
new FoodsDataItem(
{
ID: 102,
ParentID: 1,
Name: `Grandmas Boysenberry Spread`,
UnitPrice: 25,
AddedDate: `2017-12-17`,
Discontinued: false
}),
new FoodsDataItem(
{
ID: 103,
ParentID: 1,
Name: `Uncle Bobs Organic Dried Pears`,
UnitPrice: 30,
AddedDate: `2016-07-17`,
Discontinued: false
}),
new FoodsDataItem(
{
ID: 104,
ParentID: 1,
Name: `Mishi Kobe Niku`,
UnitPrice: 97,
AddedDate: `2010-02-17`,
Discontinued: true
}),
new FoodsDataItem(
{
ID: 105,
ParentID: 1,
Name: `Queso Cabrales`,
UnitPrice: 21,
AddedDate: `2009-11-17`,
Discontinued: false
}),
new FoodsDataItem(
{
ID: 106,
ParentID: 1,
Name: `Queso Manchego La Pastora`,
UnitPrice: 38,
AddedDate: `2015-11-17`,
Discontinued: false
}),
new FoodsDataItem(
{
ID: 107,
ParentID: 1,
Name: `Konbu`,
UnitPrice: 6,
AddedDate: `2025-03-17`,
Discontinued: false
}),
new FoodsDataItem(
{
ID: 108,
ParentID: 1,
Name: `Tofu`,
UnitPrice: 23.25,
AddedDate: `2019-06-17`,
Discontinued: false
}),
new FoodsDataItem(
{
ID: 109,
ParentID: 1,
Name: `Ikura`,
UnitPrice: 31,
AddedDate: `2010-05-17`,
Discontinued: false
}),
new FoodsDataItem(
{
ID: 110,
ParentID: 1,
Name: `Pavlova`,
UnitPrice: 17.45,
AddedDate: `2018-03-28`,
Discontinued: false
}),
new FoodsDataItem(
{
ID: 111,
ParentID: 1,
Name: `Alice Mutton`,
UnitPrice: 39,
AddedDate: `2015-08-17`,
Discontinued: true
}),
new FoodsDataItem(
{
ID: 112,
ParentID: 1,
Name: `Carnarvon Tigers`,
UnitPrice: 62.5,
AddedDate: `2015-09-27`,
Discontinued: false
}),
new FoodsDataItem(
{
ID: 113,
ParentID: 1,
Name: `Teatime Chocolate Biscuits`,
UnitPrice: 9.2,
AddedDate: `2011-03-17`,
Discontinued: false
}),
new FoodsDataItem(
{
ID: 2,
ParentID: -1,
Name: `Beverages`,
UnitPrice: 0,
AddedDate: `2009-06-19`,
Discontinued: false
}),
new FoodsDataItem(
{
ID: 201,
ParentID: 2,
Name: `Chai`,
UnitPrice: 18,
AddedDate: `2012-02-12`,
Discontinued: false
}),
new FoodsDataItem(
{
ID: 202,
ParentID: 2,
Name: `Chang`,
UnitPrice: 19,
AddedDate: `2013-03-17`,
Discontinued: false
}),
new FoodsDataItem(
{
ID: 3,
ParentID: -1,
Name: `Sauces`,
UnitPrice: 0,
AddedDate: `2009-06-19`,
Discontinued: false
}),
new FoodsDataItem(
{
ID: 301,
ParentID: 3,
Name: `Aniseed Syrup`,
UnitPrice: 10,
AddedDate: `2016-03-17`,
Discontinued: false
}),
new FoodsDataItem(
{
ID: 302,
ParentID: 3,
Name: `Chef Antons Cajun Seasoning`,
UnitPrice: 22,
AddedDate: `2012-03-17`,
Discontinued: true
}),
new FoodsDataItem(
{
ID: 303,
ParentID: 3,
Name: `Northwoods Cranberry Sauce`,
UnitPrice: 40,
AddedDate: `2012-01-17`,
Discontinued: false
}),
new FoodsDataItem(
{
ID: 304,
ParentID: 3,
Name: `Genen Shouyu`,
UnitPrice: 15.5,
AddedDate: `2010-03-17`,
Discontinued: false
}),
new FoodsDataItem(
{
ID: 305,
ParentID: 3,
Name: `Sir Rodneys Marmalade`,
UnitPrice: 18,
AddedDate: `2015-03-17`,
Discontinued: false
}),
];
super(...newItems.slice(0));
}
}
}
tsimport 'igniteui-webcomponents-grids/grids/combined';
import { ComponentRenderer, WebGridDescriptionModule } from 'igniteui-webcomponents-core';
import { IgcTreeGridComponent, IgcColumnComponent } from 'igniteui-webcomponents-grids/grids';
import { FoodsDataItem, FoodsData } from './FoodsData';
import { IgcCellTemplateContext } from 'igniteui-webcomponents-grids/grids';
import { html, nothing } from 'lit-html';
import "igniteui-webcomponents-grids/grids/themes/light/bootstrap.css";
import "./index.css";
export class Sample {
private grid: IgcTreeGridComponent
private column1: IgcColumnComponent
private _bind: () => void;
constructor() {
var grid = this.grid = document.getElementById('grid') as IgcTreeGridComponent;
var column1 = this.column1 = document.getElementById('column1') as IgcColumnComponent;
this._bind = () => {
grid.data = this.foodsData;
grid.excelStyleHeaderIconTemplate = this.webGridFilterAltIconTemplate;
column1.bodyTemplate = this.webGridBooleanCellTemplate;
}
this._bind();
}
private _foodsData: FoodsData = null;
public get foodsData(): FoodsData {
if (this._foodsData == null)
{
this._foodsData = new FoodsData();
}
return this._foodsData;
}
private _componentRenderer: ComponentRenderer = null;
public get renderer(): ComponentRenderer {
if (this._componentRenderer == null) {
this._componentRenderer = new ComponentRenderer();
var context = this._componentRenderer.context;
WebGridDescriptionModule.register(context);
}
return this._componentRenderer;
}
public webGridFilterAltIconTemplate = (ctx: IgcCellTemplateContext) => {
return html`<img height="15px" width="15px" src="http://static.infragistics.com/xplatform/images/grid/propeller-logo.svg" title="Continued" alt="Continued" />`
}
public webGridBooleanCellTemplate = (ctx: IgcCellTemplateContext) => {
if (ctx.cell.value) {
return html`<img src="https://static.infragistics.com/xplatform/images/grid/active.png" title="Continued" alt="Continued" />`
} else {
return html`<img src="https://static.infragistics.com/xplatform/images/grid/expired.png" title="Discontinued" alt="Discontinued" />`;
}
}
}
new Sample();
ts<!DOCTYPE html>
<html>
<head>
<title>Sample | Ignite UI | Web Components | infragistics</title>
<meta charset="UTF-8" />
<link rel="shortcut icon" href="https://static.infragistics.com/xplatform/images/browsers/wc.png" >
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" />
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Kanit&display=swap" />
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Titillium Web" />
<link rel="stylesheet" href="https://static.infragistics.com/xplatform/css/samples/shared.v8.css" />
<link rel="stylesheet" href="/src/index.css" type="text/css" />
</head>
<body>
<div id="root">
<div class="container sample ig-typography">
<div class="container fill">
<igc-tree-grid
auto-generate="false"
name="grid"
id="grid"
primary-key="ID"
foreign-key="ParentID"
moving="true"
allow-filtering="true"
filter-mode="excelStyleFilter">
<igc-grid-toolbar
>
<igc-grid-toolbar-actions
>
<igc-grid-toolbar-hiding
>
</igc-grid-toolbar-hiding>
</igc-grid-toolbar-actions>
</igc-grid-toolbar>
<igc-column
field="ID"
header="ID"
sortable="true">
</igc-column>
<igc-column
field="Name"
header="Product Name"
sortable="true">
</igc-column>
<igc-column
field="UnitPrice"
header="Unit Price"
sortable="true"
data-type="currency">
</igc-column>
<igc-column
field="AddedDate"
header="Added Date"
sortable="true"
data-type="date">
</igc-column>
<igc-column
field="Discontinued"
data-type="boolean"
name="column1"
id="column1">
</igc-column>
</igc-tree-grid>
</div>
</div>
</div>
<!-- This script is needed only for parcel and it will be excluded for webpack -->
<% if (false) { %><script src="src/index.ts"></script><% } %>
</body>
</html>
html/* shared styles are loaded from: */
/* https://static.infragistics.com/xplatform/css/samples */
css
スタイル設定
定義済みのテーマに加えて、利用可能な CSS プロパティのいくつかを設定することで、グリッドをさらにカスタマイズできます。 一部の色を変更したい場合は、最初にグリッドのクラスを設定する必要があります。
<igc-tree-grid class="grid"></igc-tree-grid>
html
次に、そのクラスに関連する CSS プロパティを設定します。
.grid {
--ig-grid-filtering-row-background: #ffcd0f;
--ig-list-item-background: #ffcd0f;
}
css
デモ
export class FoodsDataItem {
public constructor(init: Partial<FoodsDataItem>) {
Object.assign(this, init);
}
public ID: number;
public ParentID: number;
public Name: string;
public UnitPrice: number;
public AddedDate: string;
public Discontinued: boolean;
}
export class FoodsData extends Array<FoodsDataItem> {
public constructor(items: Array<FoodsDataItem> | number = -1) {
if (Array.isArray(items)) {
super(...items);
} else {
const newItems = [
new FoodsDataItem(
{
ID: 1,
ParentID: -1,
Name: `Foods`,
UnitPrice: 0,
AddedDate: `2009-06-19`,
Discontinued: false
}),
new FoodsDataItem(
{
ID: 101,
ParentID: 1,
Name: `Chef Antons Gumbo Mix`,
UnitPrice: 21.35,
AddedDate: `2011-11-11`,
Discontinued: true
}),
new FoodsDataItem(
{
ID: 102,
ParentID: 1,
Name: `Grandmas Boysenberry Spread`,
UnitPrice: 25,
AddedDate: `2017-12-17`,
Discontinued: false
}),
new FoodsDataItem(
{
ID: 103,
ParentID: 1,
Name: `Uncle Bobs Organic Dried Pears`,
UnitPrice: 30,
AddedDate: `2016-07-17`,
Discontinued: false
}),
new FoodsDataItem(
{
ID: 104,
ParentID: 1,
Name: `Mishi Kobe Niku`,
UnitPrice: 97,
AddedDate: `2010-02-17`,
Discontinued: true
}),
new FoodsDataItem(
{
ID: 105,
ParentID: 1,
Name: `Queso Cabrales`,
UnitPrice: 21,
AddedDate: `2009-11-17`,
Discontinued: false
}),
new FoodsDataItem(
{
ID: 106,
ParentID: 1,
Name: `Queso Manchego La Pastora`,
UnitPrice: 38,
AddedDate: `2015-11-17`,
Discontinued: false
}),
new FoodsDataItem(
{
ID: 107,
ParentID: 1,
Name: `Konbu`,
UnitPrice: 6,
AddedDate: `2025-03-17`,
Discontinued: false
}),
new FoodsDataItem(
{
ID: 108,
ParentID: 1,
Name: `Tofu`,
UnitPrice: 23.25,
AddedDate: `2019-06-17`,
Discontinued: false
}),
new FoodsDataItem(
{
ID: 109,
ParentID: 1,
Name: `Ikura`,
UnitPrice: 31,
AddedDate: `2010-05-17`,
Discontinued: false
}),
new FoodsDataItem(
{
ID: 110,
ParentID: 1,
Name: `Pavlova`,
UnitPrice: 17.45,
AddedDate: `2018-03-28`,
Discontinued: false
}),
new FoodsDataItem(
{
ID: 111,
ParentID: 1,
Name: `Alice Mutton`,
UnitPrice: 39,
AddedDate: `2015-08-17`,
Discontinued: true
}),
new FoodsDataItem(
{
ID: 112,
ParentID: 1,
Name: `Carnarvon Tigers`,
UnitPrice: 62.5,
AddedDate: `2015-09-27`,
Discontinued: false
}),
new FoodsDataItem(
{
ID: 113,
ParentID: 1,
Name: `Teatime Chocolate Biscuits`,
UnitPrice: 9.2,
AddedDate: `2011-03-17`,
Discontinued: false
}),
new FoodsDataItem(
{
ID: 2,
ParentID: -1,
Name: `Beverages`,
UnitPrice: 0,
AddedDate: `2009-06-19`,
Discontinued: false
}),
new FoodsDataItem(
{
ID: 201,
ParentID: 2,
Name: `Chai`,
UnitPrice: 18,
AddedDate: `2012-02-12`,
Discontinued: false
}),
new FoodsDataItem(
{
ID: 202,
ParentID: 2,
Name: `Chang`,
UnitPrice: 19,
AddedDate: `2013-03-17`,
Discontinued: false
}),
new FoodsDataItem(
{
ID: 3,
ParentID: -1,
Name: `Sauces`,
UnitPrice: 0,
AddedDate: `2009-06-19`,
Discontinued: false
}),
new FoodsDataItem(
{
ID: 301,
ParentID: 3,
Name: `Aniseed Syrup`,
UnitPrice: 10,
AddedDate: `2016-03-17`,
Discontinued: false
}),
new FoodsDataItem(
{
ID: 302,
ParentID: 3,
Name: `Chef Antons Cajun Seasoning`,
UnitPrice: 22,
AddedDate: `2012-03-17`,
Discontinued: true
}),
new FoodsDataItem(
{
ID: 303,
ParentID: 3,
Name: `Northwoods Cranberry Sauce`,
UnitPrice: 40,
AddedDate: `2012-01-17`,
Discontinued: false
}),
new FoodsDataItem(
{
ID: 304,
ParentID: 3,
Name: `Genen Shouyu`,
UnitPrice: 15.5,
AddedDate: `2010-03-17`,
Discontinued: false
}),
new FoodsDataItem(
{
ID: 305,
ParentID: 3,
Name: `Sir Rodneys Marmalade`,
UnitPrice: 18,
AddedDate: `2015-03-17`,
Discontinued: false
}),
];
super(...newItems.slice(0));
}
}
}
tsimport 'igniteui-webcomponents-grids/grids/combined';
import { ComponentRenderer, WebGridDescriptionModule } from 'igniteui-webcomponents-core';
import { IgcTreeGridComponent, IgcColumnComponent } from 'igniteui-webcomponents-grids/grids';
import { FoodsDataItem, FoodsData } from './FoodsData';
import { IgcCellTemplateContext } from 'igniteui-webcomponents-grids/grids';
import { html, nothing } from 'lit-html';
import "igniteui-webcomponents-grids/grids/themes/light/bootstrap.css";
import "./index.css";
export class Sample {
private grid: IgcTreeGridComponent
private column1: IgcColumnComponent
private _bind: () => void;
constructor() {
var grid = this.grid = document.getElementById('grid') as IgcTreeGridComponent;
var column1 = this.column1 = document.getElementById('column1') as IgcColumnComponent;
this._bind = () => {
grid.data = this.foodsData;
column1.bodyTemplate = this.webGridBooleanCellTemplate;
}
this._bind();
}
private _foodsData: FoodsData = null;
public get foodsData(): FoodsData {
if (this._foodsData == null)
{
this._foodsData = new FoodsData();
}
return this._foodsData;
}
private _componentRenderer: ComponentRenderer = null;
public get renderer(): ComponentRenderer {
if (this._componentRenderer == null) {
this._componentRenderer = new ComponentRenderer();
var context = this._componentRenderer.context;
WebGridDescriptionModule.register(context);
}
return this._componentRenderer;
}
public webGridBooleanCellTemplate = (ctx: IgcCellTemplateContext) => {
if (ctx.cell.value) {
return html`<img src="https://static.infragistics.com/xplatform/images/grid/active.png" title="Continued" alt="Continued" />`
} else {
return html`<img src="https://static.infragistics.com/xplatform/images/grid/expired.png" title="Discontinued" alt="Discontinued" />`;
}
}
}
new Sample();
ts<!DOCTYPE html>
<html>
<head>
<title>Sample | Ignite UI | Web Components | infragistics</title>
<meta charset="UTF-8" />
<link rel="shortcut icon" href="https://static.infragistics.com/xplatform/images/browsers/wc.png" >
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" />
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Kanit&display=swap" />
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Titillium Web" />
<link rel="stylesheet" href="https://static.infragistics.com/xplatform/css/samples/shared.v8.css" />
<link rel="stylesheet" href="/src/index.css" type="text/css" />
</head>
<body>
<div id="root">
<div class="container sample ig-typography">
<div class="container fill">
<igc-tree-grid
auto-generate="false"
name="grid"
id="grid"
id="grid"
primary-key="ID"
foreign-key="ParentID"
moving="true"
allow-filtering="true"
filter-mode="excelStyleFilter">
<igc-column
field="ID"
header="ID"
sortable="true">
</igc-column>
<igc-column
field="Name"
header="Product Name"
sortable="true">
</igc-column>
<igc-column
field="UnitPrice"
header="Unit Price"
sortable="true"
data-type="currency">
</igc-column>
<igc-column
field="AddedDate"
header="Added Date"
sortable="true"
data-type="date">
</igc-column>
<igc-column
field="Discontinued"
data-type="boolean"
name="column1"
id="column1">
</igc-column>
</igc-tree-grid>
</div>
</div>
</div>
<!-- This script is needed only for parcel and it will be excluded for webpack -->
<% if (false) { %><script src="src/index.ts"></script><% } %>
</body>
</html>
html/* shared styles are loaded from: */
/* https://static.infragistics.com/xplatform/css/samples */
#grid {
--ig-grid-filtering-row-background: #ffcd0f;
--ig-button-background: #FFCD0F;
--ig-button-foreground: #292826;
--ig-button-hover-background: #292826;
--ig-button-hover-foreground: #ffcd0f;
--ig-list-background: #FFCD0F;
--ig-list-item-background: #FFCD0F;
--ig-list-item-background-hover: #c2b1b1bd;
--ig-checkbox-empty-color: #292826;
--ig-checkbox-fill-color: #292826;
--ig-checkbox-tick-color: #FFCD0F;
--ig-checkbox-label-color: #292826;
--ig-drop-down-background-color: #FFCD0F;
--ig-drop-down-item-text-color: #292826;
--ig-drop-down-item-background: #FFCD0F;
--ig-drop-down-item-text-color: #292826;
--ig-drop-down-focused-item-background: #c2b1b1bd;
}
css
API リファレンス
その他のリソース
コミュニティに参加して新しいアイデアをご提案ください。