react grid table

反応グリッドテーブル

CSS グリッド レイアウトに基づくモジュラー テーブルは、迅速な構成と詳細なカスタマイズ向けに最適化されています。

サポートされている機能:

• 非同期のサポート
• 列ごとに並べ替える
• 列のサイズ変更
• 列の並べ替え
• ハイライトで検索
• ページネーション
• 行の選択
• インライン行編集
• 列の固定 (事前構成)
• 列の可視性の管理
• 仮想スクロール
• スティッキーヘッダー
• 動的な行の高さ

ライブデモ

インストール

npm i @nadavshaar/react-grid-table

使用法

デフォルトでは、テーブルは行と列の基本構成だけでも十分な機能を備えています。

例：

 import React from "react" ;
import GridTable from '@nadavshaar/react-grid-table' ;

// custom cell component
const Username = ( { tableManager , value , field , data , column , colIndex , rowIndex } ) => {
    return (
        < div className = 'rgt-cell-inner' style = { { display : 'flex' , alignItems : 'center' , overflow : 'hidden' } } >
            < img src = { data . avatar } alt = "user avatar" / >
            < span className = 'rgt-text-truncate' style = { { marginLeft : 10 } } > { value } < / span >
        < / div >
    )
}

const rows = [
    { 
        "id" : 1 , 
        "username" : "wotham0" , 
        "gender" : "Male" , 
        "last_visited" : "12/08/2019" , 
        "test" : { "x" : 1 , "y" : 2 } , 
        "avatar" : "https://robohash.org/atquenihillaboriosam.bmp?size=32x32&set=set1"
    } ,
    { 
        "id" : 2 , 
        "username" : "dbraddon2" , 
        "gender" : "Female" , 
        "last_visited" : "16/07/2018" , 
        "test" : { "x" : 3 , "y" : 4 } , 
        "avatar" : "https://robohash.org/etsedex.bmp?size=32x32&set=set1"
    } ,
    { 
        "id" : 3 , 
        "username" : "dridett3" , 
        "gender" : "Male" , 
        "last_visited" : "20/11/2016" , 
        "test" : { "x" : 5 , "y" : 8 } , 
        "avatar" : "https://robohash.org/inimpeditquam.bmp?size=32x32&set=set1"
    } ,
    { 
        "id" : 4 , 
        "username" : "gdefty6" , 
        "gender" : "Female" , 
        "last_visited" : "03/08/2019" , 
        "test" : { "x" : 7 , "y" : 4 } , 
        "avatar" : "https://robohash.org/nobisducimussaepe.bmp?size=32x32&set=set1"
    } ,
    { 
        "id" : 5 , 
        "username" : "hbeyer9" , 
        "gender" : "Male" , 
        "last_visited" : "10/10/2016" , 
        "test" : { "x" : 2 , "y" : 2 } , 
        "avatar" : "https://robohash.org/etconsequatureaque.jpg?size=32x32&set=set1"
    }
] ;

const columns = [
    {
        id : 1 , 
        field : 'username' , 
        label : 'Username' ,
        cellRenderer : Username ,
    } , 
    {
        id : 2 , 
        field : 'gender' , 
        label : 'Gender' ,
    } ,
    {
        id : 3 , 
        field : 'last_visited' , 
        label : 'Last Visited' ,
        sort : ( { a , b , isAscending } ) => {
            let aa = a . split ( '/' ) . reverse ( ) . join ( ) ,
            bb = b . split ( '/' ) . reverse ( ) . join ( ) ;
            return aa < bb ? isAscending ? - 1 : 1 : ( aa > bb ? isAscending ? 1 : - 1 : 0 ) ;
        }
    } ,
    {
        id : 4 , 
        field : 'test' , 
        label : 'Score' ,
        getValue : ( { value } ) => value . x + value . y
    }
] ;

const MyAwesomeTable = ( ) => < GridTable columns = { columns } rows = { rows } / > ;

export default MyAwesomeTable ;

ドキュメント

目次

• 主要コンポーネント
• 小道具
• 構成の小道具
• イベント小道具
• 非同期プロパティ
• columnsプロップ
• checkbox列
• rowsプロップ
• componentsプロップ
• additionalPropsプロップ
• tableManager API
• 使い方: 同期/非同期
• ハウツー: 行編集
• ハウツー: スタイリング

このパッケージをサポートする

主要コンポーネント

HEADER (オプション | カスタマイズ可能):検索と列の表示管理。

TABLE-HEADER:並べ替え、サイズ変更、列の並べ替え。

TABLE-BODY:データ/ローダー/結果なしの表示、行編集および行選択。

FOOTER (オプション | カスタマイズ可能):行情報、ページごとの行数、およびページネーション。

小道具

