ツリーテーブル

TreeTable は、階層データを表形式で表示するために使用されます。

インポート#


import { TreeTable } from 'primereact/treetable';
import { Column } from 'primereact/column';
         

基本#

TreeTable は、TreeNode インスタンスのコレクションを value として、ノードの表現には子として Column コンポーネントを必要とします。ノードを切り替えるための要素を持つ列には、expander を有効にする必要があります。

名前
サイズ
タイプ
利用可能なオプションはありません

<TreeTable value={nodes} tableStyle={{ minWidth: '50rem' }}>
    <Column field="name" header="Name" expander></Column>
    <Column field="size" header="Size"></Column>
    <Column field="type" header="Type"></Column>
</TreeTable>
         

動的列#

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

名前
タイプ
サイズ
利用可能なオプションはありません

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

制御#

展開状態は、expandedKeys と onToggle プロパティで制御されます。expandedKeys は、キーがノードキーを表し、値が展開状態を表すオブジェクトである必要があります（例：) {'0-0': true}.

名前
サイズ
タイプ
利用可能なオプションはありません

<Button onClick={toggleApplications} label="Toggle Applications" />
<TreeTable value={nodes} expandedKeys={expandedKeys} onToggle={(e) => setExpandedKeys(e.value)} className="mt-4" tableStyle={{ minWidth: '50rem' }}>
    <Column field="name" header="Name" expander></Column>
    <Column field="size" header="Size"></Column>
    <Column field="type" header="Type"></Column>
</TreeTable>
         

テンプレート#

header、body、footer セクションでのカスタムコンテンツは、テンプレートを使用してサポートされています。トグルは、togglerTemplate プロパティでカスタマイズできます。

ファイルビューア
名前
サイズ
タイプ
利用可能なオプションはありません

<TreeTable value={nodes} header={header} footer={footer} togglerTemplate={togglerTemplate} tableStyle={{ minWidth: '50rem' }}>
    <Column field="name" header="Name" expander></Column>
    <Column field="size" header="Size"></Column>
    <Column field="type" header="Type"></Column>
    <Column body={actionTemplate} headerClassName="w-10rem" />
</TreeTable>
         

ページネーター#

基本#

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

名前
サイズ
タイプ
利用可能なオプションはありません
5

<TreeTable value={nodes} paginator rows={5} rowsPerPageOptions={[5, 10, 25]} tableStyle={{ minWidth: '50rem' }}>
    <Column field="name" header="Name" expander></Column>
    <Column field="size" header="Size"></Column>
    <Column field="type" header="Type"></Column>
</TreeTable>
         

テンプレート#

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

名前
サイズ
タイプ
利用可能なオプションはありません
5
0件中0件から0件

<TreeTable value={nodes} paginator rows={5} rowsPerPageOptions={[5, 10, 25, 50]}
        paginatorTemplate="RowsPerPageDropdown FirstPageLink PrevPageLink CurrentPageReport NextPageLink LastPageLink"
        currentPageReportTemplate="{first} to {last} of {totalRecords}"
        paginatorLeft={paginatorLeft} paginatorRight={paginatorRight} tableStyle={{ minWidth: '50rem' }}>
    <Column field="name" header="Name" expander></Column>
    <Column field="size" header="Size"></Column>
    <Column field="type" header="Type"></Column>
</TreeTable>
         

ソート#

単一列#

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

名前
サイズ
タイプ
利用可能なオプションはありません

<TreeTable value={nodes} tableStyle={{ minWidth: '50rem' }}>
    <Column field="name" header="Name" expander sortable></Column>
    <Column field="size" header="Size" sortable></Column>
    <Column field="type" header="Type" sortable></Column>
</TreeTable>
         

複数列#

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

名前
サイズ
タイプ
利用可能なオプションはありません

<TreeTable value={nodes} sortMode="multiple" tableStyle={{ minWidth: '50rem' }}>
    <Column field="name" header="Name" expander sortable></Column>
    <Column field="size" header="Size" sortable></Column>
    <Column field="type" header="Type" sortable></Column>
</TreeTable>
         

フィルター#

フィルターは、列にfilterプロパティを追加することで有効になります。filterModeはフィルタリング戦略を指定します。lenientモードでは、クエリがノードに一致した場合、ノードの子はさらに検索されません。一方、strictモードでは、クエリがノードに一致した場合、すべての子孫でフィルタリングが継続されます。すべてのフィルタリングをサポートする列を検索するための、globalFilterという一般的なフィルタも提供されています。

