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