react grid table下載 - 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 ;

文件

主要部件

標題（可選|可自訂）：搜尋和列可見性管理。

表頭：排序、調整大小和列重新排序。

TABLE-BODY：顯示資料/載入器/無結果、行編輯和行選擇。

頁尾（可選 | 可自訂）：行資訊、每頁行數和分頁。

道具

姓名	類型	描述	預設值
列*	物件數組	列配置（詳細資訊）	[ ]
列	物件數組	行數據（詳細資訊）	[ ]
選定的行 ID	id 數組	所有選定行的 id（詳細資訊）	[ ]
搜尋文字	細繩	用於搜尋的文本	””
getIsRowSelectable	功能	傳回目前行的行選擇是可選擇還是停用的回呼函數	`row => true`
取得行是否可編輯	功能	傳回是否允許目前行進行行編輯的回呼函數	`row => true`
編輯行ID	任何	應切換到內嵌編輯模式的行的 ID（有關行編輯的更多詳細資訊）	無效的
頁	數位	目前頁碼	1
頁面大小	數位	選定的頁面尺寸	20
種類	目的	排序配置。接受`colId`作為應排序列的 id，並`isAsc`來定義排序方向。例如： `{ colId: 'some-column-id', isAsc: true }` ，要取消排序，只需將`colId`傳遞為`null`	{ }
正在載入	布林值	是否顯示載入器	錯誤的

配置道具

姓名	類型	描述	預設值
行ID字段	細繩	行資料中應用作行標識符的欄位名稱 - 必須是唯一的	'ID'
最小列調整寬度	數位	調整大小時所有列的最小寬度（不適用於「複選框」列）	70
最小搜尋字元數	數位	應用搜尋之前輸入的最少字符	2
isHeaderSticky	布林值	捲動時表格標題儲存格是否會黏在頂部	真的
已分頁	布林值	決定分頁控制項是否應顯示在頁尾以及行資料是否應拆分為頁面	真的
啟用列重新排序	布林值	是否允許列拖放以重新定位	真的
高亮搜尋	布林值	是否突出顯示搜尋詞	真的
顯示搜尋	布林值	是否在標題中顯示搜尋元件	真的
顯示行資訊	布林值	是否顯示行資訊元件（位於頁尾左側）	真的
顯示列可見性管理器	布林值	是否顯示列可見性管理按鈕（位於標題右上角）	真的
頁面大小	數位數組	頁面大小選項	[20, 50, 100]
是虛擬滾動	布林值	是否在虛擬滾動中渲染項目以提高效能（當頁面中有很多行時很有用）	真的
全選模式	細繩	控制「全部選擇」的類型。可用選項包括`page`以僅選擇/取消選擇目前頁面中的行，或`all`以選擇/取消選擇所有頁面中的所有行。如果使用非同步流程，則`all`選項將選擇所有可用行，而`page`選項與`batchSize`結合使用，將選擇/取消選擇頁面中的所有可用行	'頁'
圖示	節點物件	自訂圖示配置	{ 排序升序、排序降序、clearSelection、columnVisibility、搜尋、載入器 }
文字	目的	所有 UI 文字的配置，對於翻譯或自訂文字很有用	{ search: '搜尋：', totalRows: '總行數：', rows: '行數：', selected: '選定', rowsPerPage: '每頁行數：', page: '頁數：', of : 'of' , prev: '上一頁', next: '下一頁', columnVisibility: '列可見性' }
成分	目的	此道具可讓您使用自己的自訂元件覆蓋內部元件（請參閱支援元件的完整清單）	{ 預設元件 }
額外道具	目的	此道具使您能夠將道具傳遞給表的組件/模組（請參閱支援的 extraProps 的完整清單）	`additionalProps={{ header: { ... } }}`

活動道具