寛容
厳格
名前
サイズ
タイプ
利用可能なオプションはありません

<SelectButton value={filterMode} onChange={(e) => setFilterMode(e.value)} options={filterOptions} />

<TreeTable value={nodes} globalFilter={globalFilter} header={header} filterMode={filterMode} tableStyle={{ minWidth: '50rem' }}>
    <Column field="name" header="Name" expander filter filterPlaceholder="Filter by name"></Column>
    <Column field="size" header="Size" filter filterPlaceholder="Filter by size"></Column>
    <Column field="type" header="Type" filter filterPlaceholder="Filter by type"></Column>
</TreeTable>
         

選択#

シングル#

単一ノードの選択は、selectionModeをsingleに設定し、選択値のバインディングを管理するためにselectionKeysとonSelectionChangeプロパティを使用することで設定されます。

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

名前
サイズ
タイプ
利用可能なオプションはありません

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

<TreeTable value={nodes} selectionMode="single" selectionKeys={selectedNodeKey}
        onSelectionChange={(e) => setSelectedNodeKey(e.value)} metaKeySelection={metaKey} tableStyle={{ minWidth: '50rem' }}>
    <Column field="name" header="Name" expander></Column>
    <Column field="size" header="Size"></Column>
    <Column field="type" header="Type"></Column>
</TreeTable>
         

複数#

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

複数選択モードでは、値のバインディングは、キーがノードキーで、値が選択状態を示すブール値であるキーと値のペアである必要があります。


{
    '0-0': true,
    '0-1-0': true
}
         
名前
サイズ
タイプ
利用可能なオプションはありません

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

<TreeTable value={nodes} selectionMode="multiple" selectionKeys={selectedNodeKeys}
        onSelectionChange={(e) => setSelectedNodeKeys(e.value)} metaKeySelection={metaKey} tableStyle={{ minWidth: '50rem' }}>
    <Column field="name" header="Name" expander></Column>
    <Column field="size" header="Size"></Column>
    <Column field="type" header="Type"></Column>
</TreeTable>
         

チェックボックス#

チェックボックスを使用して複数のノードを選択するには、selectionModeをcheckboxとして設定します。

チェックボックス選択モードでは、値のバインディングは、キーがノードキーで、値がノードのチェック状態を表すcheckedとpartialCheckedプロパティを持つオブジェクトであるキーと値のペアである必要があります。


{
    '0-0': {
        partialChecked: false,
        checked: true
    }
}
         
名前
サイズ
タイプ
利用可能なオプションはありません

<TreeTable value={nodes} selectionMode="checkbox" selectionKeys={selectedNodeKeys}
        onSelectionChange={(e) => setSelectedNodeKeys(e.value)} tableStyle={{ minWidth: '50rem' }}>
    <Column field="name" header="Name" expander></Column>
    <Column field="size" header="Size"></Column>
    <Column field="type" header="Type"></Column>
</TreeTable>
         

イベント#

TreeTableは、選択イベントをリッスンするためのonSelectとonUnselectイベントを提供します。

名前
サイズ
タイプ
利用可能なオプションはありません

<TreeTable value={nodes} selectionMode="single" selectionKeys={selectedNodeKey}
        onSelectionChange={(e) => setSelectedNodeKey(e.value)} metaKeySelection={false}
        onSelect={onSelect} onUnselect={onUnselect} tableStyle={{ minWidth: '50rem' }}>
    <Column field="name" header="Name" expander></Column>
    <Column field="size" header="Size"></Column>
    <Column field="type" header="Type"></Column>
</TreeTable>
         

列グループ#

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

ブランド
売上高
売上
利益
昨年
今年
昨年
今年
合計$506,202$531,020

<TreeTable value={nodes} headerColumnGroup={headerGroup} footerColumnGroup={footerGroup} tableStyle={{ minWidth: '50rem' }}>
    <Column field="brand" expander />
    <Column field="lastYearSale" />
    <Column field="thisYearSale" />
    <Column field="lastYearProfit" />
    <Column field="thisYearProfit" />
</TreeTable>
         

遅延読み込み#

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

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

さらに、ルート要素のみを読み込む必要があります。子要素は、onExpandコールバックを使用してオンデマンドで読み込むことができます。

名前
サイズ
タイプ