名前	タイプ	説明	デフォルト値
列*	オブジェクトの配列	カラム構成（詳細）	[ ]
行	オブジェクトの配列	行データ (詳細)	[ ]
selectedRowsIds	IDの配列	選択されたすべての行の ID (詳細)	[ ]
検索テキスト	弦	検索用のテキスト	「」
getIsRowSelectable	関数	現在の行の行選択を選択可能にするか無効にするかを返すコールバック関数	row => true
getIsRowEditable	関数	現在の行の行編集を許可するかどうかを返すコールバック関数	row => true
editRowId	どれでも	インライン編集モードに切り替える必要がある行の ID (行編集の詳細)	ヌル
ページ	番号	現在のページ番号	1
ページサイズ	番号	選択したページサイズ	20
選別	物体	ソート設定。は、並べ替える必要がある列の ID としてcolId受け入れ、並べ替え方向を定義するためにisAsc受け入れます。例: { colId: 'some-column-id', isAsc: true } 、並べ替えを解除するには、 colId nullとして渡すだけです	{ }
読み込み中です	ブール値	ローダーを表示するかどうか	間違い

構成の小道具

名前	タイプ	説明	デフォルト値
行IDフィールド	弦	行識別子として使用される行のデータ内のフィールドの名前 -一意である必要があります	「ID」
minColumnResizeWidth	番号	サイズ変更中のすべての列の最小幅 (「チェックボックス」列には適用されません)	70
minSearchChars	番号	検索が適用される前に入力する最小文字数	2
isHeaderSticky	ブール値	スクロール時に表のヘッダーのセルが上部に固定されるかどうか	真実
ページ付けされています	ブール値	ページネーション コントロールをフッターに表示するかどうか、および行データをページに分割するかどうかを決定します。	真実
列の並べ替えを有効にする	ブール値	列のドラッグ&ドロップによる位置変更を許可するかどうか	真実
ハイライト検索	ブール値	検索語を強調表示するかどうか	真実
表示検索	ブール値	ヘッダーに検索コンポーネントを表示するかどうか	真実
showRows情報	ブール値	行情報コンポーネント (フッターの左側にあります) を表示するかどうか	真実
showColumnVisibilityManager	ブール値	列の可視性管理ボタン (ヘッダーの右上にあります) を表示するかどうか	真実
ページサイズ	数値の配列	ページサイズのオプション	[20、50、100]
isVirtualScroll	ブール値	パフォーマンスを向上させるために仮想スクロールで項目をレンダリングするかどうか (ページ内に多数の行がある場合に役立ちます)	真実
選択すべてモード	弦	「すべての選択」のタイプを制御します。使用可能なオプションは、現在のページの行のみを選択/選択解除するpage 、またはすべてのページのすべての行を選択/選択解除するallです。非同期フローを使用する場合、 allオプションは使用可能なすべての行を選択し、 pageオプションとbatchSizeを組み合わせると、ページ内のすべての使用可能な行を選択/選択解除します。	'ページ'
アイコン	ノードのオブジェクト	カスタムアイコン構成	{sortAscending、sortDescending、clearSelection、columnVisibility、検索、ローダー }
テキスト	物体	すべての UI テキストの構成。翻訳やテキストのカスタマイズに役立ちます	{ search: '検索:'、totalRows: '合計行数:'、rows: '行数:'、selected: '選択済み'、rowsPerPage: 'ページあたりの行数:'、ページ: 'ページ:'、of: 'of' , prev: 'Prev'、next: 'Next'、columnVisibility: '列の可視性' }
コンポーネント	物体	このプロパティを使用すると、内部コンポーネントを独自のカスタム コンポーネントでオーバーライドできるようになります (サポートされているコンポーネントの完全なリストを参照してください)。	{ デフォルトのコンポーネント }
追加の小道具	物体	この prop を使用すると、テーブルのコンポーネント/モジュールに props を渡すことができます (サポートされる追加Props の完全なリストを参照してください)。	additionalProps={{ header: { ... } }}

イベント小道具

名前	タイプ	説明	使用法
onColumnsChange	関数	columns変更されたときにトリガーされます	columns => { ... }
onSelectedRowsChange	関数	行の選択が変更されたときにトリガーされます	selectedRowsIds => { ... }
onPageChange	関数	ページが変更されたときにトリガーされます	nextPage => { ... }
onPageSizeChange	関数	ページサイズが変更されたときにトリガー	newPageSize => { ... }
onSearchTextChange	関数	検索テキストが変更されたときにトリガーされます	searchText => { ... }
onSortChange	関数	ソートが変更されたときにトリガー	({colId, isAsc}) => { ... }
onRowClick	関数	行がクリックされたときにトリガーされます	({ rowIndex, data, column, isEdit, event }, tableManager) => { ... }
onEditRowIdChange	関数	rowEditIdが変更されたときにトリガーされます	rowEditId => { ... }
onLoad	関数	tableManagerの初期化時のトリガー (詳細)	tableManager => { ... }
onColumnResizeStart	関数	列のサイズ変更が開始されるときにトリガーします	({event, target, column}) => { ... }
onColumnResize	関数	列のサイズ変更が発生したときにトリガーします	({event, target, column}) => { ... }
onColumnResizeEnd	関数	列のサイズ変更が終了したときにトリガーします	({event, target, column}) => { ... }
onColumnReorderStart	関数	列のドラッグでトリガーします。 onSortStartプロパティを使用して、react-sortable-hoc によって提供される並べ替えデータ	(sortData, tableManager) => { ... }
onColumnReorderEnd	関数	列のドロップ時にトリガーされ、列の位置が変更された場合にのみトリガーされます。 onSortEndプロパティを使用して、react-sortable-hoc によって提供される並べ替えデータ	(sortData, tableManager) => { ... }

