データテーブル

DataTableはデータを表形式で表示します。

インポート#


import { DataTable } from 'primereact/datatable';
import { Column } from 'primereact/column';
         

基本#

DataTableは、表示するデータとして値と、表現のための列コンポーネントを子として必要とします。


<DataTable value={products} tableStyle={{ minWidth: '50rem' }}>
    <Column field="code" header="Code"></Column>
    <Column field="name" header="Name"></Column>
    <Column field="category" header="Category"></Column>
    <Column field="quantity" header="Quantity"></Column>
</DataTable>
         

動的列#

列はプログラムで作成できます。


<DataTable value={products} tableStyle={{ minWidth: '50rem' }}>
    {columns.map((col, i) => (
        <Column key={col.field} field={col.field} header={col.header} />
    ))}
</DataTable>
         

テンプレート#

ヘッダー、本文、フッターセクションのカスタムコンテンツは、テンプレートによってサポートされています。


<DataTable value={products} header={header} footer={footer} tableStyle={{ minWidth: '60rem' }}>
    <Column field="name" header="Name"></Column>
    <Column header="Image" body={imageBodyTemplate}></Column>
    <Column field="price" header="Price" body={priceBodyTemplate}></Column>
    <Column field="category" header="Category"></Column>
    <Column field="rating" header="Reviews" body={ratingBodyTemplate}></Column>
    <Column header="Status" body={statusBodyTemplate}></Column>
</DataTable>
         

サイズ#

通常のテーブルに加えて、代替サイズを持つテーブルも利用可能です。


<SelectButton value={size} onChange={(e) => setSize(e.value)} options={sizeOptions} />
<DataTable value={products} size={size} tableStyle={{ minWidth: '50rem' }}>
    <Column field="code" header="Code"></Column>
    <Column field="name" header="Name"></Column>
    <Column field="category" header="Category"></Column>
    <Column field="quantity" header="Quantity"></Column>
</DataTable>
         

グリッド線#

showGridlinesを有効にすると、セル間に境界線が表示されます。


<DataTable value={products} showGridlines tableStyle={{ minWidth: '50rem' }}>
    <Column field="code" header="Code"></Column>
    <Column field="name" header="Name"></Column>
    <Column field="category" header="Category"></Column>
    <Column field="quantity" header="Quantity"></Column>
</DataTable>
         

ストライプ行#

stripedRowsプロパティが存在する場合、交互の行が表示されます。


<DataTable value={products} stripedRows tableStyle={{ minWidth: '50rem' }}>
    <Column field="code" header="Code"></Column>
    <Column field="name" header="Name"></Column>
    <Column field="category" header="Category"></Column>
    <Column field="quantity" header="Quantity"></Column>
</DataTable>
         

ページネーター#

基本#

ページネーションは、paginatorプロパティを追加し、ページごとの行数を定義することで有効になります。


<DataTable value={customers} paginator rows={5} rowsPerPageOptions={[5, 10, 25, 50]} tableStyle={{ minWidth: '50rem' }}>
    <Column field="name" header="Name" style={{ width: '25%' }}></Column>
    <Column field="country.name" header="Country" style={{ width: '25%' }}></Column>
    <Column field="company" header="Company" style={{ width: '25%' }}></Column>
    <Column field="representative.name" header="Representative" style={{ width: '25%' }}></Column>
</DataTable>
         

テンプレート#

ページネーターUIは、paginatorTemplateプロパティを使用してカスタマイズされます。各要素は、デフォルトのUIを置き換える独自のUIでさらにカスタマイズすることもできます。詳細なカスタマイズオプションについては、ページネーターコンポーネントを参照してください。


<DataTable value={customers} paginator rows={5} rowsPerPageOptions={[5, 10, 25, 50]} tableStyle={{ minWidth: '50rem' }}
        paginatorTemplate="RowsPerPageDropdown FirstPageLink PrevPageLink CurrentPageReport NextPageLink LastPageLink"
        currentPageReportTemplate="{first} to {last} of {totalRecords}" paginatorLeft={paginatorLeft} paginatorRight={paginatorRight}>
    <Column field="name" header="Name" style={{ width: '25%' }}></Column>
    <Column field="country.name" header="Country" style={{ width: '25%' }}></Column>
    <Column field="company" header="Company" style={{ width: '25%' }}></Column>
    <Column field="representative.name" header="Representative" style={{ width: '25%' }}></Column>
</DataTable>
         

ソート#

単一列#

列のソートは、sortableプロパティを追加することで有効になります。


<DataTable value={products} tableStyle={{ minWidth: '50rem' }}>
    <Column field="code" header="Code" sortable style={{ width: '25%' }}></Column>
    <Column field="name" header="Name" sortable style={{ width: '25%' }}></Column>
    <Column field="category" header="Category" sortable style={{ width: '25%' }}></Column>
    <Column field="quantity" header="Quantity" sortable style={{ width: '25%' }}></Column>
</DataTable>
         

複数列#

sortModeをmultipleとして定義することで、複数の列をソートできます。このモードでは、ヘッダーをクリックするときにmetaKey（例：⌘）を押す必要があります。


<DataTable value={products} sortMode="multiple" tableStyle={{ minWidth: '50rem' }}>
    <Column field="code" header="Code" sortable style={{ width: '25%' }}></Column>
    <Column field="name" header="Name" sortable style={{ width: '25%' }}></Column>
    <Column field="category" header="Category" sortable style={{ width: '25%' }}></Column>
    <Column field="quantity" header="Quantity" sortable style={{ width: '25%' }}></Column>
</DataTable>
         

事前ソート#

デフォルトのsortFieldとsortOrderを定義すると、データは初期状態で単一列ソートでソートされて表示されます。multipleソートモードでは、代わりにDataTableSortMetaオブジェクトの配列を提供することにより、multiSortMetaを使用する必要があります。


<DataTable value={products} sortField="price" sortOrder={-1} tableStyle={{ minWidth: '50rem' }}>
    <Column field="code" header="Code" sortable style={{ width: '20%' }}></Column>
    <Column field="name" header="Name" sortable style={{ width: '20%' }}></Column>
    <Column field="price" header="Price" body={priceBodyTemplate} sortable style={{ width: '20%' }}></Column>
    <Column field="category" header="Category" sortable style={{ width: '20%' }}></Column>
    <Column field="quantity" header="Quantity" sortable style={{ width: '20%' }}></Column>
</DataTable>
         

削除可能#

removableSortが存在する場合、3回目のクリックで列からソートが削除されます。


