React Grid ソート
React Grid の Ignite UI for React データ ソート機能は列ごとのレベルで有効になっています。つまり、IgrGrid
にはソート可能な列とソート不可能な列を混在させることができます。React でソートを実行すると、指定した条件に基づいてレコードの表示順序を変更できます。
React Grid ソート概要の例
export class ProductSalesItem {
public constructor(init: Partial<ProductSalesItem>) {
Object.assign(this, init);
}
public OrderID: number;
public SaleAmount: number;
public Category: string;
public Company: string;
public ShipCountry: string;
public ShippedDate: string;
}
export class ProductSales extends Array<ProductSalesItem> {
public constructor(items: Array<ProductSalesItem> | number = -1) {
if (Array.isArray(items)) {
super(...items);
} else {
const newItems = [
new ProductSalesItem(
{
OrderID: 10524,
SaleAmount: 3192.65,
Category: `Beverages`,
Company: `Berglunds snabbköp`,
ShipCountry: `France`,
ShippedDate: `1997-05-07T00:00:00Z`
}),
new ProductSalesItem(
{
OrderID: 10672,
SaleAmount: 3815.25,
Category: `Beverages`,
Company: `Berglunds snabbköp`,
ShipCountry: `Germany`,
ShippedDate: `1997-09-26T00:00:00Z`
}),
new ProductSalesItem(
{
OrderID: 10801,
SaleAmount: 3026.85,
Category: `Beverages`,
Company: `Bólido Comidas preparadas`,
ShipCountry: `Brazil`,
ShippedDate: `1997-12-31T00:00:00Z`
}),
new ProductSalesItem(
{
OrderID: 10511,
SaleAmount: 2550,
Category: `Beverages`,
Company: `Bon app'`,
ShipCountry: `France`,
ShippedDate: `1997-04-21T00:00:00Z`
}),
new ProductSalesItem(
{
OrderID: 10742,
SaleAmount: 3118,
Category: `Beverages`,
Company: `Bottom-Dollar Markets`,
ShipCountry: `Belgium`,
ShippedDate: `1997-11-18T00:00:00Z`
}),
new ProductSalesItem(
{
OrderID: 10400,
SaleAmount: 3063,
Category: `Beverages`,
Company: `Eastern Connection`,
ShipCountry: `Brazil`,
ShippedDate: `1997-01-16T00:00:00Z`
}),
new ProductSalesItem(
{
OrderID: 10402,
SaleAmount: 2713.5,
Category: `Beverages`,
Company: `Ernst Handel`,
ShipCountry: `Switzerland`,
ShippedDate: `1997-01-10T00:00:00Z`
}),
new ProductSalesItem(
{
OrderID: 10430,
SaleAmount: 4899.2,
Category: `Beverages`,
Company: `Ernst Handel`,
ShipCountry: `Switzerland`,
ShippedDate: `1997-02-03T00:00:00Z`
}),
new ProductSalesItem(
{
OrderID: 10514,
SaleAmount: 8623.45,
Category: `Beverages`,
Company: `Ernst Handel`,
ShipCountry: `Brazil`,
ShippedDate: `1997-05-16T00:00:00Z`
}),
new ProductSalesItem(
{
OrderID: 10595,
SaleAmount: 4725,
Category: `Beverages`,
Company: `Ernst Handel`,
ShipCountry: `Venezuela`,
ShippedDate: `1997-07-14T00:00:00Z`
}),
new ProductSalesItem(
{
OrderID: 10633,
SaleAmount: 5510.59,
Category: `Beverages`,
Company: `Ernst Handel`,
ShipCountry: `Austria`,
ShippedDate: `1997-08-18T00:00:00Z`
}),
new ProductSalesItem(
{
OrderID: 10698,
SaleAmount: 3436.45,
Category: `Beverages`,
Company: `Ernst Handel`,
ShipCountry: `Mexico`,
ShippedDate: `1997-10-17T00:00:00Z`
}),
new ProductSalesItem(
{
OrderID: 10776,
SaleAmount: 6635.27,
Category: `Condiments`,
Company: `Ernst Handel`,
ShipCountry: `Germany`,
ShippedDate: `1997-12-18T00:00:00Z`
}),
new ProductSalesItem(
{
OrderID: 10634,
SaleAmount: 4985.5,
Category: `Condiments`,
Company: `Folies gourmandes`,
ShipCountry: `Brazil`,
ShippedDate: `1997-08-21T00:00:00Z`
}),
new ProductSalesItem(
{
OrderID: 10789,
SaleAmount: 3687,
Category: `Condiments`,
Company: `Folies gourmandes`,
ShipCountry: `USA`,
ShippedDate: `1997-12-31T00:00:00Z`
}),
new ProductSalesItem(
{
OrderID: 10561,
SaleAmount: 2844.5,
Category: `Condiments`,
Company: `Folk och fä HB`,
ShipCountry: `Austria`,
ShippedDate: `1997-06-09T00:00:00Z`
}),
new ProductSalesItem(
{
OrderID: 10703,
SaleAmount: 2545,
Category: `Condiments`,
Company: `Folk och fä HB`,
ShipCountry: `Sweden`,
ShippedDate: `1997-10-20T00:00:00Z`
}),
new ProductSalesItem(
{
OrderID: 10762,
SaleAmount: 4337,
Category: `Condiments`,
Company: `Folk och fä HB`,
ShipCountry: `France`,
ShippedDate: `1997-12-09T00:00:00Z`
}),
new ProductSalesItem(
{
OrderID: 10629,
SaleAmount: 2775.05,
Category: `Condiments`,
Company: `Godos Cocina Típica`,
ShipCountry: `Finland`,
ShippedDate: `1997-08-20T00:00:00Z`
}),
new ProductSalesItem(
{
OrderID: 10709,
SaleAmount: 3424,
Category: `Condiments`,
Company: `Gourmet Lanchonetes`,
ShipCountry: `Germany`,
ShippedDate: `1997-11-20T00:00:00Z`
}),
new ProductSalesItem(
{
OrderID: 10616,
SaleAmount: 4807.01,
Category: `Condiments`,
Company: `Great Lakes Food Market`,
ShipCountry: `Venezuela`,
ShippedDate: `1997-08-05T00:00:00Z`
}),
new ProductSalesItem(
{
OrderID: 10490,
SaleAmount: 3163.2,
Category: `Condiments`,
Company: `HILARION-Abastos`,
ShipCountry: `USA`,
ShippedDate: `1997-04-03T00:00:00Z`
}),
new ProductSalesItem(
{
OrderID: 10567,
SaleAmount: 2519,
Category: `Condiments`,
Company: `Hungry Owl All-Night Grocers`,
ShipCountry: `Finland`,
ShippedDate: `1997-06-17T00:00:00Z`
}),
new ProductSalesItem(
{
OrderID: 10687,
SaleAmount: 4960.9,
Category: `Condiments`,
Company: `Hungry Owl All-Night Grocers`,
ShipCountry: `USA`,
ShippedDate: `1997-10-30T00:00:00Z`
}),
new ProductSalesItem(
{
OrderID: 10701,
SaleAmount: 2864.5,
Category: `Confections`,
Company: `Hungry Owl All-Night Grocers`,
ShipCountry: `USA`,
ShippedDate: `1997-10-15T00:00:00Z`
}),
new ProductSalesItem(
{
OrderID: 10718,
SaleAmount: 3463,
Category: `Confections`,
Company: `Königlich Essen`,
ShipCountry: `Germany`,
ShippedDate: `1997-10-29T00:00:00Z`
}),
new ProductSalesItem(
{
OrderID: 10787,
SaleAmount: 2622.76,
Category: `Confections`,
Company: `La maison d'Asie`,
ShipCountry: `France`,
ShippedDate: `1997-12-26T00:00:00Z`
}),
new ProductSalesItem(
{
OrderID: 10772,
SaleAmount: 3603.22,
Category: `Confections`,
Company: `Lehmanns Marktstand`,
ShipCountry: `Italy`,
ShippedDate: `1997-12-19T00:00:00Z`
}),
new ProductSalesItem(
{
OrderID: 10638,
SaleAmount: 2720.05,
Category: `Confections`,
Company: `LINO-Delicateses`,
ShipCountry: `Mexico`,
ShippedDate: `1997-09-01T00:00:00Z`
}),
new ProductSalesItem(
{
OrderID: 10760,
SaleAmount: 2917,
Category: `Confections`,
Company: `Maison Dewey`,
ShipCountry: `Germany`,
ShippedDate: `1997-12-10T00:00:00Z`
}),
new ProductSalesItem(
{
OrderID: 10424,
SaleAmount: 9194.56,
Category: `Confections`,
Company: `Mère Paillarde`,
ShipCountry: `Sweden`,
ShippedDate: `1997-01-27T00:00:00Z`
}),
new ProductSalesItem(
{
OrderID: 10605,
SaleAmount: 4109.7,
Category: `Confections`,
Company: `Mère Paillarde`,
ShipCountry: `Germany`,
ShippedDate: `1997-07-29T00:00:00Z`
}),
new ProductSalesItem(
{
OrderID: 10618,
SaleAmount: 2697.5,
Category: `Confections`,
Company: `Mère Paillarde`,
ShipCountry: `Sweden`,
ShippedDate: `1997-08-08T00:00:00Z`
}),
new ProductSalesItem(
{
OrderID: 10530,
SaleAmount: 4180,
Category: `Confections`,
Company: `Piccolo und mehr`,
ShipCountry: `Spain`,
ShippedDate: `1997-05-12T00:00:00Z`
}),
new ProductSalesItem(
{
OrderID: 10637,
SaleAmount: 2761.94,
Category: `Confections`,
Company: `Queen Cozinha`,
ShipCountry: `Spain`,
ShippedDate: `1997-08-26T00:00:00Z`
}),
new ProductSalesItem(
{
OrderID: 10451,
SaleAmount: 3849.66,
Category: `Confections`,
Company: `QUICK-Stop`,
ShipCountry: `Venezuela`,
ShippedDate: `1997-03-12T00:00:00Z`
}),
new ProductSalesItem(
{
OrderID: 10515,
SaleAmount: 9921.3,
Category: `Confections`,
Company: `QUICK-Stop`,
ShipCountry: `Germany`,
ShippedDate: `1997-05-23T00:00:00Z`
}),
new ProductSalesItem(
{
OrderID: 10540,
SaleAmount: 10191.7,
Category: `Dairy Product`,
Company: `QUICK-Stop`,
ShipCountry: `Germany`,
ShippedDate: `1997-06-13T00:00:00Z`
}),
new ProductSalesItem(
{
OrderID: 10549,
SaleAmount: 3554.28,
Category: `Dairy Product`,
Company: `QUICK-Stop`,
ShipCountry: `Germany`,
ShippedDate: `1997-05-30T00:00:00Z`
}),
new ProductSalesItem(
{
OrderID: 10588,
SaleAmount: 3120,
Category: `Dairy Product`,
Company: `QUICK-Stop`,
ShipCountry: `Brazil`,
ShippedDate: `1997-07-10T00:00:00Z`
}),
new ProductSalesItem(
{
OrderID: 10658,
SaleAmount: 4464.6,
Category: `Dairy Product`,
Company: `QUICK-Stop`,
ShipCountry: `Italy`,
ShippedDate: `1997-09-08T00:00:00Z`
}),
new ProductSalesItem(
{
OrderID: 10691,
SaleAmount: 10164.8,
Category: `Dairy Product`,
Company: `QUICK-Stop`,
ShipCountry: `UK`,
ShippedDate: `1997-10-22T00:00:00Z`
}),
new ProductSalesItem(
{
OrderID: 10694,
SaleAmount: 4825,
Category: `Dairy Product`,
Company: `QUICK-Stop`,
ShipCountry: `Brazil`,
ShippedDate: `1997-10-09T00:00:00Z`
}),
new ProductSalesItem(
{
OrderID: 10745,
SaleAmount: 4529.8,
Category: `Dairy Product`,
Company: `QUICK-Stop`,
ShipCountry: `Brazil`,
ShippedDate: `1997-11-27T00:00:00Z`
}),
new ProductSalesItem(
{
OrderID: 10401,
SaleAmount: 3868.6,
Category: `Dairy Product`,
Company: `Rattlesnake Canyon Grocery`,
ShipCountry: `Brazil`,
ShippedDate: `1997-01-10T00:00:00Z`
}),
new ProductSalesItem(
{
OrderID: 10479,
SaleAmount: 10495.6,
Category: `Dairy Product`,
Company: `Rattlesnake Canyon Grocery`,
ShipCountry: `Mexico`,
ShippedDate: `1997-03-21T00:00:00Z`
}),
new ProductSalesItem(
{
OrderID: 10666,
SaleAmount: 4666.94,
Category: `Dairy Product`,
Company: `Richter Supermarkt`,
ShipCountry: `USA`,
ShippedDate: `1997-09-22T00:00:00Z`
}),
new ProductSalesItem(
{
OrderID: 10393,
SaleAmount: 2556.95,
Category: `Grains/Cereal`,
Company: `Save-a-lot Markets`,
ShipCountry: `France`,
ShippedDate: `1997-01-03T00:00:00Z`
}),
new ProductSalesItem(
{
OrderID: 10398,
SaleAmount: 2505.6,
Category: `Grains/Cereal`,
Company: `Save-a-lot Markets`,
ShipCountry: `Venezuela`,
ShippedDate: `1997-01-09T00:00:00Z`
}),
new ProductSalesItem(
{
OrderID: 10440,
SaleAmount: 4924.14,
Category: `Grains/Cereal`,
Company: `Save-a-lot Markets`,
ShipCountry: `France`,
ShippedDate: `1997-02-28T00:00:00Z`
}),
new ProductSalesItem(
{
OrderID: 10510,
SaleAmount: 4707.54,
Category: `Grains/Cereal`,
Company: `Save-a-lot Markets`,
ShipCountry: `Ireland`,
ShippedDate: `1997-04-28T00:00:00Z`
}),
new ProductSalesItem(
{
OrderID: 10555,
SaleAmount: 2944.4,
Category: `Grains/Cereal`,
Company: `Save-a-lot Markets`,
ShipCountry: `Brazil`,
ShippedDate: `1997-06-04T00:00:00Z`
}),
new ProductSalesItem(
{
OrderID: 10607,
SaleAmount: 6475.4,
Category: `Grains/Cereal`,
Company: `Save-a-lot Markets`,
ShipCountry: `Italy`,
ShippedDate: `1997-07-25T00:00:00Z`
}),
new ProductSalesItem(
{
OrderID: 10612,
SaleAmount: 6375,
Category: `Grains/Cereal`,
Company: `Save-a-lot Markets`,
ShipCountry: `Germany`,
ShippedDate: `1997-08-01T00:00:00Z`
}),
new ProductSalesItem(
{
OrderID: 10657,
SaleAmount: 4371.6,
Category: `Meat/Poultr`,
Company: `Save-a-lot Markets`,
ShipCountry: `Belgium`,
ShippedDate: `1997-09-15T00:00:00Z`
}),
new ProductSalesItem(
{
OrderID: 10678,
SaleAmount: 5256.5,
Category: `Meat/Poultr`,
Company: `Save-a-lot Markets`,
ShipCountry: `Spain`,
ShippedDate: `1997-10-16T00:00:00Z`
}),
new ProductSalesItem(
{
OrderID: 10711,
SaleAmount: 4451.7,
Category: `Meat/Poultr`,
Company: `Save-a-lot Markets`,
ShipCountry: `Mexico`,
ShippedDate: `1997-10-29T00:00:00Z`
}),
new ProductSalesItem(
{
OrderID: 10713,
SaleAmount: 2827.9,
Category: `Meat/Poultr`,
Company: `Save-a-lot Markets`,
ShipCountry: `USA`,
ShippedDate: `1997-10-24T00:00:00Z`
}),
new ProductSalesItem(
{
OrderID: 10757,
SaleAmount: 3082,
Category: `Meat/Poultr`,
Company: `Save-a-lot Markets`,
ShipCountry: `Spain`,
ShippedDate: `1997-12-15T00:00:00Z`
}),
new ProductSalesItem(
{
OrderID: 10417,
SaleAmount: 11188.4,
Category: `Meat/Poultr`,
Company: `Simons bistro`,
ShipCountry: `USA`,
ShippedDate: `1997-01-28T00:00:00Z`
}),
new ProductSalesItem(
{
OrderID: 10458,
SaleAmount: 3891,
Category: `Produce`,
Company: `Suprêmes délices`,
ShipCountry: `Mexico`,
ShippedDate: `1997-03-04T00:00:00Z`
}),
new ProductSalesItem(
{
OrderID: 10518,
SaleAmount: 4150.05,
Category: `Produce`,
Company: `Tortuga Restaurante`,
ShipCountry: `Ireland`,
ShippedDate: `1997-05-05T00:00:00Z`
}),
new ProductSalesItem(
{
OrderID: 10465,
SaleAmount: 2518,
Category: `Produce`,
Company: `Vaffeljernet`,
ShipCountry: `USA`,
ShippedDate: `1997-03-14T00:00:00Z`
}),
new ProductSalesItem(
{
OrderID: 10688,
SaleAmount: 3160.6,
Category: `Produce`,
Company: `Vaffeljernet`,
ShipCountry: `France`,
ShippedDate: `1997-10-07T00:00:00Z`
}),
new ProductSalesItem(
{
OrderID: 10546,
SaleAmount: 2812,
Category: `Produce`,
Company: `Victuailles en stock`,
ShipCountry: `Germany`,
ShippedDate: `1997-05-27T00:00:00Z`
}),
new ProductSalesItem(
{
OrderID: 10455,
SaleAmount: 2684,
Category: `Seafood`,
Company: `Wartian Herkku`,
ShipCountry: `Germany`,
ShippedDate: `1997-03-03T00:00:00Z`
}),
];
super(...newItems.slice(0));
}
}
}
tsimport React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import { IgrPropertyEditorPanelModule } from "@infragistics/igniteui-react-layouts";
import { IgrGridModule } from "@infragistics/igniteui-react-grids";
import { IgrPropertyEditorPanel, IgrPropertyEditorPropertyDescription } from "@infragistics/igniteui-react-layouts";
import { IgrGrid, IgrSortingExpression, SortingDirection, IgrColumn, IgrColumnPipeArgs } from "@infragistics/igniteui-react-grids";
import { ComponentRenderer, PropertyEditorPanelDescriptionModule, WebGridDescriptionModule } from "@infragistics/igniteui-react-core";
import { ProductSalesItem, ProductSales } from './ProductSales';
import { IgrPropertyEditorPropertyDescriptionButtonClickEventArgs } from "@infragistics/igniteui-react-layouts";
import "@infragistics/igniteui-react-grids/grids/combined";
import "@infragistics/igniteui-react-grids/grids/themes/light/bootstrap.css";
import 'igniteui-webcomponents/themes/light/bootstrap.css';
const mods: any[] = [
IgrPropertyEditorPanelModule,
IgrGridModule
];
mods.forEach((m) => m.register());
export default class Sample extends React.Component<any, any> {
private propertyEditor: IgrPropertyEditorPanel
private propertyEditorRef(r: IgrPropertyEditorPanel) {
this.propertyEditor = r;
this.setState({});
}
private sortingOptionsEditor: IgrPropertyEditorPropertyDescription
private propertyEditorPropertyDescription1: IgrPropertyEditorPropertyDescription
private propertyEditorPropertyDescription2: IgrPropertyEditorPropertyDescription
private grid: IgrGrid
private gridRef(r: IgrGrid) {
this.grid = r;
this.setState({});
}
private _sortingExpression1: IgrSortingExpression[] | null = null;
public get sortingExpression1(): IgrSortingExpression[] {
if (this._sortingExpression1 == null)
{
let sortingExpression1: IgrSortingExpression[] = [];
var sortingExpression2: IgrSortingExpression = {} as IgrSortingExpression;
sortingExpression2.fieldName = "Category";
sortingExpression2.dir = SortingDirection.Asc;
sortingExpression2.ignoreCase = true;
sortingExpression1.push(sortingExpression2)
this._sortingExpression1 = sortingExpression1;
}
return this._sortingExpression1;
}
private column1: IgrColumn
private _columnPipeArgs1: IgrColumnPipeArgs | null = null;
public get columnPipeArgs1(): IgrColumnPipeArgs {
if (this._columnPipeArgs1 == null)
{
var columnPipeArgs1: IgrColumnPipeArgs = {} as IgrColumnPipeArgs;
columnPipeArgs1.currencyCode = "USD";
columnPipeArgs1.digitsInfo = "1.2-2";
this._columnPipeArgs1 = columnPipeArgs1;
}
return this._columnPipeArgs1;
}
constructor(props: any) {
super(props);
this.propertyEditorRef = this.propertyEditorRef.bind(this);
this.webGridClearSort = this.webGridClearSort.bind(this);
this.webGridClearGrouping = this.webGridClearGrouping.bind(this);
this.gridRef = this.gridRef.bind(this);
}
public render(): JSX.Element {
return (
<div className="container sample ig-typography">
<div className="options vertical">
<IgrPropertyEditorPanel
ref={this.propertyEditorRef}
componentRenderer={this.renderer}
target={this.grid}
descriptionType="WebGrid"
isHorizontal="true"
isWrappingEnabled="true">
<IgrPropertyEditorPropertyDescription
propertyPath="SortingOptions.Mode"
name="SortingOptionsEditor">
</IgrPropertyEditorPropertyDescription>
<IgrPropertyEditorPropertyDescription
valueType="Button"
primitiveValue="Clear Sorting"
buttonClicked={this.webGridClearSort}
name="propertyEditorPropertyDescription1">
</IgrPropertyEditorPropertyDescription>
<IgrPropertyEditorPropertyDescription
valueType="Button"
primitiveValue="Clear Grouped Columns"
buttonClicked={this.webGridClearGrouping}
name="propertyEditorPropertyDescription2">
</IgrPropertyEditorPropertyDescription>
</IgrPropertyEditorPanel>
</div>
<div className="container fill">
<IgrGrid
autoGenerate={false}
data={this.productSales}
ref={this.gridRef}
sortingExpressions={this.sortingExpression1}>
<IgrColumn
field="OrderID"
header="Order ID"
groupable={true}
sortable={true}>
</IgrColumn>
<IgrColumn
field="Category"
header="Category Name"
dataType="string"
groupable={true}
sortable={true}>
</IgrColumn>
<IgrColumn
field="Company"
header="Company"
dataType="string"
groupable={true}
sortable={true}>
</IgrColumn>
<IgrColumn
field="ShipCountry"
header="Ship Country"
dataType="string"
groupable={true}
sortable={true}>
</IgrColumn>
<IgrColumn
field="SaleAmount"
header="Sale Amount"
dataType="currency"
groupable={true}
sortable={true}
pipeArgs={this.columnPipeArgs1}
name="column1">
</IgrColumn>
<IgrColumn
field="ShippedDate"
header="Shipped Date"
dataType="date"
sortable={true}>
</IgrColumn>
</IgrGrid>
</div>
</div>
);
}
private _productSales: ProductSales = null;
public get productSales(): ProductSales {
if (this._productSales == null)
{
this._productSales = new ProductSales();
}
return this._productSales;
}
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 webGridClearSort(sender: any, args: IgrPropertyEditorPropertyDescriptionButtonClickEventArgs): void {
var grid = this.grid;
grid.clearSort("");
}
public webGridClearGrouping(sender: any, args: IgrPropertyEditorPropertyDescriptionButtonClickEventArgs): void {
var grid = this.grid;
grid.clearGrouping("");
}
}
// rendering above component in the React DOM
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<Sample/>);
tsx/* shared styles are loaded from: */
/* https://static.infragistics.com/xplatform/css/samples */
css
このサンプルが気に入りましたか? 完全な Ignite UI for Reactツールキットにアクセスして、すばやく独自のアプリの作成を開始します。無料でダウンロードできます。
以下のように sortable
入力を使用します。IgrGrid
のソートで、sortingIgnoreCase
プロパティを設定して大文字と小文字を区別するソートができます。
<IgrColumn field="ProductName" header="Product Name" dataType="string" sortable="true"></IgrColumn>
tsx
ソート インジケーター
ソートされた列数が一定数以上ある場合、ソート順の指定がないと混乱する可能性があります。
IgrGrid
は、ソートされた各列のインデックスを示すことにより、この問題の解決策を提供します。
API でのソート
IgrGrid
sort
メソッドを使用し、列または複数の列を IgrGrid
API でソートできます。
import { SortingDirection } from "igniteui-react-grids";
tsx
// Perform a case insensitive ascending sort on the ProductName column.
gridRef.current.sort([{ fieldName: 'ProductName', dir: SortingDirection.Asc, ignoreCase: true }]);
// Perform sorting on both the ProductName and Price columns.
gridRef.current.sort([
{ fieldName: 'ProductName', dir: SortingDirection.Asc, ignoreCase: true },
{ fieldName: 'Price', dir: SortingDirection.Desc }
]);
tsx
Sorting は、DefaultSortingStrategy アルゴリズムを使用して実行されます。IgrColumn または ISortingExpression は、代替アルゴリズムとして ISortingStrategy のカスタム実装を使用できます。たとえば複雑なテンプレート列や画像列にユーザー定義のソートを定義する必要がある場合に便利です。
フィルター動作と同様に、ソート状態をクリアするには clearSort
メソッドを使用します。
// Removes the sorting state from the ProductName column
gridRef.current.clearSort('ProductName');
// Removes the sorting state from every column in the Grid
gridRef.current.clearSort();
tsx
IgrGrid の sortStrategy は IgrColumn の sortStrategy と比較して異なるタイプです。異なるスコープで機能し、異なるパラメーターを公開するためです。
ソート操作で IgrGrid の基になるデータ ソースは変更しません。
初期のソート状態
IgrGrid
でソート状態を初期設定するには、ソート式の配列を IgrGrid
の sortingExpressions
プロパティに渡します。
useEffect(() => {
gridRef.current.sortingExpressions = [
{ fieldName: 'UnitsInStock', dir: SortingDirection.Asc, ignoreCase: true },
{ fieldName: 'ProductName', dir: SortingDirection.Desc }
];
}, [])
tsx
string 型の値が dataType Date の列で使用される場合、IgrGrid が値を Date オブジェクトに解析しないため IgrGrid Sorting が正しく動作しません。string オブジェクトを使用する場合、値を Date オブジェクトに解析するためのロジックをアプリケーション レベルで実装する必要があります。
ソート インジケーター テンプレート
列ヘッダーのソート インジケーター アイコンは、テンプレートを使用してカスタマイズできます。次のプロパティは、任意のソート状態 (昇順、降順、なし) のソート インジケーターをテンプレート化するために使用できます。
sortHeaderIconTemplate
– ソートが適用されない場合にソート アイコンを再テンプレート化します。
function sortHeaderIconTemplate(ctx: IgrGridHeaderTemplateContext) {
return (
<>
<IgrIcon name='unfold_more'></IgrIcon>
</>
);
}
<IgrGrid sortHeaderIconTemplate={sortHeaderIconTemplate}></IgrGrid>
tsx
sortAscendingHeaderIconTemplate
– 列が昇順にソートされたときにソート アイコンを再テンプレート化します。
function sortAscendingHeaderIconTemplate(ctx: IgrGridHeaderTemplateContext) {
return (
<>
<IgrIcon name='expand_less'></IgrIcon>
</>
);
}
<IgrGrid sortAscendingHeaderIconTemplate={sortAscendingHeaderIconTemplate}></IgrGrid>
tsx
sortDescendingHeaderIconTemplate
– 列が降順にソートされたときにソート アイコンを再テンプレート化します。
function sortDescendingHeaderIconTemplate(ctx: IgrGridHeaderTemplateContext) {
return (
<>
<IgrIcon name='expand_more'></IgrIcon>
</>
);
}
<IgrGrid sortDescendingHeaderIconTemplate={sortDescendingHeaderIconTemplate}></IgrGrid>
tsx
スタイル設定
定義済みのテーマに加えて、利用可能な CSS プロパティのいくつかを設定することで、グリッドをさらにカスタマイズできます。 一部の色を変更したい場合は、最初にグリッドのクラスを設定する必要があります。
<IgrGrid className="grid">
</IgrGrid>
tsx
次に、そのクラスに関連する CSS プロパティを設定します。
.grid {
--ig-grid-sorted-header-icon-color: #ffb06a;
--ig-grid-sortable-header-icon-hover-color: black;
}
css
デモ
export class ProductSalesItem {
public constructor(init: Partial<ProductSalesItem>) {
Object.assign(this, init);
}
public OrderID: number;
public SaleAmount: number;
public Category: string;
public Company: string;
public ShipCountry: string;
public ShippedDate: string;
}
export class ProductSales extends Array<ProductSalesItem> {
public constructor(items: Array<ProductSalesItem> | number = -1) {
if (Array.isArray(items)) {
super(...items);
} else {
const newItems = [
new ProductSalesItem(
{
OrderID: 10524,
SaleAmount: 3192.65,
Category: `Beverages`,
Company: `Berglunds snabbköp`,
ShipCountry: `France`,
ShippedDate: `1997-05-07T00:00:00Z`
}),
new ProductSalesItem(
{
OrderID: 10672,
SaleAmount: 3815.25,
Category: `Beverages`,
Company: `Berglunds snabbköp`,
ShipCountry: `Germany`,
ShippedDate: `1997-09-26T00:00:00Z`
}),
new ProductSalesItem(
{
OrderID: 10801,
SaleAmount: 3026.85,
Category: `Beverages`,
Company: `Bólido Comidas preparadas`,
ShipCountry: `Brazil`,
ShippedDate: `1997-12-31T00:00:00Z`
}),
new ProductSalesItem(
{
OrderID: 10511,
SaleAmount: 2550,
Category: `Beverages`,
Company: `Bon app'`,
ShipCountry: `France`,
ShippedDate: `1997-04-21T00:00:00Z`
}),
new ProductSalesItem(
{
OrderID: 10742,
SaleAmount: 3118,
Category: `Beverages`,
Company: `Bottom-Dollar Markets`,
ShipCountry: `Belgium`,
ShippedDate: `1997-11-18T00:00:00Z`
}),
new ProductSalesItem(
{
OrderID: 10400,
SaleAmount: 3063,
Category: `Beverages`,
Company: `Eastern Connection`,
ShipCountry: `Brazil`,
ShippedDate: `1997-01-16T00:00:00Z`
}),
new ProductSalesItem(
{
OrderID: 10402,
SaleAmount: 2713.5,
Category: `Beverages`,
Company: `Ernst Handel`,
ShipCountry: `Switzerland`,
ShippedDate: `1997-01-10T00:00:00Z`
}),
new ProductSalesItem(
{
OrderID: 10430,
SaleAmount: 4899.2,
Category: `Beverages`,
Company: `Ernst Handel`,
ShipCountry: `Switzerland`,
ShippedDate: `1997-02-03T00:00:00Z`
}),
new ProductSalesItem(
{
OrderID: 10514,
SaleAmount: 8623.45,
Category: `Beverages`,
Company: `Ernst Handel`,
ShipCountry: `Brazil`,
ShippedDate: `1997-05-16T00:00:00Z`
}),
new ProductSalesItem(
{
OrderID: 10595,
SaleAmount: 4725,
Category: `Beverages`,
Company: `Ernst Handel`,
ShipCountry: `Venezuela`,
ShippedDate: `1997-07-14T00:00:00Z`
}),
new ProductSalesItem(
{
OrderID: 10633,
SaleAmount: 5510.59,
Category: `Beverages`,
Company: `Ernst Handel`,
ShipCountry: `Austria`,
ShippedDate: `1997-08-18T00:00:00Z`
}),
new ProductSalesItem(
{
OrderID: 10698,
SaleAmount: 3436.45,
Category: `Beverages`,
Company: `Ernst Handel`,
ShipCountry: `Mexico`,
ShippedDate: `1997-10-17T00:00:00Z`
}),
new ProductSalesItem(
{
OrderID: 10776,
SaleAmount: 6635.27,
Category: `Condiments`,
Company: `Ernst Handel`,
ShipCountry: `Germany`,
ShippedDate: `1997-12-18T00:00:00Z`
}),
new ProductSalesItem(
{
OrderID: 10634,
SaleAmount: 4985.5,
Category: `Condiments`,
Company: `Folies gourmandes`,
ShipCountry: `Brazil`,
ShippedDate: `1997-08-21T00:00:00Z`
}),
new ProductSalesItem(
{
OrderID: 10789,
SaleAmount: 3687,
Category: `Condiments`,
Company: `Folies gourmandes`,
ShipCountry: `USA`,
ShippedDate: `1997-12-31T00:00:00Z`
}),
new ProductSalesItem(
{
OrderID: 10561,
SaleAmount: 2844.5,
Category: `Condiments`,
Company: `Folk och fä HB`,
ShipCountry: `Austria`,
ShippedDate: `1997-06-09T00:00:00Z`
}),
new ProductSalesItem(
{
OrderID: 10703,
SaleAmount: 2545,
Category: `Condiments`,
Company: `Folk och fä HB`,
ShipCountry: `Sweden`,
ShippedDate: `1997-10-20T00:00:00Z`
}),
new ProductSalesItem(
{
OrderID: 10762,
SaleAmount: 4337,
Category: `Condiments`,
Company: `Folk och fä HB`,
ShipCountry: `France`,
ShippedDate: `1997-12-09T00:00:00Z`
}),
new ProductSalesItem(
{
OrderID: 10629,
SaleAmount: 2775.05,
Category: `Condiments`,
Company: `Godos Cocina Típica`,
ShipCountry: `Finland`,
ShippedDate: `1997-08-20T00:00:00Z`
}),
new ProductSalesItem(
{
OrderID: 10709,
SaleAmount: 3424,
Category: `Condiments`,
Company: `Gourmet Lanchonetes`,
ShipCountry: `Germany`,
ShippedDate: `1997-11-20T00:00:00Z`
}),
new ProductSalesItem(
{
OrderID: 10616,
SaleAmount: 4807.01,
Category: `Condiments`,
Company: `Great Lakes Food Market`,
ShipCountry: `Venezuela`,
ShippedDate: `1997-08-05T00:00:00Z`
}),
new ProductSalesItem(
{
OrderID: 10490,
SaleAmount: 3163.2,
Category: `Condiments`,
Company: `HILARION-Abastos`,
ShipCountry: `USA`,
ShippedDate: `1997-04-03T00:00:00Z`
}),
new ProductSalesItem(
{
OrderID: 10567,
SaleAmount: 2519,
Category: `Condiments`,
Company: `Hungry Owl All-Night Grocers`,
ShipCountry: `Finland`,
ShippedDate: `1997-06-17T00:00:00Z`
}),
new ProductSalesItem(
{
OrderID: 10687,
SaleAmount: 4960.9,
Category: `Condiments`,
Company: `Hungry Owl All-Night Grocers`,
ShipCountry: `USA`,
ShippedDate: `1997-10-30T00:00:00Z`
}),
new ProductSalesItem(
{
OrderID: 10701,
SaleAmount: 2864.5,
Category: `Confections`,
Company: `Hungry Owl All-Night Grocers`,
ShipCountry: `USA`,
ShippedDate: `1997-10-15T00:00:00Z`
}),
new ProductSalesItem(
{
OrderID: 10718,
SaleAmount: 3463,
Category: `Confections`,
Company: `Königlich Essen`,
ShipCountry: `Germany`,
ShippedDate: `1997-10-29T00:00:00Z`
}),
new ProductSalesItem(
{
OrderID: 10787,
SaleAmount: 2622.76,
Category: `Confections`,
Company: `La maison d'Asie`,
ShipCountry: `France`,
ShippedDate: `1997-12-26T00:00:00Z`
}),
new ProductSalesItem(
{
OrderID: 10772,
SaleAmount: 3603.22,
Category: `Confections`,
Company: `Lehmanns Marktstand`,
ShipCountry: `Italy`,
ShippedDate: `1997-12-19T00:00:00Z`
}),
new ProductSalesItem(
{
OrderID: 10638,
SaleAmount: 2720.05,
Category: `Confections`,
Company: `LINO-Delicateses`,
ShipCountry: `Mexico`,
ShippedDate: `1997-09-01T00:00:00Z`
}),
new ProductSalesItem(
{
OrderID: 10760,
SaleAmount: 2917,
Category: `Confections`,
Company: `Maison Dewey`,
ShipCountry: `Germany`,
ShippedDate: `1997-12-10T00:00:00Z`
}),
new ProductSalesItem(
{
OrderID: 10424,
SaleAmount: 9194.56,
Category: `Confections`,
Company: `Mère Paillarde`,
ShipCountry: `Sweden`,
ShippedDate: `1997-01-27T00:00:00Z`
}),
new ProductSalesItem(
{
OrderID: 10605,
SaleAmount: 4109.7,
Category: `Confections`,
Company: `Mère Paillarde`,
ShipCountry: `Germany`,
ShippedDate: `1997-07-29T00:00:00Z`
}),
new ProductSalesItem(
{
OrderID: 10618,
SaleAmount: 2697.5,
Category: `Confections`,
Company: `Mère Paillarde`,
ShipCountry: `Sweden`,
ShippedDate: `1997-08-08T00:00:00Z`
}),
new ProductSalesItem(
{
OrderID: 10530,
SaleAmount: 4180,
Category: `Confections`,
Company: `Piccolo und mehr`,
ShipCountry: `Spain`,
ShippedDate: `1997-05-12T00:00:00Z`
}),
new ProductSalesItem(
{
OrderID: 10637,
SaleAmount: 2761.94,
Category: `Confections`,
Company: `Queen Cozinha`,
ShipCountry: `Spain`,
ShippedDate: `1997-08-26T00:00:00Z`
}),
new ProductSalesItem(
{
OrderID: 10451,
SaleAmount: 3849.66,
Category: `Confections`,
Company: `QUICK-Stop`,
ShipCountry: `Venezuela`,
ShippedDate: `1997-03-12T00:00:00Z`
}),
new ProductSalesItem(
{
OrderID: 10515,
SaleAmount: 9921.3,
Category: `Confections`,
Company: `QUICK-Stop`,
ShipCountry: `Germany`,
ShippedDate: `1997-05-23T00:00:00Z`
}),
new ProductSalesItem(
{
OrderID: 10540,
SaleAmount: 10191.7,
Category: `Dairy Product`,
Company: `QUICK-Stop`,
ShipCountry: `Germany`,
ShippedDate: `1997-06-13T00:00:00Z`
}),
new ProductSalesItem(
{
OrderID: 10549,
SaleAmount: 3554.28,
Category: `Dairy Product`,
Company: `QUICK-Stop`,
ShipCountry: `Germany`,
ShippedDate: `1997-05-30T00:00:00Z`
}),
new ProductSalesItem(
{
OrderID: 10588,
SaleAmount: 3120,
Category: `Dairy Product`,
Company: `QUICK-Stop`,
ShipCountry: `Brazil`,
ShippedDate: `1997-07-10T00:00:00Z`
}),
new ProductSalesItem(
{
OrderID: 10658,
SaleAmount: 4464.6,
Category: `Dairy Product`,
Company: `QUICK-Stop`,
ShipCountry: `Italy`,
ShippedDate: `1997-09-08T00:00:00Z`
}),
new ProductSalesItem(
{
OrderID: 10691,
SaleAmount: 10164.8,
Category: `Dairy Product`,
Company: `QUICK-Stop`,
ShipCountry: `UK`,
ShippedDate: `1997-10-22T00:00:00Z`
}),
new ProductSalesItem(
{
OrderID: 10694,
SaleAmount: 4825,
Category: `Dairy Product`,
Company: `QUICK-Stop`,
ShipCountry: `Brazil`,
ShippedDate: `1997-10-09T00:00:00Z`
}),
new ProductSalesItem(
{
OrderID: 10745,
SaleAmount: 4529.8,
Category: `Dairy Product`,
Company: `QUICK-Stop`,
ShipCountry: `Brazil`,
ShippedDate: `1997-11-27T00:00:00Z`
}),
new ProductSalesItem(
{
OrderID: 10401,
SaleAmount: 3868.6,
Category: `Dairy Product`,
Company: `Rattlesnake Canyon Grocery`,
ShipCountry: `Brazil`,
ShippedDate: `1997-01-10T00:00:00Z`
}),
new ProductSalesItem(
{
OrderID: 10479,
SaleAmount: 10495.6,
Category: `Dairy Product`,
Company: `Rattlesnake Canyon Grocery`,
ShipCountry: `Mexico`,
ShippedDate: `1997-03-21T00:00:00Z`
}),
new ProductSalesItem(
{
OrderID: 10666,
SaleAmount: 4666.94,
Category: `Dairy Product`,
Company: `Richter Supermarkt`,
ShipCountry: `USA`,
ShippedDate: `1997-09-22T00:00:00Z`
}),
new ProductSalesItem(
{
OrderID: 10393,
SaleAmount: 2556.95,
Category: `Grains/Cereal`,
Company: `Save-a-lot Markets`,
ShipCountry: `France`,
ShippedDate: `1997-01-03T00:00:00Z`
}),
new ProductSalesItem(
{
OrderID: 10398,
SaleAmount: 2505.6,
Category: `Grains/Cereal`,
Company: `Save-a-lot Markets`,
ShipCountry: `Venezuela`,
ShippedDate: `1997-01-09T00:00:00Z`
}),
new ProductSalesItem(
{
OrderID: 10440,
SaleAmount: 4924.14,
Category: `Grains/Cereal`,
Company: `Save-a-lot Markets`,
ShipCountry: `France`,
ShippedDate: `1997-02-28T00:00:00Z`
}),
new ProductSalesItem(
{
OrderID: 10510,
SaleAmount: 4707.54,
Category: `Grains/Cereal`,
Company: `Save-a-lot Markets`,
ShipCountry: `Ireland`,
ShippedDate: `1997-04-28T00:00:00Z`
}),
new ProductSalesItem(
{
OrderID: 10555,
SaleAmount: 2944.4,
Category: `Grains/Cereal`,
Company: `Save-a-lot Markets`,
ShipCountry: `Brazil`,
ShippedDate: `1997-06-04T00:00:00Z`
}),
new ProductSalesItem(
{
OrderID: 10607,
SaleAmount: 6475.4,
Category: `Grains/Cereal`,
Company: `Save-a-lot Markets`,
ShipCountry: `Italy`,
ShippedDate: `1997-07-25T00:00:00Z`
}),
new ProductSalesItem(
{
OrderID: 10612,
SaleAmount: 6375,
Category: `Grains/Cereal`,
Company: `Save-a-lot Markets`,
ShipCountry: `Germany`,
ShippedDate: `1997-08-01T00:00:00Z`
}),
new ProductSalesItem(
{
OrderID: 10657,
SaleAmount: 4371.6,
Category: `Meat/Poultr`,
Company: `Save-a-lot Markets`,
ShipCountry: `Belgium`,
ShippedDate: `1997-09-15T00:00:00Z`
}),
new ProductSalesItem(
{
OrderID: 10678,
SaleAmount: 5256.5,
Category: `Meat/Poultr`,
Company: `Save-a-lot Markets`,
ShipCountry: `Spain`,
ShippedDate: `1997-10-16T00:00:00Z`
}),
new ProductSalesItem(
{
OrderID: 10711,
SaleAmount: 4451.7,
Category: `Meat/Poultr`,
Company: `Save-a-lot Markets`,
ShipCountry: `Mexico`,
ShippedDate: `1997-10-29T00:00:00Z`
}),
new ProductSalesItem(
{
OrderID: 10713,
SaleAmount: 2827.9,
Category: `Meat/Poultr`,
Company: `Save-a-lot Markets`,
ShipCountry: `USA`,
ShippedDate: `1997-10-24T00:00:00Z`
}),
new ProductSalesItem(
{
OrderID: 10757,
SaleAmount: 3082,
Category: `Meat/Poultr`,
Company: `Save-a-lot Markets`,
ShipCountry: `Spain`,
ShippedDate: `1997-12-15T00:00:00Z`
}),
new ProductSalesItem(
{
OrderID: 10417,
SaleAmount: 11188.4,
Category: `Meat/Poultr`,
Company: `Simons bistro`,
ShipCountry: `USA`,
ShippedDate: `1997-01-28T00:00:00Z`
}),
new ProductSalesItem(
{
OrderID: 10458,
SaleAmount: 3891,
Category: `Produce`,
Company: `Suprêmes délices`,
ShipCountry: `Mexico`,
ShippedDate: `1997-03-04T00:00:00Z`
}),
new ProductSalesItem(
{
OrderID: 10518,
SaleAmount: 4150.05,
Category: `Produce`,
Company: `Tortuga Restaurante`,
ShipCountry: `Ireland`,
ShippedDate: `1997-05-05T00:00:00Z`
}),
new ProductSalesItem(
{
OrderID: 10465,
SaleAmount: 2518,
Category: `Produce`,
Company: `Vaffeljernet`,
ShipCountry: `USA`,
ShippedDate: `1997-03-14T00:00:00Z`
}),
new ProductSalesItem(
{
OrderID: 10688,
SaleAmount: 3160.6,
Category: `Produce`,
Company: `Vaffeljernet`,
ShipCountry: `France`,
ShippedDate: `1997-10-07T00:00:00Z`
}),
new ProductSalesItem(
{
OrderID: 10546,
SaleAmount: 2812,
Category: `Produce`,
Company: `Victuailles en stock`,
ShipCountry: `Germany`,
ShippedDate: `1997-05-27T00:00:00Z`
}),
new ProductSalesItem(
{
OrderID: 10455,
SaleAmount: 2684,
Category: `Seafood`,
Company: `Wartian Herkku`,
ShipCountry: `Germany`,
ShippedDate: `1997-03-03T00:00:00Z`
}),
];
super(...newItems.slice(0));
}
}
}
tsimport React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import { IgrGridModule } from "@infragistics/igniteui-react-grids";
import { IgrGrid, IgrSortingExpression, SortingDirection, IgrColumn, IgrColumnPipeArgs } from "@infragistics/igniteui-react-grids";
import { ComponentRenderer, WebGridDescriptionModule } from "@infragistics/igniteui-react-core";
import { ProductSalesItem, ProductSales } from './ProductSales';
import "@infragistics/igniteui-react-grids/grids/combined";
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({});
}
private _sortingExpression1: IgrSortingExpression[] | null = null;
public get sortingExpression1(): IgrSortingExpression[] {
if (this._sortingExpression1 == null)
{
let sortingExpression1: IgrSortingExpression[] = [];
var sortingExpression2: IgrSortingExpression = {} as IgrSortingExpression;
sortingExpression2.fieldName = "Category";
sortingExpression2.dir = SortingDirection.Asc;
sortingExpression2.ignoreCase = true;
sortingExpression1.push(sortingExpression2)
this._sortingExpression1 = sortingExpression1;
}
return this._sortingExpression1;
}
private column1: IgrColumn
private _columnPipeArgs1: IgrColumnPipeArgs | null = null;
public get columnPipeArgs1(): IgrColumnPipeArgs {
if (this._columnPipeArgs1 == null)
{
var columnPipeArgs1: IgrColumnPipeArgs = {} as IgrColumnPipeArgs;
columnPipeArgs1.currencyCode = "USD";
columnPipeArgs1.digitsInfo = "1.2-2";
this._columnPipeArgs1 = columnPipeArgs1;
}
return this._columnPipeArgs1;
}
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}
data={this.productSales}
ref={this.gridRef}
id="grid"
sortingExpressions={this.sortingExpression1}>
<IgrColumn
field="OrderID"
header="Order ID"
sortable={true}>
</IgrColumn>
<IgrColumn
field="Category"
header="Category Name"
dataType="string"
sortable={true}>
</IgrColumn>
<IgrColumn
field="Company"
header="Company"
dataType="string"
sortable={true}>
</IgrColumn>
<IgrColumn
field="ShipCountry"
header="Ship Country"
dataType="string"
sortable={true}>
</IgrColumn>
<IgrColumn
field="SaleAmount"
header="Sale Amount"
dataType="currency"
sortable={true}
pipeArgs={this.columnPipeArgs1}
name="column1">
</IgrColumn>
<IgrColumn
field="ShippedDate"
header="Shipped Date"
dataType="date"
sortable={true}>
</IgrColumn>
</IgrGrid>
</div>
</div>
);
}
private _productSales: ProductSales = null;
public get productSales(): ProductSales {
if (this._productSales == null)
{
this._productSales = new ProductSales();
}
return this._productSales;
}
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;
}
}
// rendering above component in the React DOM
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<Sample/>);
tsx/* shared styles are loaded from: */
/* https://static.infragistics.com/xplatform/css/samples */
#grid {
--ig-grid-sorted-header-icon-color: #ffb06a;
--ig-grid-sortable-header-icon-hover-color: black;
}
css
API リファレンス
その他のリソース
コミュニティに参加して新しいアイデアをご提案ください。