非同期プロパティ

名前	タイプ	説明	使用法/デフォルト値
onRowsRequest	関数	新しい行をフェッチする必要があるときにトリガーします	例を参照
onRowsChange	関数	行が変更されたときにトリガーします	例を参照
onTotalRowsChange	関数	行の合計数が変更されたときにトリガーされます	例を参照
onRowsReset	関数	蓄積された行をリセットする必要がある場合 (検索または並べ替え時) にトリガーします。	例を参照
バッチサイズ	番号	onRowsRequestプロパティによってリクエストされる行の量を定義します	表のページサイズ
requestDebounceTimeout	番号	onRowsRequestプロパティをトリガーするためのデバウンス時間を定義します	300
合計行数	番号	総行数	---

小道具 - 詳細

列

タイプ:オブジェクトの配列。

このプロパティは列の構成を定義します。

各列 (「チェックボックス」列を除く) は、次のプロパティをサポートしています。

名前	タイプ	説明	デフォルト値
ID*	どれでも	列の一意の識別子。これを「チェックボックス」に設定すると、行選択列が生成されます (チェックボックス列の詳細)。	---
分野	弦	行データ内のフィールドの名前	---
ラベル	弦	ヘッダーセルに表示するラベル	fieldプロパティ
固定された	ブール値	列を横に固定するかどうか。最初と最後の列でのみサポートされます。	間違い
見える	ブール値	列を表示するかどうか	真実
クラス名	弦	すべての列セルのカスタム クラス セレクター	「」
幅	弦	グリッド値の列の初期幅 (値の完全なリスト)	「200ピクセル」
minResizeWidth	番号	サイズ変更時の列の最小幅	minColumnResizeWidthプロパティ
maxResizeWidth	数値、ヌル	サイズ変更時の列の最大幅	ヌル
getValue	関数	セル値を取得するために使用されます (セル値が文字列ではない場合に役立ちます - 詳細)	({value, column}) => value
セット値	関数	セル値の更新に使用されます (セル値が文字列ではない場合に役立ちます - 詳細)	({ value, data, setRow, column }) => { setRow({ ...data, [column.field]: value}) }
検索可能	ブール値	列に検索フィルタリングを適用するかどうか	真実
編集可能	ブール値	列の編集を許可するかどうか	真実
並べ替え可能	ブール値	列のソートを許可するかどうか	真実
サイズ変更可能	ブール値	列のサイズ変更を許可するかどうか	真実
検索	関数	列の検索機能	({value, searchText}) => value.toString().toLowerCase().includes(searchText.toLowerCase())
選別	関数	列のソート関数	({a, b, isAscending}) => { let aa = typeof a === 'string' ? a.toLowerCase() : a; let bb = typeof b === 'string' ? b.toLowerCase() : b; if(aa > bb) return isAscending ? 1 : -1; else if(aa < bb) return isAscending ? -1 : 1; return 0; }
セルレンダラー	関数	セル コンポーネント({ tableManager, value, data, column, colIndex, rowIndex }) => ( children )	---
headerCellRenderer	関数	ヘッダー セル コンポーネント({ tableManager, column }) => ( children )	---
エディタセルレンダラー	関数	編集モードでセル コンポーネントをカスタム レンダリングするために使用されます({ tableManager, value, data, column, colIndex, rowIndex, onChange }) => ( children )	---
placeHolderRenderer	関数	新しい行をロードするときに表示されるセルのプレースホルダー コンポーネントのカスタム レンダリングに使用されます({ tableManager, value, data, column, colIndex, rowIndex }) => ( children )	---

例：

 // column config

{
  id : 'some-unique-id' ,
  field : 'first_name' ,
  label : 'First Name' ,
  className : '' ,
  pinned : false ,
  width : '200px' ,
  getValue : ( { tableManager , value , column , rowData } ) => value , 
  setValue : ( { value , data , setRow , column } ) => { setRow ( { ... data , [ column . field ] : value } ) } ,
  minResizeWidth : 70 ,
  maxResizeWidth : null ,
  sortable : true ,
  editable : true ,
  searchable : true ,
  visible : true ,
  resizable : true ,
  search : ( { value , searchText } ) => { } ,
  sort : ( { a , b , isAscending } ) => { } ,
  cellRenderer : ( { tableManager , value , data , column , colIndex , rowIndex } ) => ( children ) ,
  headerCellRenderer : ( { tableManager , column } ) => ( children ) ,
  editorCellRenderer : ( { tableManager , value , data , column , colIndex , rowIndex , onChange } ) => ( children ) ,
  placeHolderRenderer : ( { tableManager , value , data , column , colIndex , rowIndex } ) => ( children )
} 

チェックボックス列

行の選択は事前定義された列によって行われ、「チェックボックス」というidを持つ列を追加するだけです。

チェックボックス列は次のプロパティをサポートしています。