<DataTable value={products} removableSort tableStyle={{ minWidth: '50rem' }}>
    <Column field="code" header="Code" sortable style={{ width: '25%' }}></Column>
    <Column field="name" header="Name" sortable style={{ width: '25%' }}></Column>
    <Column field="category" header="Category" sortable style={{ width: '25%' }}></Column>
    <Column field="quantity" header="Quantity" sortable style={{ width: '25%' }}></Column>
</DataTable>
         

フィルター#

基本#

データフィルタリングは、DataTableFilterMetaインスタンスを参照するfiltersプロパティを定義することで有効になります。フィルタリングする各列にも、filterを有効にする必要があります。組み込みのフィルター要素は入力フィールドであり、filterElementを使用すると、独自のUIでフィルタリングをカスタマイズできます。filterDisplayがrowとして定義されている場合、フィルター要素は別の行に表示されます。

オプションのグローバルフィルタリングは、filtersオブジェクトのglobalキーにバインドされている単一の値に対してデータを検索します。検索対象のフィールドは、globalFilterFieldsで定義されます。


<DataTable value={customers} paginator rows={10} dataKey="id" filters={filters} filterDisplay="row" loading={loading}
        globalFilterFields={['name', 'country.name', 'representative.name', 'status']} header={header} emptyMessage="No customers found.">
    <Column field="name" header="Name" filter filterPlaceholder="Search by name" style={{ minWidth: '12rem' }} />
    <Column header="Country" filterField="country.name" style={{ minWidth: '12rem' }} body={countryBodyTemplate} filter filterPlaceholder="Search by country" />
    <Column header="Agent" filterField="representative" showFilterMenu={false} filterMenuStyle={{ width: '14rem' }} style={{ minWidth: '14rem' }}
        body={representativeBodyTemplate} filter filterElement={representativeRowFilterTemplate} />
    <Column field="status" header="Status" showFilterMenu={false} filterMenuStyle={{ width: '14rem' }} style={{ minWidth: '12rem' }} body={statusBodyTemplate} filter filterElement={statusRowFilterTemplate} />
    <Column field="verified" header="Verified" dataType="boolean" style={{ minWidth: '6rem' }} body={verifiedBodyTemplate} filter filterElement={verifiedRowFilterTemplate} />
</DataTable>
         

詳細#

filterDisplayがmenuに設定されている場合、フィルタリングは複数の制約と高度なテンプレートをサポートするポップアップを介して行われます。


<DataTable value={customers} paginator showGridlines rows={10} loading={loading} dataKey="id" 
        filters={filters} globalFilterFields={['name', 'country.name', 'representative.name', 'balance', 'status']} header={header}
        emptyMessage="No customers found." onFilter={(e) => setFilters(e.filters)}>
    <Column field="name" header="Name" filter filterPlaceholder="Search by name" style={{ minWidth: '12rem' }} />
    <Column header="Country" filterField="country.name" style={{ minWidth: '12rem' }} body={countryBodyTemplate}
        filter filterPlaceholder="Search by country" filterClear={filterClearTemplate} 
        filterApply={filterApplyTemplate} filterFooter={filterFooterTemplate} />
    <Column header="Agent" filterField="representative" showFilterMatchModes={false} filterMenuStyle={{ width: '14rem' }} style={{ minWidth: '14rem' }}
        body={representativeBodyTemplate} filter filterElement={representativeFilterTemplate} />
    <Column header="Date" filterField="date" dataType="date" style={{ minWidth: '10rem' }} body={dateBodyTemplate} filter filterElement={dateFilterTemplate} />
    <Column header="Balance" filterField="balance" dataType="numeric" style={{ minWidth: '10rem' }} body={balanceBodyTemplate} filter filterElement={balanceFilterTemplate} />
    <Column field="status" header="Status" filterMenuStyle={{ width: '14rem' }} style={{ minWidth: '12rem' }} body={statusBodyTemplate} filter filterElement={statusFilterTemplate} />
    <Column field="activity" header="Activity" showFilterMatchModes={false} style={{ minWidth: '12rem' }} body={activityBodyTemplate} filter filterElement={activityFilterTemplate} />
    <Column field="verified" header="Verified" dataType="boolean" bodyClassName="text-center" style={{ minWidth: '8rem' }} body={verifiedBodyTemplate} filter filterElement={verifiedFilterTemplate} />
</DataTable>
         

カスタム#

カスタムフィルタリングは、FilterService.registerを使用してフィルター関数を定義することで有効になります。ここで、rule引数は"custom_[field]"でなければなりません。この例の「アクティビティ」フィールドでは、2つの値の範囲によるカスタムフィルタリングが可能です。


// The rule argument should be a string in the format "custom_[field]".
FilterService.register('custom_activity', (value, filters) => {
  const [from, to] = filters ?? [null, null];
  if (from === null && to === null) return true;
  if (from !== null && to === null) return from <= value;
  if (from === null && to !== null) return value <= to;
  return from <= value && value <= to;
});

<DataTable value={customers} paginator rows={10} dataKey="id" filters={filters} filterDisplay="row" loading={loading}
        globalFilterFields={['name', 'country.name', 'representative.name', 'status']} header={header} emptyMessage="No customers found.">
    <Column field="name" header="Name" filter filterPlaceholder="Search by name" style={{ minWidth: '12rem' }} />
    <Column header="Country" filterField="country.name" style={{ minWidth: '12rem' }} body={countryBodyTemplate} filter filterPlaceholder="Search by country" />
    <Column header="Agent" filterField="representative" showFilterMenu={false} filterMenuStyle={{ width: '14rem' }} style={{ minWidth: '14rem' }}
        body={representativeBodyTemplate} filter filterElement={representativeRowFilterTemplate} />
    <Column header="Activity(Custom Filter)" field="activity" showFilterMenu={false} showClearButton={false} style={{ minWidth: '14rem' }} filter filterElement={activityRowFilterTemplate} />
    <Column field="status" header="Status" showFilterMenu={false} filterMenuStyle={{ width: '14rem' }} style={{ minWidth: '12rem' }} body={statusBodyTemplate} filter filterElement={statusRowFilterTemplate} />
    <Column field="verified" header="Verified" dataType="boolean" style={{ minWidth: '6rem' }} body={verifiedBodyTemplate} filter filterElement={verifiedRowFilterTemplate} />
</DataTable>
         

行選択#

単一#

