React Grid 列タイプの概要
React Grid は、デフォルトおよび編集テンプレートの外観に基づいて、number (数値)、string (文字列)、date (日付)、boolean (ブール値)、currency (通貨) および percent (パーセント) 列のデータ型のデフォルト処理を提供します。
React Grid 列タイプの例
export class InvoicesDataExtendedDates extends Array <Invoice >
{
public constructor ( ) {
super ();
this .push(new Invoice(
{
ProductID : 1 ,
ProductName : "Chai" ,
SupplierID : 1 ,
CategoryID : 1 ,
QuantityPerUnit : "10 boxes x 20 bags" ,
UnitPrice : 18.0000 ,
UnitsInStock : 39 ,
UnitsOnOrder : 0.030 ,
ReorderLevel : 10 ,
Discontinued : false ,
OrderDate : new Date ("2012-02-12" ),
OrderDateDelay : new Date ("2012-02-12" ),
OrderFullDate : new Date ("2012-02-12" )
}));
this .push(new Invoice(
{
ProductID : 2 ,
ProductName : "Chang" ,
SupplierID : 1 ,
CategoryID : 1 ,
QuantityPerUnit : "24 - 12 oz bottles" ,
UnitPrice : 19.0000 ,
UnitsInStock : 17 ,
UnitsOnOrder : 0.040 ,
ReorderLevel : 25 ,
Discontinued : true ,
OrderDate : new Date ("2003-03-17" ),
OrderDateDelay : new Date ("2003-03-17" ),
OrderFullDate : new Date ("2003-03-17" )
}));
this .push(new Invoice(
{
ProductID : 3 ,
ProductName : "Aniseed Syrup" ,
SupplierID : 1 ,
CategoryID : 2 ,
QuantityPerUnit : "12 - 550 ml bottles" ,
UnitPrice : 10.0000 ,
UnitsInStock : 13 ,
UnitsOnOrder : 0.070 ,
ReorderLevel : 25 ,
Discontinued : false ,
OrderDate : new Date ("2006-03-17" ),
OrderDateDelay : new Date ("2006-03-17" ),
OrderFullDate : new Date ("2006-03-17" )
}));
this .push(new Invoice(
{
ProductID : 4 ,
ProductName : "Chef Antons Cajun Seasoning" ,
SupplierID : 2 ,
CategoryID : 2 ,
QuantityPerUnit : "48 - 6 oz jars" ,
UnitPrice : 22.0000 ,
UnitsInStock : 53 ,
UnitsOnOrder : 0.030 ,
ReorderLevel : 0 ,
Discontinued : false ,
OrderDate : new Date ("2016-03-17" ),
OrderDateDelay : new Date ("2016-03-17" ),
OrderFullDate : new Date ("2016-03-17" )
}));
this .push(new Invoice(
{
ProductID : 5 ,
ProductName : "Chef Antons Gumbo Mix" ,
SupplierID : 2 ,
CategoryID : 2 ,
QuantityPerUnit : "36 boxes" ,
UnitPrice : 21.3500 ,
UnitsInStock : 0 ,
UnitsOnOrder : 0.030 ,
ReorderLevel : 0 ,
Discontinued : true ,
OrderDate : new Date ("2011-11-11" ),
OrderDateDelay : new Date ("2011-11-11" ),
OrderFullDate : new Date ("2011-11-11" )
}));
this .push(new Invoice(
{
ProductID : 6 ,
ProductName : "Grandmas Boysenberry Spread" ,
SupplierID : 3 ,
CategoryID : 2 ,
QuantityPerUnit : "12 - 8 oz jars" ,
UnitPrice : 25.0000 ,
UnitsInStock : 0 ,
UnitsOnOrder : 0.030 ,
ReorderLevel : 25 ,
Discontinued : false ,
OrderDate : new Date ("2017-12-17" ),
OrderDateDelay : new Date ("2017-12-17" ),
OrderFullDate : new Date ("2017-12-17" )
}));
this .push(new Invoice(
{
ProductID : 7 ,
ProductName : "Uncle Bobs Organic Dried Pears" ,
SupplierID : 3 ,
CategoryID : 7 ,
QuantityPerUnit : "12 - 1 lb pkgs." ,
UnitPrice : 30.0000 ,
UnitsInStock : 150 ,
UnitsOnOrder : 0.030 ,
ReorderLevel : 10 ,
Discontinued : false ,
OrderDate : new Date ("2016-07-17" ),
OrderDateDelay : new Date ("2016-07-17" ),
OrderFullDate : new Date ("2016-07-17" )
}));
this .push(new Invoice(
{
ProductID : 8 ,
ProductName : "Northwoods Cranberry Sauce" ,
SupplierID : 3 ,
CategoryID : 2 ,
QuantityPerUnit : "12 - 12 oz jars" ,
UnitPrice : 40.0000 ,
UnitsInStock : 6 ,
UnitsOnOrder : 0.030 ,
ReorderLevel : 0 ,
Discontinued : false ,
OrderDate : new Date ("2018-01-17" ),
OrderDateDelay : new Date ("2018-01-17" ),
OrderFullDate : new Date ("2018-01-17" )
}));
this .push(new Invoice(
{
ProductID : 9 ,
ProductName : "Mishi Kobe Niku" ,
SupplierID : 4 ,
CategoryID : 6 ,
QuantityPerUnit : "18 - 500 g pkgs." ,
UnitPrice : 97.0000 ,
UnitsInStock : 29 ,
UnitsOnOrder : 0.030 ,
ReorderLevel : 0 ,
Discontinued : true ,
OrderDate : new Date ("2010-02-17" ),
OrderDateDelay : new Date ("2010-02-17" ),
OrderFullDate : new Date ("2010-02-17" )
}));
}
}
export class Invoice
{
public constructor (init: Partial<Invoice> ) {
Object .assign(this , init);
}
public ProductID: number ;
public ProductName: string ;
public SupplierID: number ;
public CategoryID: number ;
public QuantityPerUnit: string ;
public UnitPrice: number ;
public UnitsInStock: number ;
public UnitsOnOrder: number ;
public ReorderLevel: number ;
public Discontinued: boolean ;
public OrderDate: Date ;
public OrderDateDelay: Date ;
public OrderFullDate: Date ;
}
ts コピー import React from 'react' ;
import ReactDOM from 'react-dom/client' ;
import './index.css' ;
import { IgrGridModule } from "@infragistics/igniteui-react-grids" ;
import { IgrGrid, IgrColumn, IgrColumnPipeArgs } from "@infragistics/igniteui-react-grids" ;
import { InvoicesDataExtendedDates } from './InvoicesDataExtendedDates' ;
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 _columnPipeArgs1: IgrColumnPipeArgs | null = null ;
public get columnPipeArgs1(): IgrColumnPipeArgs {
if (this ._columnPipeArgs1 == null )
{
var columnPipeArgs1: IgrColumnPipeArgs = {} as IgrColumnPipeArgs;
columnPipeArgs1.currencyCode = "" ;
columnPipeArgs1.digitsInfo = "1.4-4" ;
this ._columnPipeArgs1 = columnPipeArgs1;
}
return this ._columnPipeArgs1;
}
private _columnPipeArgs2: IgrColumnPipeArgs | null = null ;
public get columnPipeArgs2(): IgrColumnPipeArgs {
if (this ._columnPipeArgs2 == null )
{
var columnPipeArgs2: IgrColumnPipeArgs = {} as IgrColumnPipeArgs;
columnPipeArgs2.format = "long" ;
columnPipeArgs2.timezone = "UTC+0" ;
this ._columnPipeArgs2 = columnPipeArgs2;
}
return this ._columnPipeArgs2;
}
private _columnPipeArgs3: IgrColumnPipeArgs | null = null ;
public get columnPipeArgs3(): IgrColumnPipeArgs {
if (this ._columnPipeArgs3 == null )
{
var columnPipeArgs3: IgrColumnPipeArgs = {} as IgrColumnPipeArgs;
columnPipeArgs3.format = "mediumDate" ;
this ._columnPipeArgs3 = columnPipeArgs3;
}
return this ._columnPipeArgs3;
}
private _columnPipeArgs4: IgrColumnPipeArgs | null = null ;
public get columnPipeArgs4(): IgrColumnPipeArgs {
if (this ._columnPipeArgs4 == null )
{
var columnPipeArgs4: IgrColumnPipeArgs = {} as IgrColumnPipeArgs;
columnPipeArgs4.format = "shortTime" ;
columnPipeArgs4.timezone = "UTC+0" ;
this ._columnPipeArgs4 = columnPipeArgs4;
}
return this ._columnPipeArgs4;
}
private _columnPipeArgs5: IgrColumnPipeArgs | null = null ;
public get columnPipeArgs5(): IgrColumnPipeArgs {
if (this ._columnPipeArgs5 == null )
{
var columnPipeArgs5: IgrColumnPipeArgs = {} as IgrColumnPipeArgs;
columnPipeArgs5.currencyCode = "" ;
columnPipeArgs5.digitsInfo = "1.4-4" ;
this ._columnPipeArgs5 = columnPipeArgs5;
}
return this ._columnPipeArgs5;
}
private _columnPipeArgs6: IgrColumnPipeArgs | null = null ;
public get columnPipeArgs6(): IgrColumnPipeArgs {
if (this ._columnPipeArgs6 == null )
{
var columnPipeArgs6: IgrColumnPipeArgs = {} as IgrColumnPipeArgs;
columnPipeArgs6.currencyCode = "" ;
columnPipeArgs6.digitsInfo = "1.4-4" ;
this ._columnPipeArgs6 = columnPipeArgs6;
}
return this ._columnPipeArgs6;
}
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.invoicesDataExtendedDates}
ref ={this.gridRef}
id ="grid"
allowFiltering ={true}
filterMode ="excelStyleFilter"
locale ="EN" >
<IgrColumn
field ="ProductName"
header ="Prod. Name"
width ="120px"
sortable ={true}
hasSummary ={true}
editable ={true}
resizable ={true}
dataType ="string" >
</IgrColumn >
<IgrColumn
field ="UnitPrice"
header ="Unit Price"
width ="120px"
sortable ={true}
hasSummary ={true}
editable ={true}
resizable ={true}
dataType ="number"
pipeArgs ={this.columnPipeArgs1} >
</IgrColumn >
<IgrColumn
field ="OrderFullDate"
header ="Order Full Date"
width ="300px"
sortable ={true}
hasSummary ={true}
editable ={true}
resizable ={true}
dataType ="dateTime"
pipeArgs ={this.columnPipeArgs2} >
</IgrColumn >
<IgrColumn
field ="OrderDate"
header ="Order Date"
width ="160px"
sortable ={true}
hasSummary ={true}
editable ={true}
resizable ={true}
dataType ="date"
pipeArgs ={this.columnPipeArgs3} >
</IgrColumn >
<IgrColumn
field ="OrderDateDelay"
header ="Order Time"
width ="120px"
sortable ={true}
hasSummary ={true}
editable ={true}
resizable ={true}
dataType ="time"
pipeArgs ={this.columnPipeArgs4} >
</IgrColumn >
<IgrColumn
field ="UnitsInStock"
header ="Stock Value"
width ="120px"
sortable ={true}
hasSummary ={true}
editable ={true}
resizable ={true}
dataType ="currency"
pipeArgs ={this.columnPipeArgs5} >
</IgrColumn >
<IgrColumn
field ="UnitsOnOrder"
header ="% Change"
width ="120px"
sortable ={true}
hasSummary ={true}
editable ={true}
resizable ={true}
dataType ="percent"
pipeArgs ={this.columnPipeArgs6} >
</IgrColumn >
<IgrColumn
field ="Discontinued"
header ="Discontinued"
width ="160px"
sortable ={true}
hasSummary ={true}
editable ={true}
resizable ={true}
dataType ="boolean" >
</IgrColumn >
</IgrGrid >
</div >
</div >
);
}
private _invoicesDataExtendedDates: InvoicesDataExtendedDates = null ;
public get invoicesDataExtendedDates(): InvoicesDataExtendedDates {
if (this ._invoicesDataExtendedDates == null )
{
this ._invoicesDataExtendedDates = new InvoicesDataExtendedDates();
}
return this ._invoicesDataExtendedDates;
}
}
const root = ReactDOM.createRoot (document.getElementById('root' ));
root.render (<Sample /> );
tsx コピー
#grid {
--ig-size: var (--ig-size-small);
}
css コピー
このサンプルが気に入りましたか? 完全な Ignite UI for Reactツールキットにアクセスして、すばやく独自のアプリの作成を開始します。無料でダウンロードできます。
React Grid デフォルト テンプレート
データ型固有のテンプレートを有効にする場合、列の dataType
入力を設定する必要があります。設定しない場合、列は文字列の列として処理されます (これは列 dataType
のデフォルト値であるためです)。
次に、各 dataType
のデフォルト テンプレートについて説明します。
String (文字列)
この列 dataType
はセル値の外観または書式を変更しません。
Number (数値)
dataType
が number に設定されている場合、セル値はアプリケーションまたはグリッドの locale
設定に基づいて書式設定され、pipeArgs
プロパティが指定されている場合にも同じように設定されます。数値書式はそれらに基づいて変更されます。たとえば、以下を変更します:
小数点後の桁数。
,
または .
の少数桁の区切り文字
const formatOptions : IgrColumnPipeArgs = {
digitsInfo: "1.4-4"
};
<IgrColumn pipeArgs ={formatOptions} dataType ="number" > </IgrColumn >
tsx
DateTime、Date and Time (日付と時刻)
日付部分の外観は、locale
の形式または pipeArgs
入力に基づいて設定されます (例: 日、月、年)。Pipe 引数はカスタム日付書式またはタイムゾーンを指定するために使用できます。
format - 日付の書式設定のデフォルト値は 'mediumDate'
です。その他の利用可能なオプション 'short'
、'long'
、'shortDate'
、'fullDate'
、'longTime'
、'fullTime'
などです。
timezone - ユーザーのローカル システム タイムゾーンがデフォルト値です。タイムゾーン オフセットまたは標準の UTC/GMT または米国本土のタイムゾーンの略語も渡すことができます。世界の任意の場所の対応する時間を表示するさまざまなタイムゾーンの例:
const formatOptions : IgrColumnPipeArgs = {
format: "long" ,
timezone: "UTC+0"
};
<IgrColumn pipeArgs ={formatOptions} dataType ="date" > </IgrColumn >
tsx
利用可能なタイムゾーン:
タイムゾーン
値
Alpha Time Zone
‘UTC+1’
Australian Central Time
‘UTC+9:30/ +10:30’
Arabia Standard Time
‘UTC+3’
Central Standard Time
‘UTC-6’
China Standard Time
‘UTC+8’
Delta Time Zone
‘UTC+4’
Greenwich Mean Time
‘UTC+0’
Gulf Standard Time
‘UTC+4’
Hawaii Standard Time
‘UTC-10’
India Standard Time
‘UTC+4’
IgrGrid
は、Date オブジェクト 、数値 (ミリ秒) または ISO 日付/時刻文字列 の日付値を受け取ります。このセクションは、カスタム表示書式を構成する方法 を示します。
サンプルでは、特定の列タイプで使用可能な書式を紹介するために、さまざまな書式設定オプションを指定しています。たとえば、以下は日付オブジェクトの time 部分の書式設定オプションのサンプルです。
const timeFormats = [
{ format: 'shortTime' , eq: 'h:mm a' },
{ format: 'mediumTime' , eq: 'h:mm:ss a' },
{ format: 'longTime' , eq: 'h:mm:ss a z' },
{ format: 'fullTime' , eq: 'h:mm:ss a zzzz' },
];
tsx
セルの編集
列タイプに基づくセル編集に関しては、別のエディターが表示されます。
DateTime
- DateTimeEditor
が使用されます。このエディターは、DateTime
オブジェクトの入力要素部分のマスクを提供します。
Date
- IgrDatePicker
が使用されます。
Time
- TimePicker
が使用されます。
フィルタリング
クイック フィルタリング/Excel スタイル フィルタリングに関しては、上記と同じエディターが使用されます。これらは、各タイプが公開する次のフィルタリング オペランドです。
DateTime
および Date
- Equals、Does Not Equal、Before、After、Today、Yesterday、This Month、Last Month、Next Month、This Year、Last Year、Next Year、Empty、Not Empty、Null、Not Null;
Time
- At、Not At、Before、After、At or Before、At or After、Empty、Not Empty、Null、Not Null;
集計
使用可能な集計オペランドは、Count 、Earliest (date/time)、および Latest (date/time) になります。
ソート
Time
: タイプの列は、オブジェクトの時間部分に基づいてソートされます。分/秒は無視されます。
Date
: タイプの列は、日付部分に基づいてソートされ、時間部分は無視されます。
DateTime
: タイプの列は、日付に基づいてソートされます。
Boolean (ブール値)
デフォルトのテンプレートは、ブール値の可視化にマテリアル アイコンを使用します。false 値には 'clear' アイコン、true 値には 'check' アイコンを使用します。編集テンプレートは IgrCheckbox
コンポーネントを使用しています。
<IgrColumn dataType ="boolean" > </IgrColumn >
tsx
Image (画像)
デフォルトのテンプレートは、デフォルの画像テンプレートへの画像ソースとしてデータからの値を使用しています。デフォルトの画像テンプレートは、画像ファイルの名前を抽出し、アクセシビリティ要件を満たすために画像の alt
属性として設定します。表示されるセル サイズは描画される画像のサイズに合わせて調整されるため、大きな画像も描画され、グリッド行は画像列の画像と同じ大きさになることに注意してください。画像タイプの列では、フィルタリング、ソート、およびグループ化はデフォルトでオフになっています。それらを有効にしたい場合は、データ操作を実行するカスタム ストラテジを提供する必要があります。
<IgrColumn field ="Image" dataType ="image" > </IgrColumn >
tsx
列に autoGenerate
を使用すると、グリッドは最初のデータ レコードの値を分析します。値が文字列型で、画像拡張子 (gif、jpg、jpeg、tiff、png、webp、bmp) で終わる URL のパターンと一致する場合、列は自動的に dataType === GridColumnDataType.Image
としてマークされ、デフォルトの画像テンプレートが描画されます。
Currency (通貨)
デフォルトのテンプレート
デフォルトのテンプレートには、接頭辞または接尾辞が付いた通貨記号を含む数値を表示します。
const formatOptions : IgrColumnPipeArgs = {
digitsInfo: "1.4-4" ,
display: "symbol-narrow"
};
<IgrColumn pipeArgs ={formatOptions} dataType ="currency" field ="UnitsInStock" > </IgrColumn >
tsx
パラメーター
説明
digitsInfo
通貨値の 10 進数表現を表します。
display*
狭義または広義の記号で値を表示します。
*display - デフォルトの en-US ロケールの場合、USD コードは省略記号 $ または記号 US$ で表すことができます。
セルの値を編集すると、通貨記号 がサフィックスまたはプレフィックスとして表示されます。詳細については、公式のセル編集トピック を参照してください。
注: 上/下矢印キーを使用する場合、値は digitsInfo - minFractionDigits (小数点以下の最小桁数。デフォルトは 0 です。) に基づいてステップで増減します。
Percent (パーセント)
デフォルトのテンプレートは、基になる数値に相当するパーセントを表示します。表示されるセル値は、'100' の表示ファクタで乗算された結果です。たとえば、デフォルトのファクタは 100 で、セルに渡される値は 0.123 であるため、表示されるセル値は 12.3% になります。
セル編集の場合、値はデータ ソース値と同じになります。表示ファクタは '1' です。セルを編集すると、パーセント値のプレビューがサフィックス要素として表示されます。たとえば、'0.0547' の編集中にプレビュー要素に '5.47%' が表示されます。
const formatOptions : IgrColumnPipeArgs = {
digitsInfo: "2.2-3"
};
<IgrColumn pipeArgs ={formatOptions} dataType ="percent" > </IgrColumn >
tsx
上/下矢印キーを使用する場合、値は digitsInfo - minFractionDigits (小数点以下の最小桁数。デフォルトは 0 です。) に基づいてステップで増減します。
デフォルトの編集テンプレート
Grid 編集トピック の編集テンプレート部分を参照してください。
カスタム編集テンプレートとフォーマッタ
カスタム テンプレートと列フォーマッタの定義は、列データ型セットより常に優先されます。
カスタム テンプレート
const editCellTemplate = (ctx: IgrCellTemplateContext) => {
return (
<>
<input > </input >
</>
);
}
<IgrGrid autoGenerate ={false} >
<IgrColumn inlineEditorTemplate ={editCellTemplate} > </IgrColumn >
</IgrGrid >
tsx
列の書式設定
const formatCurrency = (value: number ) => {
return `$ ${value.toFixed(0 )}`;
}
<IgrGrid autoGenerate ={false} >
<IgrColumn formatter ={formatCurrency} field ="UnitsInStock" > </IgrColumn >
</IgrGrid >
tsx
API リファレンス
その他のリソース
カスタム テンプレートについては、セル編集トピック を参照してください。