React Grid 列タイプの概要

    React Grid は、デフォルトおよび編集テンプレートの外観に基づいて、number (数値)、string (文字列)、date (日付)、boolean (ブール値)、currency (通貨) および percent (パーセント) 列のデータ型のデフォルト処理を提供します。

    React Grid 列タイプの例

    React Grid デフォルト テンプレート

    データ型固有のテンプレートを有効にする場合、列の dataType 入力を設定する必要があります。設定しない場合、列は文字列の列として処理されます (これは列 dataType のデフォルト値であるためです)。

    次に、各 dataType のデフォルト テンプレートについて説明します。

    String (文字列)

    この列 dataType はセル値の外観または書式を変更しません。

    Number (数値)

    dataType が number に設定されている場合、セル値はアプリケーションまたはグリッドの locale 設定に基づいて書式設定され、pipeArgs プロパティが指定されている場合にも同じように設定されます。数値書式はそれらに基づいて変更されます。たとえば、以下を変更します:

    • 小数点後の桁数。
    • , または . の少数桁の区切り文字
    const formatOptions = new IgrColumnPipeArgs();
formatOptions.digitsInfo = "1.4-4";

<IgrColumn pipeArgs={formatOptions} dataType="number"></IgrColumn>

    DateTime、Date and Time (日付と時刻)

    日付部分の外観は、locale の形式または pipeArgs 入力に基づいて設定されます (例: 日、月、年)。Pipe 引数はカスタム日付書式またはタイムゾーンを指定するために使用できます。

    • format - 日付の書式設定のデフォルト値は 'mediumDate' です。その他の利用可能なオプション 'short'、'long'、'shortDate'、'fullDate'、'longTime'、'fullTime' などです。
    • timezone - ユーザーのローカル システム タイムゾーンがデフォルト値です。タイムゾーン オフセットまたは標準の UTC/GMT または米国本土のタイムゾーンの略語も渡すことができます。世界の任意の場所の対応する時間を表示するさまざまなタイムゾーンの例:
    const formatOptions = new IgrColumnPipeArgs();
formatOptions.format = "long";
formatOptions.timezone = "UTC+0";

<IgrColumn pipeArgs={formatOptions} dataType="date"></IgrColumn>

    利用可能なタイムゾーン:

    タイムゾーン 値
    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' },
];

    セルの編集

    列タイプに基づくセル編集に関しては、別のエディターが表示されます。

    • 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>

    Image (画像)

    デフォルトのテンプレートは、デフォルの画像テンプレートへの画像ソースとしてデータからの値を使用しています。デフォルトの画像テンプレートは、画像ファイルの名前を抽出し、アクセシビリティ要件を満たすために画像の alt 属性として設定します。表示されるセル サイズは描画される画像のサイズに合わせて調整されるため、大きな画像も描画され、グリッド行は画像列の画像と同じ大きさになることに注意してください。画像タイプの列では、フィルタリング、ソート、およびグループ化はデフォルトでオフになっています。それらを有効にしたい場合は、データ操作を実行するカスタム ストラテジを提供する必要があります。

    <IgrColumn field="Image" dataType="image"></IgrColumn>

    列に autoGenerate を使用すると、グリッドは最初のデータ レコードの値を分析します。値が文字列型で、画像拡張子 (gif、jpg、jpeg、tiff、png、webp、bmp) で終わる URL のパターンと一致する場合、列は自動的に dataType === GridColumnDataType.Image としてマークされ、デフォルトの画像テンプレートが描画されます。

    Currency (通貨)

    デフォルトのテンプレート

    デフォルトのテンプレートには、接頭辞または接尾辞が付いた通貨記号を含む数値を表示します。

    const formatOptions = new IgrColumnPipeArgs();
formatOptions.digitsInfo = "1.4-4";
formatOptions.display = "symbol-narrow";

<IgrColumn pipeArgs={formatOptions} dataType="currency" field="UnitsInStock"></IgrColumn>
    パラメーター 説明
    digitsInfo 通貨値の 10 進数表現を表します。
    display* 狭義または広義の記号で値を表示します。

    *display - デフォルトの en-US ロケールの場合、USD コードは省略記号 $ または記号 US$ で表すことができます。

    セルの値を編集すると、通貨記号がサフィックスまたはプレフィックスとして表示されます。詳細については、公式のセル編集トピックを参照してください。

    注: 上/下矢印キーを使用する場合、値は digitsInfo - minFractionDigits (小数点以下の最小桁数。デフォルトは 0 です。) に基づいてステップで増減します。

    Percent (パーセント)

    デフォルトのテンプレートは、基になる数値に相当するパーセントを表示します。表示されるセル値は、'100' の表示ファクタで乗算された結果です。たとえば、デフォルトのファクタは 100 で、セルに渡される値は 0.123 であるため、表示されるセル値は 12.3% になります。

    セル編集の場合、値はデータ ソース値と同じになります。表示ファクタは '1' です。セルを編集すると、パーセント値のプレビューがサフィックス要素として表示されます。たとえば、'0.0547' の編集中にプレビュー要素に '5.47%' が表示されます。

    /**
* Decimal representation options, specified by a string in the following format:
* `{minIntegerDigits}`.`{minFractionDigits}`-`{maxFractionDigits}`.
* `minIntegerDigits`: The minimum number of integer digits before the decimal point. Default is 1.
* `minFractionDigits`: The minimum number of digits after the decimal point. Default is 0.
* `maxFractionDigits`: The maximum number of digits after the decimal point. Default is 3.
*/
const formatOptions = new IgrColumnPipeArgs();
formatOptions.digitsInfo = "2.2-3";

<IgrColumn pipeArgs={formatOptions} dataType="percent"></IgrColumn>

    [!Note] 上/下矢印キーを使用する場合、値は digitsInfo - minFractionDigits (小数点以下の最小桁数。デフォルトは 0 です。) に基づいてステップで増減します。

    デフォルトの編集テンプレート

    Grid 編集トピックの編集テンプレート部分を参照してください。

    カスタム編集テンプレートとフォーマッタ

    カスタム テンプレートと列フォーマッタの定義は、列データ型セットより常に優先されます。

    カスタム テンプレート

    function editCellTemplate(ctx: { dataContext: IgrCellTemplateContext }) {
    return (
        <>
            <input></input>
        </>
    );
}

<IgrGrid autoGenerate="false">
    <IgrColumn inlineEditorTemplate={editCellTemplate}></IgrColumn>
</IgrGrid>

    列の書式設定

    function formatCurrency(value: number) {
    return `$ ${value.toFixed(0)}`;
}

<IgrGrid autoGenerate="false">
    <IgrColumn formatter={formatCurrency} field="UnitsInStock"></IgrColumn>
</IgrGrid>

    API リファレンス

    その他のリソース

    カスタム テンプレートについては、セル編集トピックを参照してください。