名前	タイプ	説明	デフォルト値
ID*	「チェックボックス」	行選択列を生成します	---
固定された	ブール値	列を横に固定するかどうか。最初と最後の列でのみサポートされます。	間違い
見える	ブール値	列を表示するかどうか	真実
クラス名	弦	すべての列セルのカスタム クラス	「」
幅	弦	グリッド値の列の初期幅 (値の完全なリスト)	「最大コンテンツ」
minResizeWidth	番号	サイズ変更時の列の最小幅	0
maxResizeWidth	数値、ヌル	サイズ変更時の列の最大幅	ヌル
サイズ変更可能	ブール値	列のサイズ変更を許可するかどうか	間違い
セルレンダラー	関数	チェックボックスセルのカスタムレンダリングに使用されます	({ tableManager, value, data, column, colIndex, rowIndex, onChange, disabled}) => ( <input type="checkbox" onChange={ onChange } checked={ value } disabled={ disabled } /> )
headerCellRenderer	関数	チェックボックスヘッダーセルのカスタムレンダリングに使用されます	({ tableManager, column, mode, ref, checked, disabled, indeterminate, onChange }) => ( <input type="checkbox" onChange={ onChange } checked={ checked } disabled={ disabled } /> )

例：

 // checkbox column config

{
  id : 'checkbox' ,
  pinned : true ,
  className : '' ,
  width : '54px' ,
  minResizeWidth : 0 ,
  maxResizeWidth : null ,
  resizable : false ,
  visible : true ,
  cellRenderer : ( { tableManager , value , data , column , colIndex , rowIndex , onChange , disabled } ) => ( children )
  headerCellRenderer : ( { tableManager , column , mode , ref , checked , disabled , indeterminate , onChange } ) = > ( children )
}

行

タイプ:オブジェクトの配列。

このプロパティには行のデータが含まれています。

各行には一意の識別子フィールドが必要です。デフォルトではidですが、 rowIdFieldプロパティを使用して別のフィールドに変更できます。

 // Example for a single row data

{
  "id" : " some-unique-id " , 
  "objectValueField" : { "x" : 1 , "y" : 2 }, 
  "username" : " wotham0 " ,
  "first_name" : " Waldemar " ,
  "last_name" : " Otham " ,
  "avatar" : " https://robohash.org/atquenihillaboriosam.bmp?size=32x32&set=set1 " ,
  "email" : " [email protected] " ,
  "gender" : " Male " ,
  "ip_address" : " 113.75.186.33 " ,
  "last_visited" : " 12/08/2019 "
}

注:プロパティ値の型が文字列でない場合、または列のフィールドを指定しない場合は、目的の値を抽出するために列に対してgetValue関数を使用する必要があります。

シグネチャ: getValue: ({ tableManager, value, column, rowData }) => 文字列

例：

セルのフィールドの値がオブジェクトであるとします。

{ ... , fullName: {firstName: 'some-first-name', lastName: 'some-last-name'} } ,

姓名をフルネームとして表示するためのgetValue関数は次のようになります。

getValue: ({ value }) => value.firstName + ' ' + value.lastName

返された値は、検索、並べ替えなどに使用されます。

コンポーネント

タイプ:オブジェクト。

このプロパティを使用すると、内部コンポーネントを独自のカスタム コンポーネントでオーバーライドできるようになります。

すべてのコンポーネントはエクスポートされるため、どこからでもインポートできますが、コンポーネントに props を提供するのは自分の責任です。

成分	必要な小道具	オプションの小道具
ヘッダ	tableManager	---
検索	tableManager	value onChange
列の可視性	tableManager	onChange columns
ヘッダーセル	tableManager	column
ヘッダー選択セル	tableManager	column ref onChange checked disabled
細胞	tableManager	value
エディタセル	tableManager	value data column colIndex rowIndex onChange
選択セル	tableManager	onChange value disabled
PlaceHolderCell	tableManager	---
ローダ	tableManager	---
結果なし	tableManager	---
ドラッグハンドル	---	---
フッター	tableManager	---
情報	tableManager	totalCount pageSize pageCount selectedCount
ページサイズ	tableManager	value onChange optionsの変更
ページネーション	tableManager	onChange page

例: ヘッダーコンポーネントをオーバーライドする

 const Header = ( { tableManager } ) => {

    const { searchApi , columnsVisibilityApi , columnsApi } = tableManager ;

    const { searchText , setSearchText } = searchApi ;
    const { toggleColumnVisibility } = columnsVisibilityApi ;
    const { columns } = columnsApi ;

    return (
        < div style = { { display : 'flex' , flexDirection : 'column' , padding : '10px 20px' , background : '#fff' , width : '100%' } } >
            < div >
                < label htmlFor = "my-search" style = { { fontWeight : 500 , marginRight : 10 } } >
                    Search for:
                < / label >
                < input 
                    name = "my-search"
                    type = "search" 
                    value = { searchText } 
                    onChange = { e => setSearchText ( e . target . value ) } 
                    style = { { width : 300 } }
                / >
            < / div >
            < div style = { { display : 'flex' , marginTop : 10 } } >
                < span style = { { marginRight : 10 , fontWeight : 500 } } > Columns: < / span >
                {
                    columns . map ( ( column , idx ) => (
                        < div key = { idx } style = { { flex : 1 } } >
                            < input 
                                id = { `checkbox- ${ idx } ` }
                                type = "checkbox" 
                                onChange = { e => toggleColumnVisibility ( column . id ) } 
                                checked = { column . visible !== false } 
                            / >
                            < label htmlFor = { `checkbox- ${ idx } ` } style = { { flex : 1 , cursor : 'pointer' } } >
                                { column . label }
                            < / label >
                        < / div >
                    ) )
                }
            < / div >
        < / div >
    )
}