姓名	類型	描述	用法
列更改時	功能	當`columns`更改時觸發	`columns => { ... }`
onSelectedRowsChange	功能	當行選擇更改時觸發	`selectedRowsIds => { ... }`
頁面更改	功能	頁面更改時觸發	`nextPage => { ... }`
頁面大小改變	功能	當頁面大小改變時觸發	`newPageSize => { ... }`
搜尋文字更改	功能	搜尋文字變更時觸發	`searchText => { ... }`
排序更改時	功能	排序更改時觸發	`({colId, isAsc}) => { ... }`
點選行時	功能	點擊一行時觸發	`({ rowIndex, data, column, isEdit, event }, tableManager) => { ... }`
onEditRowIdChange	功能	`rowEditId`更改時觸發	`rowEditId => { ... }`
載入時	功能	`tableManager`初始化時觸發（詳情）	`tableManager => { ... }`
onColumnResizeStart	功能	當列調整大小開始時觸發	`({event, target, column}) => { ... }`
調整列大小	功能	當列調整大小時觸發	`({event, target, column}) => { ... }`
onColumnResizeEnd	功能	當列調整大小結束時觸發	`({event, target, column}) => { ... }`
onColumnReorderStart	功能	拖曳列時觸發。 React-sortable-hoc 使用`onSortStart`屬性提供的排序數據	`(sortData, tableManager) => { ... }`
onColumnReorderEnd	功能	僅當列更改其位置時才會在列下降時觸發。 React-sortable-hoc 使用`onSortEnd`屬性提供的排序數據	`(sortData, tableManager) => { ... }`

異步道具

姓名	類型	描述	用法/預設值
行請求	功能	當應該獲取新行時觸發	請參閱範例
行更改時	功能	當行發生更改時觸發	請參閱範例
總行數更改	功能	當總行數改變時觸發	請參閱範例
行重置	功能	當需要重置累積行時（搜尋或排序時）觸發	請參閱範例
批量大小	數位	定義`onRowsRequest`屬性將請求的行數	表的頁大小
請求反跳超時	數位	定義觸發`onRowsRequest`屬性的去抖時間量	300
總行數	數位	總行數	---

道具 - 詳細

列

類型：物件數組。

此屬性定義了列配置。

每列（「複選框」列除外）都支援以下屬性：

姓名	類型	描述	預設值
ID*	任何	列的唯一標識符，將其設為“複選框”將生成行選擇列（有關複選框列的更多詳細資訊）	---
場地	細繩	行資料中的欄位名稱	---
標籤	細繩	要在標題儲存格中顯示的標籤	`field`屬性
固定的	布林值	是否將列固定到側面，僅在第一列和最後一列中受支援	錯誤的
可見的	布林值	是否顯示該列	真的
類別名	細繩	所有列單元格的自訂類別選擇器	””
寬度	細繩	網格值中列的初始寬度（完整值清單）	“200 像素”
最小調整寬度	數位	調整大小時列的最小寬度	`minColumnResizeWidth`屬性
最大調整寬度	數字，空	調整大小時列的最大寬度	無效的
獲取值	功能	用於獲取單元格值（當單元格值不是字串時有用 - 詳細資訊）	`({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 )`	---
headerCell渲染器	功能	用於自訂渲染標題單元格元件`({ tableManager, column }) => ( children )`	---
編輯單元渲染器	功能	用於在編輯模式下自訂渲染單元格元件`({ tableManager, value, data, column, colIndex, rowIndex, onChange }) => ( children )`	---
佔位渲染器	功能	用於自訂渲染載入新行時顯示的單元格佔位符元件`({ 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為「checkbox」的列即可。

複選框列支援以下屬性：

姓名	類型	描述	預設值
ID*	'複選框'	將產生行選擇列	---
固定的	布林值	是否將列固定到側面，僅在第一列和最後一列中受支援	錯誤的
可見的	布林值	是否顯示該列	真的
類別名	細繩	所有列單元格的自訂類	””
寬度	細繩	網格值中列的初始寬度（完整值清單）	“最大內容”
最小調整寬度	數位	調整大小時列的最小寬度	0
最大調整寬度	數字，空	調整大小時列的最大寬度	無效的
可調整大小	布林值	是否允許調整列大小	錯誤的
細胞渲染器	功能	用於自訂渲染複選框單元格	`({ tableManager, value, data, column, colIndex, rowIndex, onChange, disabled}) => ( <input type="checkbox" onChange={ onChange } checked={ value } disabled={ disabled } /> )`
headerCell渲染器	功能	用於自訂呈現複選框標題單元格	`({ 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 }) => string

例子：

假設單元格的欄位值是一個物件：

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

用於將名字和姓氏顯示為全名的getValue函數為：

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

傳回值將用於搜尋、排序等...

成分

類型：對象。