単一行選択は、selectionModeをsingleとして定義し、selectionおよびonSelectionChangeプロパティを使用して値バインディングを行うことで有効になります。使用可能な場合は、パフォーマンスを最適化するために、dataKeyで行の一意の識別子を提供することをお勧めします。

デフォルトでは、行の選択を解除するにはmetaKey（例：⌘）を押す必要がありますが、これはmetaKeySelectionプロパティを無効にすることで設定できます。タッチ対応デバイスでは、このオプションは無効で、動作はfalseに設定するのと同じです。


<InputSwitch checked={metaKey} onChange={(e) => setMetaKey(e.value)} />

<DataTable value={products} selectionMode="single" selection={selectedProduct}
        onSelectionChange={(e) => setSelectedProduct(e.value)} dataKey="id" metaKeySelection={metaKey} tableStyle={{ minWidth: '50rem' }}>
    <Column field="code" header="Code"></Column>
    <Column field="name" header="Name"></Column>
    <Column field="category" header="Category"></Column>
    <Column field="quantity" header="Quantity"></Column>
</DataTable>
         

複数#

selectionModeをmultipleに設定することで、複数の行を選択できます。複数選択モードでは、デフォルトでmetaKey（例：⌘）を押して既存の選択に追加する必要がありますが、これはmetaKeySelectionプロパティを無効にすることで設定できます。タッチ対応デバイスでは、DataTableは常にmetaKeyを無視することに注意してください。

さらに、dragSelectionが存在する場合、ドラッグを使用して複数の行を選択できます。


<InputSwitch checked={metaKey} onChange={(e) => setMetaKey(e.value)} />

<DataTable value={products} selectionMode="multiple" selection={selectedProducts} onSelectionChange={(e) => setSelectedProducts(e.value)}
        dataKey="id" metaKeySelection={metaKey} dragSelection tableStyle={{ minWidth: '50rem' }}>
    <Column field="code" header="Code"></Column>
    <Column field="name" header="Name"></Column>
    <Column field="category" header="Category"></Column>
    <Column field="quantity" header="Quantity"></Column>
</DataTable>
         

ラジオボタン#

列でselectionModeをsingleとして指定すると、選択のためにその列内にラジオボタンが表示されます。デフォルトでは、行クリックも選択をトリガーしますが、ラジオボタンを使用してのみ選択をトリガーするには、DataTableのselectionModeをradiobuttonに設定します。


<InputSwitch checked={rowClick} onChange={(e) => setRowClick(e.value)} />

<DataTable value={products} selectionMode={rowClick ? null : 'radiobutton'} selection={selectedProduct} onSelectionChange={(e) => setSelectedProduct(e.value)} dataKey="id" tableStyle={{ minWidth: '50rem' }}>
    <Column selectionMode="single" headerStyle={{ width: '3rem' }}></Column>
    <Column field="code" header="Code"></Column>
    <Column field="name" header="Name"></Column>
    <Column field="category" header="Category"></Column>
    <Column field="quantity" header="Quantity"></Column>
</DataTable>
         

チェックボックス#

列でselectionModeをmultipleとして指定すると、選択のためにその列内にチェックボックスが表示されます。デフォルトでは、行クリックも選択をトリガーしますが、チェックボックスを使用してのみ選択をトリガーするには、DataTableのselectionModeをcheckboxに設定します。

ヘッダーチェックボックスは、デフォルトでデータセット全体の選択状態を切り替えます。ページネーターが有効になっている場合は、表示されている行の選択のみを制御するためにselectionPageOnlyを追加できます。


<InputSwitch checked={rowClick} onChange={(e) => setRowClick(e.value)} />

<DataTable value={products} selectionMode={rowClick ? null : 'checkbox'} selection={selectedProducts} onSelectionChange={(e) => setSelectedProducts(e.value)} dataKey="id" tableStyle={{ minWidth: '50rem' }}>
    <Column selectionMode="multiple" headerStyle={{ width: '3rem' }}></Column>
    <Column field="code" header="Code"></Column>
    <Column field="name" header="Name"></Column>
    <Column field="category" header="Category"></Column>
    <Column field="quantity" header="Quantity"></Column>
</DataTable>
         

イベント#

DataTableは、選択イベントをリッスンするためにonRowSelectおよびonRowUnselectイベントを提供します。


<DataTable value={products} selectionMode="single" selection={selectedProduct} onSelectionChange={(e) => setSelectedProduct(e.value)} dataKey="id"
        onRowSelect={onRowSelect} onRowUnselect={onRowUnselect} metaKeySelection={false} tableStyle={{ minWidth: '50rem' }}>
    <Column field="code" header="Code"></Column>
    <Column field="name" header="Name"></Column>
    <Column field="category" header="Category"></Column>
    <Column field="quantity" header="Quantity"></Column>
</DataTable>
         

無効#

isDataSelectableがfalseを返す場合、特定の行を選択から除外できます。


<DataTable value={products} selectionMode="single" selection={selectedProduct} onSelectionChange={(e) => setSelectedProduct(e.value)} dataKey="id"
        isDataSelectable={isRowSelectable} rowClassName={rowClassName} tableStyle={{ minWidth: '50rem' }}>
    <Column field="code" header="Code"></Column>
    <Column field="name" header="Name"></Column>
    <Column field="category" header="Category"></Column>
    <Column field="quantity" header="Quantity"></Column>
</DataTable>
         

セル選択#

単一#

単一セル選択は、cellSelectionを追加し、selectionModeをsingleとして定義し、selectionおよびonSelectionChangeプロパティを使用して値バインディングを行うことで有効になります。選択のタイプは、cellIndexやrowIndexなどのセルに関する情報を提供するDataTableCellSelectionになります。

デフォルトでは、セルの選択を解除するにはmetaKey（例：⌘）を押す必要がありますが、これはmetaKeySelectionプロパティを無効にすることで設定できます。タッチ対応デバイスでは、このオプションは無効で、動作はfalseに設定するのと同じです。


<InputSwitch checked={metaKey} onChange={(e) => setMetaKey(e.value)} />

<DataTable value={products} cellSelection selectionMode="single" selection={selectedCell}
        onSelectionChange={(e) => setSelectedCell(e.value)} metaKeySelection={metaKey} tableStyle={{ minWidth: '50rem' }}>
    <Column field="code" header="Code"></Column>
    <Column field="name" header="Name"></Column>
    <Column field="category" header="Category"></Column>
    <Column field="quantity" header="Quantity"></Column>
</DataTable>
         

複数#