const MyAwesomeTable = props => {
    ...
    return (
        < GridTable
            . . .
            components = { { Header } }
        / >
    )
}

追加の小道具

タイプ:オブジェクト。

この prop を使用すると、内部コンポーネント/モジュールに props を渡すことができます。

例props を cell コンポーネントに渡す:

 additionalProps = { { cell : { ... } , ... } }

props を渡すことができるコンポーネント/モジュールのリスト:

• ヘッダ
• 検索
• 列の可視性
• ヘッダーセル
• headerSelectionCell
• 細胞
• エディタセル
• 選択セル
• placeHolderCell
• フッター
• 情報
• ページサイズ
• ページネーション
• 行仮想化者

テーブルマネージャー

これは内部コンポーネントによって使用される API オブジェクトです。これを使用して、API が提供するあらゆることをコンポーネントの外部で行うことができます。

API 構造:

• id:各テーブルコンポーネントの一意の識別子。
• isMounted:テーブルはマウントされていますか。
• isInitialized:テーブルは初期化されていますか。すべてのコンポーネントが初期化されると、true に設定されます。
• モード: 'sync' または 'async'、提供された props から派生します。
• isLoading:現在データをロードしているテーブルです。
• config:テーブルのユーザー インターフェイスとその動作を定義するすべてのパラメータ。
• refs:選択した要素の参照オブジェクト。
• columnsApi:列の API。
• columnsVisibilityApi:列の可視性の API。
• searchApi:検索の API。
• sortApi:種類の API。
• rowsApi:行の API
• paginationApi:ページネーションの API。
• rowSelectionApi:行選択の API。
• rowEditApi:行編集のAPI。
• rowVirtualizer:行バーチャライザーの API (完全なドキュメントは、 react-virtualを参照してください)。
• asyncApi:非同期機能の API。

構成

名前	タイプ	説明	デフォルト値
行IDフィールド	弦	行識別子として使用される行のデータ内のフィールドの名前 -一意である必要があります	「ID」
minColumnResizeWidth	番号	サイズ変更中のすべての列の最小幅 (「チェックボックス」列には適用されません)	70
minSearchChars	番号	検索が適用される前に入力する最小文字数	2
isHeaderSticky	ブール値	スクロール時に表のヘッダーのセルが上部に固定されるかどうか	真実
ページ付けされています	ブール値	ページネーション コントロールをフッターに表示するかどうか、および行データをページに分割するかどうかを決定します。	真実
列の並べ替えを有効にする	ブール値	列のドラッグ&ドロップによる位置変更を許可するかどうか	真実
ハイライト検索	ブール値	検索語を強調表示するかどうか	真実
表示検索	ブール値	ヘッダーに検索コンポーネントを表示するかどうか	真実
showRows情報	ブール値	行情報コンポーネント (フッターの左側にあります) を表示するかどうか	真実
showColumnVisibilityManager	ブール値	列の可視性管理ボタン (ヘッダーの右上にあります) を表示するかどうか	真実
ページサイズ	数値の配列	ページサイズのオプション	[20、50、100]
requestDebounceTimeout	番号	onRowsRequestプロパティをトリガーするためのデボーニング時間を定義します	300
isVirtualScroll	ブール値	パフォーマンスを向上させるために仮想スクロールで項目をレンダリングするかどうか (ページ内に多数の行がある場合に役立ちます)	真実
テーブルには選択があります	ブール値	テーブルに行の選択を制御するためのチェックボックス列があるかどうか	---
コンポーネント	物体	テーブルで使用されているコンポーネント (コンポーネントの完全なリストを参照)	{Header、Search、ColumnVisibility、HeaderCell、HeaderSelectionCell、Cell、EditorCell、SelectionCell、PlaceHolderCell、Loader、NoResults、Footer、Information、PageSize、Pagination}
追加の小道具	物体	内部コンポーネントに渡される追加の props (AdditionalProps の完全なリストを参照)	{}
アイコン	物体	テーブルで使用されているアイコン	{sortAscending、sortDescending、clearSelection、columnVisibility、検索、ローダー }
テキスト	物体	テーブルで使用されているテキスト	{ search、totalRows、rows、selected、rowsPerPage、page、of、prev、next、columnVisibility }

参照

名前	タイプ	説明
rgtRef	物体	ラッパー要素のrefオブジェクト
テーブル参照	物体	テーブルコンテナ要素のrefオブジェクト

列API

名前	タイプ	説明	使用法
列	配列	列の構成	---
可視列	配列	表示されている列	---
setColumns	関数	列を更新します	setColumns(columns)

列可視性API

名前	タイプ	説明	使用法
トグル列の可視性	関数	idによって列の表示/非表示を切り替えます	toggleColumnVisibility(column.id)

検索API