<TreeTable value={nodes} lazy paginator totalRecords={totalRecords}
        first={first} rows={rows} onPage={onPage} onExpand={onExpand} loading={loading} tableStyle={{ minWidth: '50rem' }}>
    <Column field="name" header="Name" expander></Column>
    <Column field="size" header="Size"></Column>
    <Column field="type" header="Type"></Column>
</TreeTable>
         

編集#

列のeditorプロパティで入力要素を定義することにより、セル内編集が有効になります。

名前
サイズ
タイプ
利用可能なオプションはありません

<TreeTable value={nodes} tableStyle={{ minWidth: '50rem' }}>
    <Column field="name" header="Name" expander style={{ height: '3.5rem' }}></Column>
    <Column field="size" header="Size" editor={sizeEditor} cellEditValidator={requiredValidator} style={{ height: '3.5rem' }}></Column>
    <Column field="type" header="Type" editor={typeEditor} style={{ height: '3.5rem' }}></Column>
</TreeTable>
         

スクロール#

垂直スクロール#

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

名前
サイズ
タイプ
利用可能なオプションはありません

<TreeTable value={nodes} scrollable scrollHeight="200px">
    <Column field="name" header="Name" expander></Column>
    <Column field="size" header="Size"></Column>
    <Column field="type" header="Type"></Column>
</TreeTable>
         

水平スクロール#

列の合計幅がテーブル幅を超えると、水平スクロールが有効になります。

名前
サイズ
タイプ2
サイズ2
タイプ3
サイズ3
利用可能なオプションはありません

<TreeTable value={nodes} scrollable scrollHeight="200px">
    <Column field="name" header="Name" expander style={{ width: '250px' }}></Column>
    <Column field="size" header="Size" style={{ width: '250px' }}></Column>
    <Column field="type" header="Type 2" style={{ width: '250px' }}></Column>
    <Column field="size" header="Size 2" style={{ width: '250px' }}></Column>
    <Column field="type" header="Type 3" style={{ width: '250px' }}></Column>
    <Column field="size" header="Size 3" style={{ width: '250px' }}></Column>
</TreeTable>
         

固定列#

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

名前
利用可能なオプションはありません
サイズ
タイプ
サイズ
タイプ
サイズ
タイプ
利用可能なオプションはありません

<TreeTable value={nodes} scrollable frozenWidth="200px" scrollHeight="250px">
    <Column field="name" header="Name" expander frozen style={{ width: '250px', height: '57px' }}></Column>
    <Column field="size" header="Size" style={{ width: '250px', height: '57px' }} columnKey="size_0"></Column>
    <Column field="type" header="Type" style={{ width: '250px', height: '57px' }} columnKey="type_0"></Column>
    <Column field="size" header="Size" style={{ width: '250px', height: '57px' }} columnKey="size_1"></Column>
    <Column field="type" header="Type" style={{ width: '250px', height: '57px' }} columnKey="type_1"></Column>
    <Column field="size" header="Size" style={{ width: '250px', height: '57px' }} columnKey="size_2"></Column>
    <Column field="type" header="Type" style={{ width: '250px', height: '57px' }} columnKey="type_2"></Column>
</TreeTable>
         

列サイズ変更#

フィットモード#

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

名前
サイズ
タイプ
利用可能なオプションはありません

<TreeTable value={nodes} resizableColumns showGridlines tableStyle={{ minWidth: '50rem' }}>
    <Column field="name" header="Name" expander></Column>
    <Column field="size" header="Size"></Column>
    <Column field="type" header="Type"></Column>
</TreeTable>
         

展開モード#

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

名前
サイズ
タイプ
利用可能なオプションはありません

<TreeTable value={nodes} resizableColumns showGridlines columnResizeMode="expand" tableStyle={{ minWidth: '50rem' }}>
    <Column field="name" header="Name" expander></Column>
    <Column field="size" header="Size"></Column>
    <Column field="type" header="Type"></Column>
</TreeTable>
         

並べ替え#

reorderableColumnsが存在する場合、ドラッグアンドドロップを使用して列の順序を変更できます。

名前
サイズ
タイプ
利用可能なオプションはありません

<TreeTable value={nodes} reorderableColumns tableStyle={{ minWidth: '50rem' }}>
    <Column field="name" header="Name" expander></Column>
    <Column field="size" header="Size"></Column>
    <Column field="type" header="Type"></Column>
</TreeTable>
         

列の切り替え#