selectionModeをmultipleに設定することで、複数のセルを選択できます。複数選択モードでは、デフォルトでmetaKey（例：⌘）を押して既存の選択に追加する必要がありますが、これはmetaKeySelectionプロパティを無効にすることで設定できます。タッチ対応デバイスでは、DataTableは常にmetaKeyを無視することに注意してください。

さらに、dragSelectionが存在する場合、ドラッグを使用して複数のセルを選択できます。


<InputSwitch checked={metaKey} onChange={(e) => setMetaKey(e.value)} />

<DataTable value={products} cellSelection selectionMode="multiple" selection={selectedCells}
        onSelectionChange={(e) => setSelectedCells(e.value)}
        metaKeySelection={metaKey} dragSelection tableStyle={{ minWidth: '50rem' }}>
    <Column field="code" header="Code"></Column>
    <Column field="name" header="Name"></Column>
    <Column field="category" header="Category"></Column>
    <Column field="quantity" header="Quantity"></Column>
</DataTable>
         

イベント#

DataTableは、選択イベントをリッスンするためにonCellSelectおよびonCellUnselectイベントを提供します。


<Toast ref={toast} />

<DataTable value={products} cellSelection selectionMode="single" selection={selectedCell}
        onSelectionChange={(e) => setSelectedCell(e.value)} metaKeySelection={false}
        onCellSelect={onCellSelect} onCellUnselect={onCellUnselect} tableStyle={{ minWidth: '50rem' }}>
    <Column field="code" header="Code"></Column>
    <Column field="name" header="Name"></Column>
    <Column field="category" header="Category"></Column>
    <Column field="quantity" header="Quantity"></Column>
</DataTable>
         

無効#

isDataSelectableがfalseを返す場合、特定のセルを選択から除外できます。


<InputSwitch checked={metaKey} onChange={(e) => setMetaKey(e.value)} />

<DataTable value={products} cellSelection selectionMode="single" selection={selectedCell}
        onSelectionChange={(e) => setSelectedCell(e.value)} metaKeySelection={metaKey}
        isDataSelectable={isCellSelectable} cellClassName={cellClassName} tableStyle={{ minWidth: '50rem' }}>
    <Column field="code" header="Code"></Column>
    <Column field="name" header="Name"></Column>
    <Column field="category" header="Category"></Column>
    <Column field="quantity" header="Quantity"></Column>
</DataTable>
         

行展開#

行展開は、expandedRowsおよびonRowToggleプロパティで制御されます。エキスパンダー要素を持つ列では、expanderプロパティを有効にする必要があります。オプションのonRowExpandおよびonRowCollapseイベントはコールバックとして使用できます。

展開された行は、行データの配列にするか、dataKey が存在する場合は、キーが行データの識別子を参照する文字列で、値が展開状態を表すブール値であるオブジェクトにすることができます。例： {'1004': true}。 dataKey を使用する方法は大規模なデータの場合、パフォーマンスが向上します。


<DataTable value={products} expandedRows={expandedRows} onRowToggle={(e) => setExpandedRows(e.data)}
        onRowExpand={onRowExpand} onRowCollapse={onRowCollapse} rowExpansionTemplate={rowExpansionTemplate}
        dataKey="id" header={header} tableStyle={{ minWidth: '60rem' }}>
    <Column expander={allowExpansion} style={{ width: '5rem' }} />
    <Column field="name" header="Name" sortable />
    <Column header="Image" body={imageBodyTemplate} />
    <Column field="price" header="Price" sortable body={priceBodyTemplate} />
    <Column field="category" header="Category" sortable />
    <Column field="rating" header="Reviews" sortable body={ratingBodyTemplate} />
    <Column field="inventoryStatus" header="Status" sortable body={statusBodyTemplate} />
</DataTable>
         

編集#

セル#

セル編集は、editMode を cell に設定し、Column の editor プロパティで入力要素を定義し、onCellEditComplete を実装して状態を更新することで有効になります。


<DataTable value={products} editMode="cell" tableStyle={{ minWidth: '50rem' }}>
    {columns.map(({ field, header }) => {
        return <Column key={field} field={field} header={header}
            style={{ width: '25%' }} body={field === 'price' && priceBodyTemplate}
            editor={(options) => cellEditor(options)} onCellEditComplete={onCellEditComplete} />;
    })}
</DataTable>
         

行#

行編集は、editMode を row に設定することで構成されます。セル編集モードと同様に、Column の editor プロパティで入力要素を定義し、onRowEditComplete を実装して状態を更新する必要があります。編集状態を制御する列には、rowEditor プロパティを適用する必要があります。


<DataTable value={products} editMode="row" dataKey="id" onRowEditComplete={onRowEditComplete} tableStyle={{ minWidth: '50rem' }}>
    <Column field="code" header="Code" editor={(options) => textEditor(options)} style={{ width: '20%' }}></Column>
    <Column field="name" header="Name" editor={(options) => textEditor(options)} style={{ width: '20%' }}></Column>
    <Column field="inventoryStatus" header="Status" body={statusBodyTemplate} editor={(options) => statusEditor(options)} style={{ width: '20%' }}></Column>
    <Column field="price" header="Price" body={priceBodyTemplate} editor={(options) => priceEditor(options)} style={{ width: '20%' }}></Column>
    <Column rowEditor={allowEdit} headerStyle={{ width: '10%', minWidth: '8rem' }} bodyStyle={{ textAlign: 'center' }}></Column>
</DataTable>
         

遅延読み込み#

遅延モードは、大規模なデータセットを扱うのに便利です。データ全体を読み込む代わりに、ページング、ソート、フィルタリングが発生するたびに、対応するコールバックを呼び出すことで、少量のデータが読み込まれます。以下のサンプルは、メモリ内のリストとタイムアウトを使用してリモートデータソースからの遅延読み込みデータを模倣し、ネットワーク接続を模倣しています。

lazy プロパティを有効にし、論理的な行数をプロジェクションクエリを実行して totalRecords に割り当てることが実装の重要な要素です。これにより、ページネータは、実際にはページ上に存在しない totalRecords サイズのレコードが実際にあると想定して UI を表示します。現在のページに表示されているレコードのみが存在します。

DataTable はデータセット全体を認識できないため、遅延モードでの チェックボックス選択 の実装はこの例のように手動で処理する必要があることに注意してください。

名前（ソートアイコンSVG）
国（ソートアイコンSVG）
会社（ソートアイコンSVG）
担当者
利用可能なオプションがありません