名前	タイプ	説明	使用法
検索テキスト	弦	検索用のテキスト	---
有効な検索テキスト	弦	検索されたテキストがminSearchCharsを渡さなかった場合は空の文字列となり、渡された場合はsearchTextと等しくなります。	---
setSearchText	関数	検索テキストを更新します	setSearchText('hello')
検索行	関数	列に定義された検索方法を使用して、検索テキストに基づいて行をフィルタリングします。	searchRows(rows)
値パス検索	関数	値が特定の列の検索に合格した場合に true を返します。	valuePassesSearch('hello', column)

ソートAPI

名前	タイプ	説明	使用法
選別	物体	ソートオブジェクトは、ソートする必要がある列のIDのcolId 、またはソートがない場合はnull 、およびソート方向を定義するisAsc保持します。	---
セットソート	関数	並べ替えオブジェクトを更新します	setSort({colId: 5, isAsc: false})
行の並べ替え	関数	列に定義された並べ替え方法を使用して、選択した方向に基づいて行を並べ替えます。	sortRows(rows)
トグル並べ替え	関数	列のソートステップを昇順、降順、なしに切り替えます。	toggleSort(column.id)

行API

名前	タイプ	説明	使用法
行	配列	行データ (同期モード - 検索フィルターと並べ替え後の行データ)	---
オリジナル行	配列	行データは変更されません (同期モード - 検索フィルター前の行データ)	---
setRows	関数	行を更新します	setRows(rows)
合計行数	番号	総行数	---
setTotalRows	関数	行の合計数を更新します	setTotalRows(1000)

ページネーションAPI

名前	タイプ	説明	使用法
ページ	番号	現在のページ番号	---
セットページ	関数	ページ番号を更新します	setPage(3)
ページサイズ	番号	選択したページサイズ	---
setPageSize	関数	ページサイズを更新します	setPageSize(20)
ページ行	配列	現在のページの行	---
合計ページ数	番号	総ページ数	---

rowSelectionApi

名前	タイプ	説明	使用法
selectedRowsIds	IDの配列	選択されたすべての行の ID	---
setSelectedRowsIds	関数	選択した行を更新します	setSelectedRowsIds([1,3,5])
行選択の切り替え	関数	idによって行の選択を切り替えます	toggleRowSelection(row.id)
getIsRowSelectable	関数	行を選択できるかどうかを決定します	getIsRowSelectable(row.id)
selectAll.mode	弦	すべて選択のタイプ。可能なモードは、ページ行の選択のみを処理するpage 、またはすべての行の選択を処理するallです。非同期フローを使用する場合、すべてのモードは使用可能なすべての行の選択を処理し、制御されたbatchSizeを持つページ モードはページ内のすべての使用可能な行の選択を処理します。	---
selectAll.disabled	ブール値	selectAll.mode に一致する選択可能な行がないため、「すべて選択」ボタンを無効にするかどうか	---
selectAll.checked	ブール値	selectAll.mode に一致するすべての行が選択されているかどうか	---
selectAll.indeterminate	ブール値	selectAll.mode に一致する行の一部のみが選択されるかどうか	---
selectAll.onChange	関数	selectAll.mode に一致するすべての行を選択/選択解除します。	selectAll.onChange()
selectAll.ref	参照	不定状態の自動設定を有効にするために「すべて選択」チェックボックスに追加できる参照	---

行編集API

名前	タイプ	説明	使用法
編集行	物体	現在編集中の行のデータ	---
editRowId	どれでも	現在編集中の行のID	---
getIsRowEditable	関数	行を編集できるかどうかを決定します	getIsRowEditable(row)
setEditRow	関数	現在編集中の行のデータを更新します。	setEditRow(row)
setEditRowId	関数	現在編集されている行の行IDを更新します。編集モードから戻すにはnullを渡すことができます。	setEditRowId(row.id)

非同期API

名前	タイプ	説明	使用法/デフォルト値
読み込み中です	ブール値	新しい行のリクエストがまだ保留中かどうか	---
マージ行アット	関数	「穴」をnullで埋めながら、特定のインデックスで行のarrayをマージします	mergeRowsAt(rows, moreRows, atIndex)
リセット行	関数	蓄積された行を削除し、新しいリクエストをトリガーします。	resetRows()
バッチサイズ	番号	onRowsRequestプロパティによってリクエストされる行の量を定義します	paginationApi.pageSize

方法...

同期/非同期

react-grid-table 4 つの異なるデータ モデルをサポートしています。

同期:

すべてのデータがローカルにある場合は、このフローを使用します。
rowsプロパティを使用してすべてのデータを渡すだけです。

必要な小道具:

名前	タイプ	説明
行*	オブジェクトの配列	行データ (詳細)

例：

 export const SyncedTable = ( ) => {

    const rows = getRows ( ) ;
    const columns = getColumns ( ) ;

    return (
        < GridTable
            columns = { columns }
            rows = { rows }
        / >
    )
} 

非同期 (制御されていない):

データを非同期で取得する必要があり、 react-grid-table内部的に管理する必要がある場合は、このフローを使用します。
すべてのデータは、 onRowsRequestプロパティを介してテーブルに提供されます。

必要な小道具:

名前	タイプ	説明
onRowsRequest*	非同期関数	{rows, totalRows} に解決される Promise を返す必要があります

