React Grid 高度なフィルタリング
React Grid の Ignite UI for React 高度なフィルタリングを使用すると、IgrGrid
のすべての列にわたるフィルタリング条件を使用してさまざまなグループを作成できるダイアログが表示されるため、データを操作できます。
React Grid 高度なフィルタリングの例
import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import { IgrGridModule } from "@infragistics/igniteui-react-grids";
import { IgrGrid, IgrGridToolbar, IgrGridToolbarActions, IgrGridToolbarAdvancedFiltering, IgrGridToolbarHiding, IgrGridToolbarPinning, IgrColumn } from "@infragistics/igniteui-react-grids";
import { ComponentRenderer, WebGridDescriptionModule } from "@infragistics/igniteui-react-core";
import NwindData from './NwindData.json';
import { IgrCellTemplateContext } from "@infragistics/igniteui-react-grids";
import "@infragistics/igniteui-react-grids/grids/themes/light/bootstrap.css";
const mods: any[] = [
IgrGridModule
];
mods.forEach((m) => m.register());
export default class Sample extends React.Component<any, any> {
private grid: IgrGrid
private gridRef(r: IgrGrid) {
this.grid = r;
this.setState({});
}
constructor(props: any) {
super(props);
this.gridRef = this.gridRef.bind(this);
}
public render(): JSX.Element {
return (
<div className="container sample ig-typography">
<div className="container fill">
<IgrGrid
autoGenerate={false}
ref={this.gridRef}
data={this.nwindData}
moving={true}
allowAdvancedFiltering={true}>
<IgrGridToolbar
>
<IgrGridToolbarActions
>
<IgrGridToolbarAdvancedFiltering
>
</IgrGridToolbarAdvancedFiltering>
<IgrGridToolbarHiding
>
</IgrGridToolbarHiding>
<IgrGridToolbarPinning
>
</IgrGridToolbarPinning>
</IgrGridToolbarActions>
</IgrGridToolbar>
<IgrColumn
field="ProductName"
header="Product Name"
sortable={true}>
</IgrColumn>
<IgrColumn
field="QuantityPerUnit"
header="Quantity Per Unit"
sortable={true}>
</IgrColumn>
<IgrColumn
field="UnitPrice"
header="Unit Price"
sortable={true}
dataType="currency">
</IgrColumn>
<IgrColumn
field="OrderDate"
header="Order Date"
dataType="date"
sortable={true}>
</IgrColumn>
<IgrColumn
field="Discontinued"
header="Discontinued"
dataType="boolean"
bodyTemplate={this.webGridDiscontinuedCellTemplate}
sortable={true}>
</IgrColumn>
</IgrGrid>
</div>
</div>
);
}
private _nwindData: any[] = NwindData;
public get nwindData(): any[] {
return this._nwindData;
}
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 webGridDiscontinuedCellTemplate = (props: {dataContext: IgrCellTemplateContext}) => {
if (props.dataContext.cell.value) {
return <img src="https://static.infragistics.com/xplatform/images/grid/active.png" title="Continued" alt="Continued" />;
} else {
return <img src="https://static.infragistics.com/xplatform/images/grid/expired.png" title="Discontinued" alt="Discontinued" />;
}
};
}
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<Sample/>);
tsx
このサンプルが気に入りましたか? 完全な Ignite UI for Reactツールキットにアクセスして、すばやく独自のアプリの作成を開始します。無料でダウンロードできます。
インタラクション
高度なフィルタリングダイアログを開くには、グリッドツールバーの [高度なフィルタリング] ボタンをクリックする必要があります。高度なフィルターが適用されていない場合、AND または OR でリンクされたフィルター条件のグループの作成から開始する必要があります。その後、フィルタリング条件またはサブグループを追加できます。
フィルター条件を追加するには、filterable
列のいずれか、dataType
列に基づくオペランド、およびオペランドが単項でない場合の値を選択する必要があります。条件が確定すると、条件情報を含むチップが表示されます。チップをホバーまたはクリックすると、チップを変更したり、その直後に別の条件やグループを追加したりできます。
複数のフィルター条件チップを選択すると、グループを作成したりフィルターを削除したりするためのオプションを含むコンテキストメニューが表示されます。選択した条件でグループを作成することを選択した場合、一番上に選択した条件が配置された場所に新しく作成されたグループが表示されます。
グループを選択するために、リンク条件 (AND または OR) に基づいて色付けされた垂直線をクリックすることもできます。単一のグループが選択されている場合、フィルタリング ロジックを変更、グループ解除、または削除するオプションを含むコンテキスト メニューが表示されます。
フィルタリング条件とグループを作成する準備後にデータをフィルタリングするには、[適用] ボタンをクリックします。拡張フィルターを変更後、変更を保存したくない場合は、[キャンセル] ボタンをクリックします。[フィルターのクリア] ボタンをクリックして、高度なフィルターをクリアすることもできます。
使用方法
高度なフィルタリングを有効にするには、allowAdvancedFiltering
入力プロパティを true に設定します。
<IgrGrid data={nwindData} autoGenerate={false} ref={gridRef} allowAdvancedFiltering={true}>
<IgrGridToolbar></IgrGridToolbar>
</IgrGrid>
tsx
高度なフィルタリングは、advancedFilteringExpressionsTree
入力プロパティに保存される filteringExpressionsTree
を生成します。advancedFilteringExpressionsTree
プロパティを使用して、高度なフィルタリングの初期状態を設定できます。
const filteringTree: IgrFilteringExpressionsTree = {
operator: FilteringLogic.And,
filteringOperands: [
{
fieldName: "ProductID",
condition: new IgrNumberFilteringOperand().condition("doesNotEqual"),
searchVal: 1,
ignoreCase: true,
},
{
fieldName: "ProductName",
conditionName: "startsWith",
searchVal: "Ch",
ignoreCase: true,
}
]
};
<IgrGrid data={data} allowFiltering={true} advancedFilteringExpressionsTree={filteringTree}>
<IgrGridToolbar>
<IgrGridToolbarActions>
<IgrGridToolbarAdvancedFiltering></IgrGridToolbarAdvancedFiltering>
</IgrGridToolbarActions>
</IgrGridToolbar>
<IgrColumn field="ProductID" filterable={true} dataType="number"></IgrColumn>
<IgrColumn field="ProductName" dataType="string" filterable={true}></IgrColumn>
</IgrGrid>
tsx
IgrGrid
ツールバーを表示したくない場合は、openAdvancedFilteringDialog
および closeAdvancedFilteringDialog
メソッドを使用して、高度なフィルタリング ダイアログをコーディングを使用して開いたり閉じたりできます。
IgrGrid で QuickFilter/ExcelStyleFilter と高度なフィルタリング ユーザー インターフェイスの両方を有効にできます。両フィルタリング ユーザー インターフェイスは、互いに依存せずに機能します。IgrGrid の最終的なフィルター結果は、2 つのフィルター結果の共通部分です。
スタイル設定
定義済みのテーマに加えて、利用可能な CSS プロパティのいくつかを設定することで、グリッドをさらにカスタマイズできます。
一部の色を変更したい場合は、最初にグリッドのクラスを設定する必要があります。
<IgrGrid className="grid"></IgrGrid>
tsx
次に、そのクラスに関連する CSS プロパティを設定します。
.grid {
--ig-grid-filtering-row-background: #ffcd0f;
--ig-grid-filtering-background-or: #d83434;
}
css
デモ
import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import { IgrGridModule } from "@infragistics/igniteui-react-grids";
import { IgrGrid, IgrGridToolbar, IgrGridToolbarActions, IgrGridToolbarAdvancedFiltering, IgrColumn } from "@infragistics/igniteui-react-grids";
import { ComponentRenderer, WebGridDescriptionModule } from "@infragistics/igniteui-react-core";
import NwindData from './NwindData.json';
import { IgrCellTemplateContext } from "@infragistics/igniteui-react-grids";
import "@infragistics/igniteui-react-grids/grids/themes/light/bootstrap.css";
const mods: any[] = [
IgrGridModule
];
mods.forEach((m) => m.register());
export default class Sample extends React.Component<any, any> {
private grid: IgrGrid
private gridRef(r: IgrGrid) {
this.grid = r;
this.setState({});
}
constructor(props: any) {
super(props);
this.gridRef = this.gridRef.bind(this);
}
public render(): JSX.Element {
return (
<div className="container sample ig-typography">
<div className="container fill">
<IgrGrid
autoGenerate={false}
ref={this.gridRef}
id="grid"
data={this.nwindData}
moving={true}
allowAdvancedFiltering={true}>
<IgrGridToolbar
>
<IgrGridToolbarActions
>
<IgrGridToolbarAdvancedFiltering
>
</IgrGridToolbarAdvancedFiltering>
</IgrGridToolbarActions>
</IgrGridToolbar>
<IgrColumn
field="ProductName"
header="Product Name"
sortable={true}>
</IgrColumn>
<IgrColumn
field="QuantityPerUnit"
header="Quantity Per Unit"
sortable={true}>
</IgrColumn>
<IgrColumn
field="UnitPrice"
header="Unit Price"
sortable={true}
dataType="currency">
</IgrColumn>
<IgrColumn
field="OrderDate"
header="Order Date"
dataType="date"
sortable={true}>
</IgrColumn>
<IgrColumn
field="Discontinued"
header="Discontinued"
dataType="boolean"
bodyTemplate={this.webGridDiscontinuedCellTemplate}
sortable={true}>
</IgrColumn>
</IgrGrid>
</div>
</div>
);
}
private _nwindData: any[] = NwindData;
public get nwindData(): any[] {
return this._nwindData;
}
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 webGridDiscontinuedCellTemplate = (props: {dataContext: IgrCellTemplateContext}) => {
if (props.dataContext.cell.value) {
return <img src="https://static.infragistics.com/xplatform/images/grid/active.png" title="Continued" alt="Continued" />;
} else {
return <img src="https://static.infragistics.com/xplatform/images/grid/expired.png" title="Discontinued" alt="Discontinued" />;
}
};
}
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<Sample/>);
tsx
#grid {
--ig-grid-filtering-row-background: #ffcd0f;
--ig-grid-filtering-background-or: #d83434;
}
css
API リファレンス
その他のリソース
コミュニティに参加して新しいアイデアをご提案ください。