<DataTable value={customers} lazy filterDisplay="row" dataKey="id" paginator
        first={lazyState.first} rows={10} totalRecords={totalRecords} onPage={onPage}
        onSort={onSort} sortField={lazyState.sortField} sortOrder={lazyState.sortOrder}
        onFilter={onFilter} filters={lazyState.filters} loading={loading} tableStyle={{ minWidth: '75rem' }}
        selection={selectedCustomers} onSelectionChange={onSelectionChange} selectAll={selectAll} onSelectAllChange={onSelectAllChange}>
    <Column selectionMode="multiple" headerStyle={{ width: '3rem' }} />
    <Column field="name" header="Name" sortable filter filterPlaceholder="Search" />
    <Column field="country.name" sortable header="Country" filterField="country.name" body={countryBodyTemplate} filter filterPlaceholder="Search" />
    <Column field="company" sortable filter header="Company" filterPlaceholder="Search" />
    <Column field="representative.name" header="Representative" body={representativeBodyTemplate} filter filterPlaceholder="Search" />
</DataTable>
         

スクロール#

垂直スクロール#

データビューポートに scrollHeight を指定して scrollable プロパティを追加すると、ヘッダーが固定された垂直スクロールが有効になります。


<DataTable value={customers} scrollable scrollHeight="400px" style={{ minWidth: '50rem' }}>
    <Column field="name" header="Name"></Column>
    <Column field="country.name" header="Country"></Column>
    <Column field="representative.name" header="Representative"></Column>
    <Column field="company" header="Company"></Column>
</DataTable>
         

フレックススクロール#

フレックススクロール機能は、スクロール可能なビューポートセクションを固定値ではなく動的にすることで、テーブルの親サイズに合わせて拡大または縮小できるようにします。以下のボタンをクリックすると、データビューポートがサイズ変更に合わせて調整される、最大化可能なダイアログが表示されます。


<Button label="Show" icon="pi pi-external-link" onClick={() => setDialogVisible(true)} />
<Dialog header="Flex Scroll" visible={dialogVisible} style={{ width: '75vw' }} maximizable
        modal contentStyle={{ height: '300px' }} onHide={() => setDialogVisible(false)} footer={dialogFooterTemplate}>
    <DataTable value={customers} scrollable scrollHeight="flex" tableStyle={{ minWidth: '50rem' }}>
        <Column field="name" header="Name"></Column>
        <Column field="country.name" header="Country"></Column>
        <Column field="representative.name" header="Representative"></Column>
        <Column field="company" header="Company"></Column>
    </DataTable>
</Dialog>
         

水平スクロール#

テーブルの幅が親の幅を超えると、水平スクロールバーが表示されます。


<DataTable value={customers} scrollable scrollHeight="400px">
    <Column field="id" header="Id" footer="Id" style={{ minWidth: '100px' }}></Column>
    <Column field="name" header="Name" footer="Name" style={{ minWidth: '200px' }}></Column>
    <Column field="country.name" header="Country" footer="Country" style={{ minWidth: '200px' }}></Column>
    <Column field="date" header="Date" footer="Date" style={{ minWidth: '200px' }}></Column>
    <Column field="balance" header="Balance" footer="Balance" body={balanceTemplate} style={{ minWidth: '200px' }}></Column>
    <Column field="company" header="Company" footer="Company" style={{ minWidth: '200px' }}></Column>
    <Column field="status" header="Status" footer="Status" style={{ minWidth: '200px' }}></Column>
    <Column field="activity" header="Activity" footer="Activity" style={{ minWidth: '200px' }}></Column>
    <Column field="representative.name" header="Representative" footer="Representative" style={{ minWidth: '200px' }}></Column>
</DataTable>
         

固定行#

frozenValue プロパティを有効にすることで、スクロール中に 行を固定できます。


<DataTable value={customers} frozenValue={lockedCustomers} scrollable scrollHeight="400px" tableStyle={{ minWidth: '50rem' }}>
    <Column field="name" header="Name"></Column>
    <Column field="country.name" header="Country"></Column>
    <Column field="representative.name" header="Representative"></Column>
    <Column field="status" header="Status"></Column>
    <Column style={{ flex: '0 0 4rem' }} body={lockTemplate}></Column>
</DataTable>
         

固定列#

frozen プロパティを有効にすることで、水平スクロール中に列を固定できます。位置は alignFrozen で定義され、left または right を指定できます。


<ToggleButton checked={balanceFrozen} onChange={(e) => setBalanceFrozen(e.value)}
    onIcon="pi pi-lock" offIcon="pi pi-lock-open" onLabel="Balance" offLabel="Balance" />
<DataTable value={customers} scrollable scrollHeight="400px" className="mt-4">
    <Column field="name" header="Name" style={{ minWidth: '200px' }} frozen className="font-bold"></Column>
    <Column field="id" header="Id" style={{ minWidth: '100px' }}></Column>
    <Column field="name" header="Name" style={{ minWidth: '200px' }}></Column>
    <Column field="country.name" header="Country" style={{ minWidth: '200px' }}></Column>
    <Column field="date" header="Date" style={{ minWidth: '200px' }}></Column>
    <Column field="company" header="Company" style={{ minWidth: '200px' }}></Column>
    <Column field="status" header="Status" style={{ minWidth: '200px' }}></Column>
    <Column field="activity" header="Activity" style={{ minWidth: '200px' }}></Column>
    <Column field="representative.name" header="Representative" style={{ minWidth: '200px' }}></Column>
    <Column field="balance" header="Balance" body={balanceTemplate} style={{ minWidth: '200px' }} alignFrozen="right" frozen={balanceFrozen}></Column>
</DataTable>
         

仮想スクロール#

プリロード#

仮想スクロールは、大量のデータをレンダリングする効率的な方法です。使用方法は通常のスクロールに似ていますが、固定の itemSize を定義する virtualScrollerOptions プロパティが追加されています。内部的には、 VirtualScroller コンポーネントが利用されているため、利用可能なオプションの詳細については、VirtualScroller の API を参照してください。

この例では、100000 件のプリロードされたレコードがテーブルによってレンダリングされます。


<DataTable value={cars} scrollable scrollHeight="400px" virtualScrollerOptions={{ itemSize: 46 }} tableStyle={{ minWidth: '50rem' }}>
    <Column field="id" header="Id" style={{ width: '20%' }}></Column>
    <Column field="vin" header="Vin" style={{ width: '20%' }}></Column>
    <Column field="year" header="Year" style={{ width: '20%' }}></Column>
    <Column field="brand" header="Brand" style={{ width: '20%' }}></Column>
    <Column field="color" header="Color" style={{ width: '20%' }}></Column>