例：

 export const AsyncUncontrolledTable = ( ) => {
    
    const columns = getColumns ( ) ;

    const onRowsRequest = async ( requestData , tableManager ) => {
        const response = await fetch ( `app/api/rows` , {
            method : 'post' ,
            body : {
                from : requestData . from ,
                to : requestData . to ,
                searchText : requestData . searchText ,
                sort : requestData . sort ,
            } ,
        } ) . then ( response => response . json ( ) ) . catch ( console . warn ) ;

        if ( ! response ?. items ) return ;
        
        return {
            rows : response . items ,
            totalRows : response . totalItems
        } ;
    }

    return (
        < GridTable
            columns = { columns }
            onRowsRequest = { onRowsRequest }
        / >
    )
} 

非同期 (制御):

データを非同期で取得する必要があり、 react-grid-table内部的に管理しながら、アプリ内の他の場所でも使用できるようにしたい場合は、このフローを使用します。
すべてのデータはonRowsRequestプロパティを介してテーブルに提供されますが、 rows 、 onRowsChange 、 totalRowsおよびonTotalRowsChangeプロパティを介して親コンポーネントによって制御されます。

必要な小道具:

名前	タイプ	説明
onRowsRequest*	非同期関数	{rows, totalRows} に解決される Promise を返す必要があります
行*	オブジェクトの配列	行データ (詳細)
onRowsChange*	関数	現在のデータを設定するために使用する必要があります
合計行数*	番号	現在のデータ長を含める必要があります
onTotalRowsChange*	関数	現在のデータ長を設定するために使用する必要があります

例：

 export const AsyncControlledTable = ( ) => {
    
    const columns = getColumns ( ) ;
    let [ rows , setRows ] = useState ( ) ;
    let [ totalRows , setTotalRows ] = useState ( ) ;

    const onRowsRequest = async ( requestData , tableManager ) => {
        const response = await fetch ( `app/api/rows` , {
            method : 'post' ,
            body : {
                from : requestData . from ,
                to : requestData . to ,
                searchText : requestData . searchText ,
                sort : requestData . sort ,
            } ,
        } ) . then ( response => response . json ( ) ) . catch ( console . warn ) ;

        if ( ! response ?. items ) return ;
        
        return {
            rows : response . items ,
            totalRows : response . totalItems
        } ;
    }

    return (
        < GridTable
            columns = { columns }
            onRowsRequest = { onRowsRequest }
            rows = { rows }
            onRowsChange = { setRows }
            totalRows = { totalRows }
            onTotalRowsChange = { setTotalRows }
        / >
    )
} 

非同期 (管理対象):

データを非同期でフェッチし、自分で管理する必要がある場合に使用します (同じデータをフェッチできる必要がある場所が他にある場合に便利です)。
すべてのデータはrowsプロパティを介してテーブルに提供され、 onRowsRequestプロパティを使用して更新する必要があります。
注: react-grid-table必ずしも同時データを要求するわけではありません。これは、データに「穴」が存在する可能性があることを意味します。適切な機能を確保するには、これらの「穴」を null/未定義の項目で埋める必要があります。

これを実現するには、以下を使用できます。

 let mergedRows = tableManager . asyncApi . mergeRowsAt ( rows , fetchedRows , at )

必要な小道具:

名前	タイプ	説明
onRowsRequest*	非同期関数	リクエストに従って行プロパティを更新する必要があります
行*	オブジェクトの配列	行データ (詳細)
合計行数*	番号	現在のデータ長を含める必要があります
onRowsReset*	関数	現在のデータをリセットするために使用する必要があります。 sort または searchText が変更されたときに呼び出されます

例：

 const controller = new AbortController ( ) ;

export const AsyncManagedTable = ( ) => {
    
    const columns = getColumns ( ) ;
    let rowsRef = useRef ( [ ] ) ;
    let [ totalRows , setTotalRows ] = useState ( ) ;

    const onRowsRequest = async ( requestData , tableManager ) => {
        const response = await fetch ( `app/api/rows` , {
            method : 'post' ,
            body : {
                from : requestData . from ,
                to : requestData . to ,
                searchText : requestData . searchText ,
                sort : requestData . sort ,
            } ,
            signal : controller . signal ,
        } ) . then ( response => response . json ( ) ) . catch ( console . warn ) ;

        if ( ! response ?. items ) return ;

        rowsRef . current = tableManager . asyncApi . mergeRowsAt ( rowsRef . current , response . items , requestData . from ) ;

        setTotalRows ( response . totalItems ) ;
    }

    const onRowsReset = ( ) => {
        rowsRef . current = [ ] ;
        setTotalRows ( ) ;
        controller . abort ( ) ;
    }

    return (
        < GridTable
            columns = { columns }
            rows = { rowsRef . current }
            onRowsRequest = { onRowsRequest }
            onRowsReset = { onRowsReset }
            totalRows = { totalRows }
            requestDebounceTimeout = { 500 }
        / >
    )
}

行編集

行の編集は、列構成のcellRendererプロパティを使用して編集ボタンをレンダリングすることで実行できます。クリックすると、 editRowIdプロパティが制御され、テーブルはeditableとして定義されている列の編集コンポーネントをレンダリングします (デフォルトで true)。 、デフォルトでテキスト入力をレンダリングするeditorCellRendererで定義されているとおりです。