条件に基づいた列の可視性は、動的列を使用して実装できます。このサンプルでは、MultiSelectを使用して可視列を管理しています。

サイズ
タイプ
名前
サイズ
タイプ
利用可能なオプションはありません

<TreeTable value={nodes} header={header} tableStyle={{ minWidth: '50rem' }}>
    <Column key="name" field="name" header="Name" expander />
    {visibleColumns.map((col) => (
        <Column key={col.field} field={col.field} header={col.header} />
    ))}
</TreeTable>
         

条件付きスタイル#

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

名前
サイズ
タイプ
利用可能なオプションはありません

<TreeTable value={nodes} rowClassName={rowClassName} tableStyle={{ minWidth: '50rem' }}>
    <Column field="name" header="Name" expander></Column>
    <Column field="size" header="Size" body={sizeTemplate}></Column>
    <Column field="type" header="Type"></Column>
</TreeTable>
         

コンテキストメニュー#

TreeTableは、onContextMenuイベントを使用してContextMenuと排他的に統合され、右クリックでメニューを開き、contextMenuSelectionとonContextMenuSelectionChangeプロパティを使用してメニューを介して選択を制御します。

名前
サイズ
タイプ
利用可能なオプションはありません

<ContextMenu model={menu} ref={cm} onHide={() => setSelectedNodeKey(null)} />
<TreeTable value={nodes} expandedKeys={expandedKeys} onToggle={(e) => setExpandedKeys(e.value)} contextMenuSelectionKey={selectedNodeKey}
    onContextMenuSelectionChange={(event) => setSelectedNodeKey(event.value)} onContextMenu={(event) => cm.current.show(event.originalEvent)} tableStyle={{ minWidth: '50rem' }}>
    <Column field="name" header="Name" expander></Column>
    <Column field="size" header="Size"></Column>
    <Column field="type" header="Type"></Column>
</TreeTable>
         

ステートフル#

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

テーブルの状態を変更する（例：ページネーションまたは行の展開）、移動し、このテーブルに戻ってこの機能をテストします。設定はstateStorageプロパティでsessionとして設定されているため、ブラウザが閉じられるまでテーブルは状態を保持します。別の選択肢は、localStorageを参照するlocalで、より長い存続期間になります。

名前
サイズ
タイプ
利用可能なオプションはありません
5

<TreeTable value={nodes} stateKey={'tree-table-state-demo-session'} stateStorage={'session'}>
    <Column field="name" header="Name" expander filter filterPlaceholder="Filter by name"></Column>
    <Column field="size" header="Size" filter filterPlaceholder="Filter by size"></Column>
    <Column field="type" header="Type" filter filterPlaceholder="Filter by type"></Column>
</TreeTable>
         

アクセシビリティ#

スクリーンリーダー

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

行要素は、階層を定義するためにaria-expandedを状態とともにaria-posinset、aria-setsize、aria-level属性で管理します。

選択が有効になっている場合、aria-selectedは行でtrueに設定されます。チェックボックスモードでは、組み込みのチェックボックスコンポーネントはaria-checked状態属性を持つcheckboxロールを使用します。

編集可能なセルはカスタムテンプレートを使用するため、必要に応じてariaロールと属性を手動で管理する必要があります。

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

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

キー機能
tabヘッダー間を移動します。
enter列をソートします。
space列をソートします。

キーボードサポート

キー機能
tabフォーカスがコンポーネントに入ると、最初に選択されたノードにフォーカスを移動します。選択されていない場合は、最初の要素にフォーカスが移動します。フォーカスがすでにコンポーネント内にある場合は、ページタブシーケンスの次のフォーカス可能な要素にフォーカスを移動します。
shift + tabフォーカスがコンポーネントに入ると、最後に選択されたノードにフォーカスを移動します。選択されていない場合は、最初の要素にフォーカスが移動します。フォーカスがすでにコンポーネント内にある場合は、ページタブシーケンスの前のフォーカス可能な要素にフォーカスを移動します。
enterフォーカスされているツリーノードを選択します。
spaceフォーカスされているツリーノードを選択します。
下矢印次のツリーノードにフォーカスを移動します。
上矢印前のツリーノードにフォーカスを移動します。
右矢印ノードが閉じている場合はノードを開き、それ以外の場合は最初のノードにフォーカスを移動します。
左矢印ノードが開いている場合はノードを閉じ、それ以外の場合は親ノードにフォーカスを移動します。
                                                          PrimeReact 10.8.3 by PrimeTek