</DataTable>
         

遅延#

virtualScrollerOptions によって遅延読み込みが有効になっている場合、データはプリロードではなくスクロール中にオンデマンドでフェッチされます。

以下のサンプルでは、メモリ内のリストとタイムアウトを使用して、リモートデータソースからのフェッチを模倣しています。 virtualCars は、スクロール時にデータが設定される空の配列です。


<DataTable value={virtualCars} scrollable scrollHeight="400px"
    virtualScrollerOptions={{ lazy: true, onLazyLoad: loadCarsLazy, itemSize: 46, delay: 200, showLoader: true, loading: lazyLoading, loadingTemplate }}
    tableStyle={{ minWidth: '50rem' }}>
    <Column field="id" header="Id" style={{ width: '20%' }}></Column>
    <Column field="vin" header="Vin" style={{ width: '20%' }}></Column>
    <Column field="year" header="Year" style={{ width: '20%' }}></Column>
    <Column field="brand" header="Brand" style={{ width: '20%' }}></Column>
    <Column field="color" header="Color" style={{ width: '20%' }}></Column>
</DataTable>
         

列グループ#

列は Row コンポーネント内でグループ化でき、グループは headerColumnGroup、footerColumnGroup プロパティを使用してヘッダーとフッターに表示できます。スパンするセルと行の数は、 Column の colSpan および rowSpan プロパティで定義されます。


<DataTable value={sales} headerColumnGroup={headerGroup} footerColumnGroup={footerGroup} tableStyle={{ minWidth: '50rem' }}>
    <Column field="product" />
    <Column field="lastYearSale" body={lastYearSaleBodyTemplate} />
    <Column field="thisYearSale" body={thisYearSaleBodyTemplate} />
    <Column field="lastYearProfit" body={lastYearProfitBodyTemplate} />
    <Column field="thisYearProfit" body={thisYearProfitBodyTemplate} />
</DataTable>
         

行グループ#

サブヘッダー#

行は groupRowsBy プロパティでグループ化されます。 rowGroupMode が subheader に設定されている場合、各グループにヘッダーとフッターを表示できます。グループヘッダーのコンテンツは、 rowGroupHeaderTemplate で提供され、フッターは rowGroupFooterTemplate で提供されます。


<DataTable value={customers} rowGroupMode="subheader" groupRowsBy="representative.name" sortMode="single" sortField="representative.name"
        sortOrder={1} scrollable scrollHeight="400px" rowGroupHeaderTemplate={headerTemplate} rowGroupFooterTemplate={footerTemplate} tableStyle={{ minWidth: '50rem' }}>
    <Column field="name" header="Name" style={{ minWidth: '200px' }}></Column>
    <Column field="country" header="Country" body={countryBodyTemplate} style={{ minWidth: '200px' }}></Column>
    <Column field="company" header="Company" style={{ minWidth: '200px' }}></Column>
    <Column field="status" header="Status" body={statusBodyTemplate} style={{ minWidth: '200px' }}></Column>
    <Column field="date" header="Date" style={{ minWidth: '200px' }}></Column>
</DataTable>
         

展開可能#

サブヘッダーベースの行グループ化に expandableRowGroups が存在する場合、グループを展開および折りたたむことができます。展開の状態は、expandedRows および onRowToggle プロパティを使用して制御されます。


<DataTable value={customers} rowGroupMode="subheader" groupRowsBy="representative.name"
    sortMode="single" sortField="representative.name" sortOrder={1}
    expandableRowGroups expandedRows={expandedRows} onRowToggle={(e) => setExpandedRows(e.data)}
    rowGroupHeaderTemplate={headerTemplate} rowGroupFooterTemplate={footerTemplate} tableStyle={{ minWidth: '50rem' }}>
    <Column field="name" header="Name" style={{ width: '20%' }}></Column>
    <Column field="country" header="Country" body={countryBodyTemplate} style={{ width: '20%' }}></Column>
    <Column field="company" header="Company" style={{ width: '20%' }}></Column>
    <Column field="status" header="Status" body={statusBodyTemplate} style={{ width: '20%' }}></Column>
    <Column field="date" header="Date" style={{ width: '20%' }}></Column>
</DataTable>
         

RowSpan#

rowGroupMode が rowspan に設定されている場合、グループ化列は複数の行にまたがります。


<DataTable value={customers} rowGroupMode="rowspan" groupRowsBy="representative.name"
        sortMode="single" sortField="representative.name" sortOrder={1} tableStyle={{ minWidth: '50rem' }}>
    <Column header="#" headerStyle={{ width: '3rem' }} body={(data, options) => options.rowIndex + 1}></Column>
    <Column field="representative.name" header="Representative" body={representativeBodyTemplate} style={{ minWidth: '200px' }}></Column>
    <Column field="name" header="Name" style={{ minWidth: '200px' }}></Column>
    <Column field="country" header="Country" body={countryBodyTemplate} style={{ minWidth: '150px' }}></Column>
    <Column field="company" header="Company" style={{ minWidth: '200px' }}></Column>
    <Column field="status" header="Status" body={statusBodyTemplate} style={{ minWidth: '100px' }}></Column>
    <Column field="date" header="Date" style={{ minWidth: '100px' }}></Column>
</DataTable>
         

条件付きスタイル#

特定の行とセルは、条件に基づいてスタイルを設定できます。 rowClassName は行データを受け取り、行のスタイルクラスを返しますが、セルは body テンプレートを使用してカスタマイズされます。


<DataTable value={products} rowClassName={rowClass} tableStyle={{ minWidth: '50rem' }}>
    <Column field="code" header="Code"></Column>
    <Column field="name" header="Name"></Column>
    <Column field="category" header="Category"></Column>
    <Column field="quantity" header="Quantity" body={stockBodyTemplate}></Column>
</DataTable>
         

列のサイズ変更#

フィットモード#

resizableColumns が有効になっている場合、列はドラッグアンドドロップでサイズ変更できます。デフォルトのサイズ変更モードは fit で、テーブル全体の幅は変更されません。


<DataTable value={products} resizableColumns showGridlines tableStyle={{ minWidth: '50rem' }}>
    <Column field="code" header="Code"></Column>
    <Column field="name" header="Name"></Column>
    <Column field="category" header="Category"></Column>
    <Column field="quantity" header="Quantity"></Column>
</DataTable>
         

展開モード#

columnResizeMode を expand に設定すると、テーブルの幅も変更されます。