例：

 // state
const [ rowsData , setRows ] = useState ( MOCK_DATA ) ;

// 'editRowId' can also be controlled.
// if using controlled state, you can call your 'setEditRowId' instead of 'tableManager.rowEditApi.setEditRowId' to set it directly on your state.
// the table will typicaly call 'onEditRowIdChange' to reset it if 'searchText', 'sort' or 'page' has changed.
// const [editRowId, setEditRowId] = useState(null)

// columns
let columns = [
    ... ,
    {
        id : 'my-buttons-column' ,
        width : 'max-content' ,
        pinned : true ,
        sortable : false ,
        resizable : false ,
        cellRenderer : ( { tableManager , value , data , column , colIndex , rowIndex } ) => (
            < button 
                style = { { marginLeft : 20 } } 
                onClick = { e => tableManager . rowEditApi . setEditRowId ( data . id ) }
            > &#x270E; < / button >
        ) ,
        editorCellRenderer : ( { tableManager , value , data , column , colIndex , rowIndex , onChange } ) => (
            < div style = { { display : 'inline-flex' } } >
                < button 
                    style = { { marginLeft : 20 } } 
                    onClick = { e => tableManager . rowEditApi . setEditRowId ( null ) }
                > &#x2716; < / button >
                < button 
                    style = { { marginLeft : 10 , marginRight : 20 } } 
                    onClick = { e => {
                        let rowsClone = [ ... rowsData ] ;
                        let updatedRowIndex = rowsClone . findIndex ( r => r . id === data . id ) ;
                        rowsClone [ updatedRowIndex ] = data ;

                        setRowsData ( rowsClone ) ;
                        tableManager . rowEditApi . setEditRowId ( null ) ;
                    }
                } > &#x2714; < / button >
            < / div >
        )
    }
] ;

// render
< GridTable 
    columns = { columns }
    rows = { rowsData } 
    //editRowId={editRowId}
    //onEditRowIdChange={setEditRowId}
    . . .
/ >

文字列以外の値を保持する列の場合は、更新された値が元の値をオーバーライドしないように、列にsetValue関数を定義する必要があります。

例：

setValue: ( { value , data , setRow , column } ) => {
    // value: '35', 
    // data: { ..., columnField: { fieldToUpdate: '27' }} 
    let rowClone = { ... data } ;
    rowClone [ column . field ] . fieldToUpdate = value ;
    setRow ( rowClone ) ;
}

スタイリング

スタイル設定は、簡単にオーバーライドできる CSS クラスによって行われます。テーブルのコンポーネントは、あらゆる状況に対応できる事前定義されたクラスにマップされます。また、 classNameプロパティを使用して、 columns構成の列ごとに独自のカスタム クラスを追加できます。

成分	利用可能なすべてのクラス セレクター
ラッパー	rgt-wrapper
ヘッダ	rgt-header-container
検索	rgt-search-container rgt-search-label rgt-search-icon rgt-search-input rgt-search-highlight
列可視性マネージャー	rgt-columns-manager-wrapper rgt-columns-manager-button rgt-columns-manager-button-active rgt-columns-manager-popover rgt-columns-manager-popover-open rgt-columns-manager-popover-row rgt-columns-manager-popover-title rgt-columns-manager-popover-body
テーブル	rgt-container rgt-container-overlay
ヘッダーセル	rgt-cell-header rgt-cell-header-[column.field] rgt-cell-header-checkbox rgt-cell-header-virtual-col rgt-cell-header-sortable / rgt-cell-header-not-sortable rgt-cell-header-sticky rgt-cell-header-resizable / rgt-cell-header-not-resizable rgt-cell-header-searchable / rgt-cell-header-not-searchable rgt-cell-header-pinned rgt-cell-header-pinned-left / rgt-cell-header-pinned-right rgt-cell-header-inner-not-pinned-right [column.className] rgt-cell-header-inner rgt-cell-header-inner-checkbox rgt-resize-handle rgt-sort-icon rgt-sort-icon-ascending / rgt-sort-icon-descending rgt-column-sort-ghost
細胞	rgt-cell rgt-cell-[column.field] rgt-row-[rowNumber] rgt-row-odd / rgt-row-even rgt-row-hover rgt-row-selectable / rgt-row-not-selectable rgt-cell-inner rgt-cell-checkbox rgt-cell-virtual rgt-cell-pinned rgt-cell-pinned-left / rgt-cell-pinned-right rgt-cell-editor rgt-cell-editor-inner rgt-cell-editor-input rgt-row-selected rgt-placeholder-cell rgt-row-edit
フッター	rgt-footer rgt-footer-right-container
ページネーション	rgt-footer-pagination rgt-footer-pagination-button rgt-footer-pagination-input-container rgt-footer-page-input
情報	rgt-footer-items-information rgt-footer-clear-selection-button
ページサイズ	rgt-footer-page-size rgt-footer-page-size-select
(ユーティリティ)	rgt-text-truncate rgt-clickable rgt-disabled rgt-disabled-button rgt-flex-child

ライセンス

©マサチューセッツ工科大学