Web Components Grid 列タイプの概要
Web Components Grid は、デフォルトおよび編集テンプレートの外観に基づいて、number (数値)、string (文字列)、date (日付)、boolean (ブール値)、currency (通貨) および percent (パーセント) 列のデータ型のデフォルト処理を提供します。
Web Components 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 'igniteui-webcomponents-grids/grids/combined' ;
import { IgcGridComponent, IgcColumnComponent, IgcColumnPipeArgs } from 'igniteui-webcomponents-grids/grids' ;
import { InvoicesDataExtendedDates } from './InvoicesDataExtendedDates' ;
import "igniteui-webcomponents-grids/grids/themes/light/bootstrap.css" ;
import "./index.css" ;
export class Sample {
private grid: IgcGridComponent
private column1: IgcColumnComponent
private _columnPipeArgs1: IgcColumnPipeArgs | null = null ;
public get columnPipeArgs1 (): IgcColumnPipeArgs {
if (this ._columnPipeArgs1 == null )
{
var columnPipeArgs1: IgcColumnPipeArgs = {} as IgcColumnPipeArgs;
columnPipeArgs1.currencyCode = "" ;
columnPipeArgs1.digitsInfo = "1.4-4" ;
this ._columnPipeArgs1 = columnPipeArgs1;
}
return this ._columnPipeArgs1;
}
private column2: IgcColumnComponent
private _columnPipeArgs2: IgcColumnPipeArgs | null = null ;
public get columnPipeArgs2 (): IgcColumnPipeArgs {
if (this ._columnPipeArgs2 == null )
{
var columnPipeArgs2: IgcColumnPipeArgs = {} as IgcColumnPipeArgs;
columnPipeArgs2.format = "long" ;
columnPipeArgs2.timezone = "UTC+0" ;
this ._columnPipeArgs2 = columnPipeArgs2;
}
return this ._columnPipeArgs2;
}
private column3: IgcColumnComponent
private _columnPipeArgs3: IgcColumnPipeArgs | null = null ;
public get columnPipeArgs3 (): IgcColumnPipeArgs {
if (this ._columnPipeArgs3 == null )
{
var columnPipeArgs3: IgcColumnPipeArgs = {} as IgcColumnPipeArgs;
columnPipeArgs3.format = "mediumDate" ;
this ._columnPipeArgs3 = columnPipeArgs3;
}
return this ._columnPipeArgs3;
}
private column4: IgcColumnComponent
private _columnPipeArgs4: IgcColumnPipeArgs | null = null ;
public get columnPipeArgs4 (): IgcColumnPipeArgs {
if (this ._columnPipeArgs4 == null )
{
var columnPipeArgs4: IgcColumnPipeArgs = {} as IgcColumnPipeArgs;
columnPipeArgs4.format = "shortTime" ;
columnPipeArgs4.timezone = "UTC+0" ;
this ._columnPipeArgs4 = columnPipeArgs4;
}
return this ._columnPipeArgs4;
}
private column5: IgcColumnComponent
private _columnPipeArgs5: IgcColumnPipeArgs | null = null ;
public get columnPipeArgs5 (): IgcColumnPipeArgs {
if (this ._columnPipeArgs5 == null )
{
var columnPipeArgs5: IgcColumnPipeArgs = {} as IgcColumnPipeArgs;
columnPipeArgs5.currencyCode = "" ;
columnPipeArgs5.digitsInfo = "1.4-4" ;
this ._columnPipeArgs5 = columnPipeArgs5;
}
return this ._columnPipeArgs5;
}
private column6: IgcColumnComponent
private _columnPipeArgs6: IgcColumnPipeArgs | null = null ;
public get columnPipeArgs6 (): IgcColumnPipeArgs {
if (this ._columnPipeArgs6 == null )
{
var columnPipeArgs6: IgcColumnPipeArgs = {} as IgcColumnPipeArgs;
columnPipeArgs6.currencyCode = "" ;
columnPipeArgs6.digitsInfo = "1.4-4" ;
this ._columnPipeArgs6 = columnPipeArgs6;
}
return this ._columnPipeArgs6;
}
private _bind: () => void ;
constructor ( ) {
var grid = this .grid = document .getElementById('grid' ) as IgcGridComponent;
var column1 = this .column1 = document .getElementById('column1' ) as IgcColumnComponent;
var column2 = this .column2 = document .getElementById('column2' ) as IgcColumnComponent;
var column3 = this .column3 = document .getElementById('column3' ) as IgcColumnComponent;
var column4 = this .column4 = document .getElementById('column4' ) as IgcColumnComponent;
var column5 = this .column5 = document .getElementById('column5' ) as IgcColumnComponent;
var column6 = this .column6 = document .getElementById('column6' ) as IgcColumnComponent;
this ._bind = () => {
grid.data = this .invoicesDataExtendedDates;
column1.pipeArgs = this .columnPipeArgs1;
column2.pipeArgs = this .columnPipeArgs2;
column3.pipeArgs = this .columnPipeArgs3;
column4.pipeArgs = this .columnPipeArgs4;
column5.pipeArgs = this .columnPipeArgs5;
column6.pipeArgs = this .columnPipeArgs6;
}
this ._bind();
}
private _invoicesDataExtendedDates: InvoicesDataExtendedDates = null ;
public get invoicesDataExtendedDates (): InvoicesDataExtendedDates {
if (this ._invoicesDataExtendedDates == null )
{
this ._invoicesDataExtendedDates = new InvoicesDataExtendedDates();
}
return this ._invoicesDataExtendedDates;
}
}
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-grid
auto-generate ="false"
name ="grid"
id ="grid"
id ="grid"
allow-filtering ="true"
filter-mode ="excelStyleFilter"
locale ="EN" >
<igc-column
field ="ProductName"
header ="Prod. Name"
width ="120px"
sortable ="true"
has-summary ="true"
editable ="true"
resizable ="true"
data-type ="string" >
</igc-column >
<igc-column
field ="UnitPrice"
header ="Unit Price"
width ="120px"
sortable ="true"
has-summary ="true"
editable ="true"
resizable ="true"
data-type ="number"
name ="column1"
id ="column1" >
</igc-column >
<igc-column
field ="OrderFullDate"
header ="Order Full Date"
width ="300px"
sortable ="true"
has-summary ="true"
editable ="true"
resizable ="true"
data-type ="dateTime"
name ="column2"
id ="column2" >
</igc-column >
<igc-column
field ="OrderDate"
header ="Order Date"
width ="160px"
sortable ="true"
has-summary ="true"
editable ="true"
resizable ="true"
data-type ="date"
name ="column3"
id ="column3" >
</igc-column >
<igc-column
field ="OrderDateDelay"
header ="Order Time"
width ="120px"
sortable ="true"
has-summary ="true"
editable ="true"
resizable ="true"
data-type ="time"
name ="column4"
id ="column4" >
</igc-column >
<igc-column
field ="UnitsInStock"
header ="Stock Value"
width ="120px"
sortable ="true"
has-summary ="true"
editable ="true"
resizable ="true"
data-type ="currency"
name ="column5"
id ="column5" >
</igc-column >
<igc-column
field ="UnitsOnOrder"
header ="% Change"
width ="120px"
sortable ="true"
has-summary ="true"
editable ="true"
resizable ="true"
data-type ="percent"
name ="column6"
id ="column6" >
</igc-column >
<igc-column
field ="Discontinued"
header ="Discontinued"
width ="160px"
sortable ="true"
has-summary ="true"
editable ="true"
resizable ="true"
data-type ="boolean" >
</igc-column >
</igc-grid >
</div >
</div >
</div >
<% if (false) { %><script src ="src/index.ts" > </script > <% } %>
</body >
</html >
html コピー
#grid {
--ig-size: var (--ig-size-small);
}
css コピー
このサンプルが気に入りましたか? 完全な Ignite UI for Web Componentsツールキットにアクセスして、すばやく独自のアプリの作成を開始します。無料でダウンロードできます。
Web Components Grid デフォルト テンプレート
データ型固有のテンプレートを有効にする場合、列の dataType
入力を設定する必要があります。設定しない場合、列は文字列の列として処理されます (これは列 dataType
のデフォルト値であるためです)。
次に、各 dataType
のデフォルト テンプレートについて説明します。
String (文字列)
この列 dataType
はセル値の外観または書式を変更しません。
Number (数値)
dataType
が number に設定されている場合、セル値はアプリケーションまたはグリッドの locale
設定に基づいて書式設定され、pipeArgs
プロパティが指定されている場合にも同じように設定されます。数値書式はそれらに基づいて変更されます。たとえば、以下を変更します:
小数点後の桁数。
,
または .
の少数桁の区切り文字
<igc-column id ="column" data-type ="number" >
</igc-column >
html
public get formatOptions (): any {
return {
digitsInfo : "1.4-4"
};
}
constructor ( ) {
var column = document .getElementById('column' ) as IgcColumnComponent;
column.pipeArgs = this .formatOptions;
}
ts
DateTime、Date and Time (日付と時刻)
日付部分の外観は、locale
の形式または pipeArgs
入力に基づいて設定されます (例: 日、月、年)。Pipe 引数はカスタム日付書式またはタイムゾーンを指定するために使用できます。
format - 日付の書式設定のデフォルト値は 'mediumDate'
です。その他の利用可能なオプション 'short'
、'long'
、'shortDate'
、'fullDate'
、'longTime'
、'fullTime'
などです。
timezone - ユーザーのローカル システム タイムゾーンがデフォルト値です。タイムゾーン オフセットまたは標準の UTC/GMT または米国本土のタイムゾーンの略語も渡すことができます。世界の任意の場所の対応する時間を表示するさまざまなタイムゾーンの例:
<igc-column id ="column" data-type ="date" >
</igc-column >
html
public get formatDateOptions (): any {
return {
format : "long" ,
timezone : "UTC+0"
};
}
constructor ( ) {
var column = document .getElementById('column' ) as IgcColumnComponent;
column.pipeArgs = this .formatDateOptions;
}
ts
利用可能なタイムゾーン:
タイムゾーン
値
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’
IgcGridComponent
は、Date オブジェクト 、数値 (ミリ秒) または ISO 日付/時刻文字列 の日付値を受け取ります。このセクションは、カスタム表示書式を構成する方法 を示します。
サンプルでは、特定の列タイプで使用可能な書式を紹介するために、さまざまな書式設定オプションを指定しています。たとえば、以下は日付オブジェクトの time 部分の書式設定オプションのサンプルです。
public 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' },
];
ts
セルの編集
列タイプに基づくセル編集に関しては、別のエディターが表示されます。
DateTime
- DateTimeEditor
が使用されます。このエディターは、DateTime
オブジェクトの入力要素部分のマスクを提供します。
Date
- IgcDatePickerComponent
が使用されます。
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' アイコンを使用します。編集テンプレートは IgcCheckboxComponent
コンポーネントを使用しています。
<igc-column data-type ="boolean" >
</igc-column >
html
Image (画像)
デフォルトのテンプレートは、デフォルの画像テンプレートへの画像ソースとしてデータからの値を使用しています。デフォルトの画像テンプレートは、画像ファイルの名前を抽出し、アクセシビリティ要件を満たすために画像の alt
属性として設定します。表示されるセル サイズは描画される画像のサイズに合わせて調整されるため、大きな画像も描画され、グリッド行は画像列の画像と同じ大きさになることに注意してください。画像タイプの列では、フィルタリング、ソート、およびグループ化はデフォルトでオフになっています。それらを有効にしたい場合は、データ操作を実行するカスタム ストラテジを提供する必要があります。
<igc-column field ="Image" data-type ="image" >
</igc-column >
html
列に autoGenerate
を使用すると、グリッドは最初のデータ レコードの値を分析します。値が文字列型で、画像拡張子 (gif、jpg、jpeg、tiff、png、webp、bmp) で終わる URL のパターンと一致する場合、列は自動的に dataType === GridColumnDataType.Image
としてマークされ、デフォルトの画像テンプレートが描画されます。
Currency (通貨)
デフォルトのテンプレート
デフォルトのテンプレートには、接頭辞または接尾辞が付いた通貨記号を含む数値を表示します。
<igc-column id ="column" field ="UnitsInStock" data-type ="currency" >
</igc-column >
html
public get formatOptions (): any {
return {
digitsInfo : '3.4-4' ,
display : 'symbol-narrow'
};
}
constructor ( ) {
var column = document .getElementById('column' ) as IgcColumnComponent;
column.pipeArgs = this .formatOptions;
}
ts
パラメーター
説明
digitsInfo
通貨値の 10 進数表現を表します。
display*
狭義または広義の記号で値を表示します。
*display - デフォルトの en-US ロケールの場合、USD コードは省略記号 $ または記号 US$ で表すことができます。
セルの値を編集すると、通貨記号 がサフィックスまたはプレフィックスとして表示されます。詳細については、公式のセル編集トピック を参照してください。
注: 上/下矢印キーを使用する場合、値は digitsInfo - minFractionDigits (小数点以下の最小桁数。デフォルトは 0 です。) に基づいてステップで増減します。
Percent (パーセント)
デフォルトのテンプレートは、基になる数値に相当するパーセントを表示します。表示されるセル値は、'100' の表示ファクタで乗算された結果です。たとえば、デフォルトのファクタは 100 で、セルに渡される値は 0.123 であるため、表示されるセル値は 12.3% になります。
セル編集の場合、値はデータ ソース値と同じになります。表示ファクタは '1' です。セルを編集すると、パーセント値のプレビューがサフィックス要素として表示されます。たとえば、'0.0547' の編集中にプレビュー要素に '5.47%' が表示されます。
<igc-column id ="column" field ="UnitsInStock" data-type ="percent" >
</igc-column >
html
public get formatPercentOptions (): any {
return {
digitsInfo : '2.2-3'
};
}
constructor ( ) {
var column = document .getElementById('column' ) as IgcColumnComponent;
column.pipeArgs = this .formatPercentOptions;
}
ts
上/下矢印キーを使用する場合、値は digitsInfo - minFractionDigits (小数点以下の最小桁数。デフォルトは 0 です。) に基づいてステップで増減します。
デフォルトの編集テンプレート
Grid 編集トピック の編集テンプレート部分を参照してください。
カスタム編集テンプレートとフォーマッタ
カスタム テンプレートと列フォーマッタの定義は、列データ型セットより常に優先されます。
カスタム テンプレート
<igc-grid id ="grid1" auto-generate ="false" >
<igc-column id ="UnitsInStock" field ="UnitsInStock" data-type ="currency" editable ="true" >
</igc-column >
</igc-grid >
html
constructor ( ) {
var unitsInStock = document .getElementById('UnitsInStock' ) as IgcColumnComponent;
unitsInStock.inlineEditorTemplate = this .editCellTemplate;
}
public editCellTemplate = (ctx: IgcCellTemplateContext ) => {
return html`<input > </input > ` ;
}
ts
列の書式設定
<igc-grid id ="grid1" auto-generate ="false" >
<igc-column id ="UnitsInStock" field ="UnitsInStock" data-type ="currency" >
</igc-column >
</igc-grid >
html
constructor ( ) {
var unitsInStock = this .unitsInStock = document .getElementById('UnitsInStock' ) as IgcColumnComponent;
unitsInStock.formatter = this .formatCurrency;
}
public formatCurrency (value: number ) {
return `$ ${value.toFixed(0 )} ` ;
}
ts
API リファレンス
その他のリソース
カスタム テンプレートについては、セル編集トピック を参照してください。