此道具使您能夠使用自己的自訂元件覆蓋內部組件。

所有元件均已匯出，因此您可以從任何地方匯入它們，但您將負責向它們提供道具：

成分	所需道具	可選道具
標頭	`tableManager`	---
搜尋	`tableManager`	`onChange` `value`
列可見性	`tableManager`	`onChange` `columns`
標題單元格	`tableManager`	`column`
標頭選擇單元格	`tableManager`	`column` `ref` `onChange` `checked` `disabled`
細胞	`tableManager`	`value`
編輯單元格	`tableManager`	`value` `data` `column` `colIndex` `rowIndex` `onChange`
選擇單元格	`tableManager`	`value` `onChange` `disabled`
佔位單元	`tableManager`	---
裝載機	`tableManager`	---
沒有結果	`tableManager`	---
拖曳手柄	---	---
頁尾	`tableManager`	---
資訊	`tableManager`	`totalCount` `pageSize` `pageCount` `selectedCount`
頁面大小	`tableManager`	`value` `onChange` `options`
分頁	`tableManager`	`page` `onChange`

範例：覆蓋標頭組件

 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 } }
        / >
    )
}

額外道具

類型：對象。

此道具使您能夠將道具傳遞給內部組件/模組。

將 props 傳遞給 cell 元件的範例：

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

您可以將 props 傳遞給的元件/模組清單：

標頭
搜尋
列可見性
標題單元格
標頭選擇單元格
細胞
編輯單元格
選擇單元格
佔位單元格
頁尾
資訊
頁面大小
分頁
行虛擬化器

表格管理器

這是內部元件使用的 API 對象，您可以使用它在元件外部執行 API 提供的任何操作。

API結構：

id：每個表組件的唯一識別碼。
isMounted：表格是否已安裝。
isInitialized：表格是否已初始化。所有組件初始化後將設定為 true。
mode: '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'
最小列調整寬度	數位	調整大小時所有列的最小寬度（不適用於「複選框」列）	70
最小搜尋字元數	數位	應用搜尋之前輸入的最少字符	2
isHeaderSticky	布林值	捲動時表格標題儲存格是否會黏在頂部	真的
已分頁	布林值	決定分頁控制項是否應顯示在頁尾以及行資料是否應拆分為頁面	真的
啟用列重新排序	布林值	是否允許列拖放以重新定位	真的
高亮搜尋	布林值	是否突出顯示搜尋詞	真的
顯示搜尋	布林值	是否在標題中顯示搜尋元件	真的
顯示行資訊	布林值	是否顯示行資訊元件（位於頁尾左側）	真的
顯示列可見性管理器	布林值	是否顯示列可見性管理按鈕（位於標題右上角）	真的
頁面大小	數位數組	頁面大小選項	[20, 50, 100]
請求反跳超時	數位	定義觸發`onRowsRequest`屬性的去抖動時間量	300
是虛擬滾動	布林值	是否在虛擬滾動中渲染項目以提高效能（當頁面中有很多行時很有用）	真的
表有選擇	布林值	表是否有一個複選框列來控制行選擇	---
成分	目的	表格使用的組件（請參閱組件的完整清單）	{標題、搜尋、ColumnVisibility、HeaderCell、HeaderSelectionCell、儲存格、EditorCell、SelectionCell、PlaceHolderCell、載入器、NoResults、頁尾、資訊、頁面大小、分頁}
額外道具	目的	傳遞給內部元件的附加屬性（請參閱附加屬性的完整清單）	{}
圖示	目的	表使用的圖標	{ 排序升序、排序降序、clearSelection、columnVisibility、搜尋、載入器 }
文字	目的	表中使用的文本	{ 搜索，totalRows，行，選定，rowsPerPage，頁，of，上一個，下一個，columnVisibility }

參考文獻

姓名	類型	描述
右參考值	目的	包裝元素的`ref`對象
表引用	目的	表容器元素的`ref`對象

列API

姓名	類型	描述	用法
列	大批	列配置	---
可見列	大批	可見的列	---
設定列	功能	更新列	`setColumns(columns)`

列可見性API

姓名	類型	描述	用法
切換列可見性	功能	透過`id`切換列的可見性	`toggleColumnVisibility(column.id)`

搜尋API