<DataTable value={products} columnResizeMode="expand" resizableColumns showGridlines tableStyle={{ minWidth: '50rem' }}>
    <Column field="code" header="Code"></Column>
    <Column field="name" header="Name"></Column>
    <Column field="category" header="Category"></Column>
    <Column field="quantity" header="Quantity"></Column>
</DataTable>
         

並べ替え#

列と行の順序は、ドラッグアンドドロップを使用して変更できます。列の並べ替えは、reorderableColumns プロパティを追加することで構成されます。

同様に、reorderableRows プロパティを追加すると、行をドラッグできるようになります。ドラッグハンドルには、列に rowReorder プロパティが必要であり、並べ替えの完了後に 行の状態を制御するには、onRowReorder コールバックが必要です。


<DataTable value={products} reorderableColumns reorderableRows onRowReorder={(e) => setProducts(e.value)} tableStyle={{ minWidth: '50rem' }}>
    <Column rowReorder style={{ width: '3rem' }} />
    {dynamicColumns}
</DataTable>
         

列の切り替え#

条件に基づく列の表示/非表示は、動的な列で実装できます。このサンプルでは、MultiSelect を使用して表示される列を管理しています。


<DataTable value={products} header={header} tableStyle={{ minWidth: '50rem' }}>
    <Column field="code" header="Code" />
    {visibleColumns.map((col) => (
        <Column key={col.field} field={col.field} header={col.header} />
    ))}
</DataTable>
         

エクスポート#

CSV エクスポートは組み込み機能です。このサンプルでは、jsPDF や xlsx などのサードパーティライブラリを使用して、PDF と XLS のエクスポートも可能です。


<Button type="button" icon="pi pi-file" rounded onClick={() => exportCSV(false)} data-pr-tooltip="CSV" />
<Button type="button" icon="pi pi-file-excel" severity="success" rounded onClick={exportExcel} data-pr-tooltip="XLS" />
<Button type="button" icon="pi pi-file-pdf" severity="warning" rounded onClick={exportPdf} data-pr-tooltip="PDF" />

<DataTable ref={dt} value={products} header={header} tableStyle={{ minWidth: '50rem' }}>
    {cols.map((col, index) => (
        <Column key={index} field={col.field} header={col.header} />
    ))}
</DataTable>
         

コンテキストメニュー#

DataTable は、右クリックでメニューを開くための onContextMenu イベントと、メニューを介して選択を制御するための contextMenuSelection および onContextMenuSelectionChange プロパティを使用して、ContextMenu と排他的に統合されています。


<Toast ref={toast} />
<ContextMenu model={menuModel} ref={cm} onHide={() => setSelectedProduct(null)} />
<DataTable value={products} onContextMenu={(e) => cm.current.show(e.originalEvent)}
        contextMenuSelection={selectedProduct} onContextMenuSelectionChange={(e) => setSelectedProduct(e.value)} tableStyle={{ minWidth: '50rem' }}>
    <Column field="code" header="Code"></Column>
    <Column field="name" header="Name"></Column>
    <Column field="category" header="Category"></Column>
    <Column field="price" header="Price" body={priceBodyTemplate} />
</DataTable>
         

ステートフル#

ステートフルテーブルを使用すると、ページ、ソート、フィルタリングなどの状態をローカルストレージまたはセッションストレージに保存できるため、ページに再度アクセスしたときに、テーブルは最後の設定を使用してデータをレンダリングします。

テーブルの状態を変更します。たとえば、ページネーション、移動、テーブルへの再アクセスを行ってこの機能をテストします。設定は stateStorage プロパティで session に設定されているため、ブラウザが閉じられるまでテーブルは状態を保持します。もう1つの選択肢は、寿命を延ばすための localStorage を参照する local です。


<DataTable value={customers} paginator rows={5} header={header} filters={filters} onFilter={(e) => setFilters(e.filters)}
        selection={selectedCustomer} onSelectionChange={(e) => setSelectedCustomer(e.value)} selectionMode="single" dataKey="id"
        stateStorage="session" stateKey="dt-state-demo-local" emptyMessage="No customers found." tableStyle={{ minWidth: '50rem' }}>
    <Column field="name" header="Name" sortable filter filterPlaceholder="Search" style={{ width: '25%' }}></Column>
    <Column header="Country" body={countryBodyTemplate} sortable sortField="country.name" filter filterField="country.name" filterPlaceholder="Search" style={{ width: '25%' }}></Column>
    <Column header="Agent" body={representativeBodyTemplate} sortable sortField="representative.name" filter filterField="representative"
        showFilterMatchModes={false} filterElement={representativeFilterTemplate} filterMenuStyle={{ width: '14rem' }} style={{ width: '25%' }} ></Column>
    <Column field="status" header="Status" body={statusBodyTemplate} sortable filter filterElement={statusFilterTemplate} filterMenuStyle={{ width: '14rem' }} style={{ width: '25%' }}></Column>
</DataTable>
         

サンプル#

顧客#

選択、ページネーション、フィルタリング、ソート、テンプレートを使用した DataTable。


<DataTable value={customers} paginator header={header} rows={10}
        paginatorTemplate="FirstPageLink PrevPageLink PageLinks NextPageLink LastPageLink CurrentPageReport RowsPerPageDropdown"
        rowsPerPageOptions={[10, 25, 50]} dataKey="id" selectionMode="checkbox" selection={selectedCustomers} onSelectionChange={(e) => setSelectedCustomers(e.value)}
        filters={filters} filterDisplay="menu" globalFilterFields={['name', 'country.name', 'representative.name', 'balance', 'status']}
        emptyMessage="No customers found." currentPageReportTemplate="Showing {first} to {last} of {totalRecords} entries">
    <Column selectionMode="multiple" headerStyle={{ width: '3rem' }}></Column>
    <Column field="name" header="Name" sortable filter filterPlaceholder="Search by name" style={{ minWidth: '14rem' }} />
    <Column field="country.name" header="Country" sortable filterField="country.name" style={{ minWidth: '14rem' }} body={countryBodyTemplate} filter filterPlaceholder="Search by country" />
    <Column header="Agent" sortable sortField="representative.name" filterField="representative" showFilterMatchModes={false} filterMenuStyle={{ width: '14rem' }}
        style={{ minWidth: '14rem' }} body={representativeBodyTemplate} filter filterElement={representativeFilterTemplate} />
    <Column field="date" header="Date" sortable filterField="date" dataType="date" style={{ minWidth: '12rem' }} body={dateBodyTemplate} filter filterElement={dateFilterTemplate} />
    <Column field="balance" header="Balance" sortable dataType="numeric" style={{ minWidth: '12rem' }} body={balanceBodyTemplate} filter filterElement={balanceFilterTemplate} />
    <Column field="status" header="Status" sortable filterMenuStyle={{ width: '14rem' }} style={{ minWidth: '12rem' }} body={statusBodyTemplate} filter filterElement={statusFilterTemplate} />
    <Column field="activity" header="Activity" sortable showFilterMatchModes={false} style={{ minWidth: '12rem' }} body={activityBodyTemplate} filter filterElement={activityFilterTemplate} />
    <Column headerStyle={{ width: '5rem', textAlign: 'center' }} bodyStyle={{ textAlign: 'center', overflow: 'visible' }} body={actionBodyTemplate} />
</DataTable>
         

製品#

ダイアログを使用した CRUD 実装の例。


<Toolbar className="mb-4" left={leftToolbarTemplate} right={rightToolbarTemplate}></Toolbar>
<DataTable ref={dt} value={products} selection={selectedProducts} onSelectionChange={(e) => setSelectedProducts(e.value)}
        dataKey="id"  paginator rows={10} rowsPerPageOptions={[5, 10, 25]}
        paginatorTemplate="FirstPageLink PrevPageLink PageLinks NextPageLink LastPageLink CurrentPageReport RowsPerPageDropdown"
        currentPageReportTemplate="Showing {first} to {last} of {totalRecords} products" globalFilter={globalFilter} header={header}>
    <Column selectionMode="multiple" exportable={false}></Column>
    <Column field="code" header="Code" sortable style={{ minWidth: '12rem' }}></Column>
    <Column field="name" header="Name" sortable style={{ minWidth: '16rem' }}></Column>
    <Column field="image" header="Image" body={imageBodyTemplate}></Column>
    <Column field="price" header="Price" body={priceBodyTemplate} sortable style={{ minWidth: '8rem' }}></Column>
    <Column field="category" header="Category" sortable style={{ minWidth: '10rem' }}></Column>
    <Column field="rating" header="Reviews" body={ratingBodyTemplate} sortable style={{ minWidth: '12rem' }}></Column>
    <Column field="inventoryStatus" header="Status" body={statusBodyTemplate} sortable style={{ minWidth: '12rem' }}></Column>
    <Column body={actionBodyTemplate} exportable={false} style={{ minWidth: '12rem' }}></Column>
</DataTable>
         

アクセシビリティ#

スクリーンリーダー

DataTable は、tableProps オプションで属性を拡張できる table 要素を使用します。このプロパティを使用すると、aria-label や aria-describedby などの aria ロールと属性を渡して、リーダーのテーブルを定義できます。テーブルのデフォルトロールは table です。ヘッダー、ボディ、フッター要素は rowgroup を使用し、行は row ロールを使用し、ヘッダーセルは columnheader を持ち、ボディセルは cell ロールを使用します。ソート可能なヘッダーは、"ascending" または "descending" に設定された aria-sort 属性を利用します。

行選択用の組み込みチェックボックスとラジオボタコンポーネントは、aria-checked 状態属性を持つ checkbox および radiobutton ロールをそれぞれ使用します。それらを記述するラベルは、ロケール API の aria.selectRow および aria.unselectRow プロパティから取得されます。同様に、ヘッダーチェックボックスは selectAll および unselectAll キーを使用します。行が選択されると、aria-selected は行で true に設定されます。

行の展開または折りたたみを行う要素は、aria-expanded および aria-controls プロパティを持つ button です。ボタンを説明する値は、locale API の aria.expandRow および aria.collapseRow プロパティから派生します。

フィルターメニューボタンは、ボタンとオーバーレイの関係を定義するために、aria-haspopup、aria-expanded、および aria-controls に加えて、aria.showFilterMenu および aria.hideFilterMenu プロパティを aria-label として使用します。ポップアップメニューは、フォーカスがオーバーレイ内に維持されるため、aria-modal を持つ dialog ロールを持ちます。演算子ドロップダウンは aria.filterOperator プロパティを使用し、フィルター制約ドロップダウンは aria.filterConstraint プロパティを使用します。一方、ルールを追加するためのボタンは aria.addRuleおよび aria.removeRule プロパティを利用します。フッターボタンも同様に aria.clear および aria.apply プロパティを使用します。Column コンポーネントの filterInputProps は、組み込みフィルターコンポーネントの aria ラベルを定義するために使用できます。テンプレートを使用してカスタムコンポーネントを使用する場合は、独自の aria ラベルも定義できます。

編集可能なセルはカスタムテンプレートを使用するため、必要に応じて aria ロールと属性を手動で管理する必要があります。行エディターコントロールは、aria-label に使用される aria.editRow、aria.cancelEdit、および aria.saveEdit を持つボタン要素です。

Paginator は DataTable 内で使用されるスタンドアロンコンポーネントです。アクセシビリティ機能の詳細については、paginator を参照してください。

ソート可能なヘッダーのキーボードサポート

DataTable 内のフィルター、行の展開、編集などの場合に使用されるボタン要素は、タブで移動可能で、スペースキーとエンターキーで使用できます。

ソート可能なヘッダーのキーボードサポート

キー機能
Tabヘッダー間を移動します。
Enter列をソートします。
Space列をソートします。

フィルターメニューのキーボードサポート

キー機能
Tabポップアップ内の要素間を移動します。
Escapeポップアップを非表示にします。

選択のキーボードサポート

キー機能
Tab選択されている最初の行にフォーカスを移動します。選択されていない場合は、最初の行にフォーカスが移動します。
上矢印キー前の行にフォーカスを移動します。
下矢印キー次の行にフォーカスを移動します。
EntermetaKeySelection 設定に応じて、フォーカスされている行の選択状態を切り替えます。
SpacemetaKeySelection 設定に応じて、フォーカスされている行の選択状態を切り替えます。
Home最初の行にフォーカスを移動します。
End最後の行にフォーカスを移動します。
Shift + 下矢印キー次の行にフォーカスを移動し、選択状態を切り替えます。
Shift + 上矢印キー前の行にフォーカスを移動し、選択状態を切り替えます。
Shift + Space最後に選択した行とフォーカスされている行の間の行を選択します。
Ctrl + Shift + Homeフォーカスされている行と最初の行までのすべての行を選択します。
Ctrl + Shift + Endフォーカスされている行と最後の行までのすべての行を選択します。
Ctrl + Aすべての行を選択します。
                                                                                                          PrimeReact 10.8.3 by PrimeTek