姓名	類型	描述	用法
搜尋文字	細繩	用於搜尋的文本	---
有效搜尋文本	細繩	如果搜尋的文字沒有通過`minSearchChars` ，則為空字串，如果通過，則等於`searchText`	---
設定搜尋文字	功能	更新搜尋文字	`setSearchText('hello')`
搜尋行	功能	使用列上定義的搜尋方法根據搜尋文字過濾行	`searchRows(rows)`
價值通行證搜尋	功能	如果某個值通過特定列的搜索，則返回 true	`valuePassesSearch('hello', column)`

排序API

姓名	類型	描述	用法
種類	目的	排序物件保存`colId`作為應該排序的列的 id，或在沒有排序時為`null` ，以及定義排序方向的`isAsc`	---
設定排序	功能	更新排序對象	`setSort({colId: 5, isAsc: false})`
排序行	功能	使用列上定義的排序方法根據所選方向對行進行排序	`sortRows(rows)`
切換排序	功能	將列的排序步驟從升序、降序和無切換	`toggleSort(column.id)`

行API

姓名	類型	描述	用法
列	大批	行資料（在同步模式下 - 搜尋篩選器和排序後的行資料）	---
原始行	大批	行資料未受影響（在同步模式下 - 搜尋過濾器之前的行資料）	---
設定行	功能	更新行	`setRows(rows)`
總行數	數位	總行數	---
設定總行數	功能	更新總行數	`setTotalRows(1000)`

分頁API

姓名	類型	描述	用法
頁	數位	目前頁碼	---
設定頁面	功能	更新頁碼	`setPage(3)`
頁面大小	數位	選定的頁面尺寸	---
設定頁面大小	功能	更新頁面大小	`setPageSize(20)`
頁行數	大批	目前頁中的行	---
總頁數	數位	總頁數	---

行選擇API

姓名	類型	描述	用法
選定的行 ID	id 數組	所有選定行的 id	---
設定選定的行 ID	功能	更新選定的行	`setSelectedRowsIds([1,3,5])`
切換行選擇	功能	透過`id`切換行的選擇	`toggleRowSelection(row.id)`
getIsRowSelectable	功能	確定是否可以選擇一行	`getIsRowSelectable(row.id)`
全選模式	細繩	select all 的類型，可能的模式是`page`只處理頁面行的選擇，或是`all`處理所有行的選擇。如果使用非同步流程，所有模式將處理所有可用行的選擇，而具有受控`batchSize`的頁面模式將處理頁面中所有可用行的選擇	---
全選.禁用	布林值	是否應停用全選按鈕，因為沒有與 selectAll.mode 相符的可選行	---
全選.選中	布林值	是否選擇與 selectAll.mode 相符的所有行	---
selectAll.不確定	布林值	是否只選擇與 selectAll.mode 相符的部分行	---
selectAll.onChange	功能	選擇/取消選擇與 selectAll.mode 相符的所有行	`selectAll.onChange()`
全選.ref	參考	可新增至全選複選框以啟用不確定狀態自動設定的引用	---

行編輯API

姓名	類型	描述	用法
編輯行	目的	目前正在編輯的行的數據	---
編輯行ID	任何	目前正在編輯的行的 id	---
取得行是否可編輯	功能	確定是否可以編輯行	`getIsRowEditable(row)`
設定編輯行	功能	更新目前編輯行的行數據	`setEditRow(row)`
設定編輯行ID	功能	更新目前編輯行的行id，可以傳遞`null`從編輯模式切換回來	`setEditRowId(row.id)`

非同步API

姓名	類型	描述	用法/預設值
正在載入	布林值	新行請求是否仍待處理	---
合併行	功能	合併特定索引處的行`array` ，同時用`null`填滿“洞”	`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} 的承諾

例子：

 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} 的承諾
行*	物件數組	行數據（詳細資訊）
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不一定要求並發數據，這意味著數據中可能存在「漏洞」。這些「漏洞」需要用空/未定義的項目來填充，以確保功能正常。

為了實現這一點，您可以使用：

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

所需道具：

姓名	類型	描述
onRowsRequest*	非同步函數	應根據請求更新 rows 屬性
行*	物件數組	行數據（詳細資訊）
總行數*	數位	應包含當前資料長度
行重置*	功能	應該用於重置當前數據。當 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-單元格`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`