react grid table
V.1.1.2
Модульная таблица, основанная на сетке 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 опораcheckboxrowscomponents опорыadditionalProps реквизитtableManagerЗАГОЛОВОК (необязательно | настраиваемый): поиск и управление видимостью столбцов.
ЗАГОЛОВОК ТАБЛИЦЫ: сортировка, изменение размера и порядок столбцов.
TABLE-BODY: отображение данных/загрузчика/нет результатов, редактирование строк и выбор строк.
НИЖНИЙ ФОТЕР (необязательно | настраиваемый): информация о строках, количество строк на странице и нумерация страниц.
| имя | тип | описание | значение по умолчанию |
|---|---|---|---|
| столбцы* | массив объектов | конфигурация столбцов (подробнее) | [ ] |
| ряды | массив объектов | данные строк (подробности) | [ ] |
| выбранныеRowsIds | массив идентификаторов | идентификаторы всех выбранных строк (подробности) | [ ] |
| поискТекст | нить | текст для поиска | "" |
| getIsRowSelectable | функция | функция обратного вызова, которая возвращает, должен ли выбор строки для текущей строки быть выбран или отключен | row => true |
| getIsRowEditable | функция | функция обратного вызова, которая возвращает, следует ли разрешить редактирование текущей строки или нет | row => true |
| редактироватьRowId | любой | идентификатор строки, которая должна переключиться в режим встроенного редактирования (подробнее о редактировании строк) | нулевой |
| страница | число | номер текущей страницы | 1 |
| размер страницы | число | выбранный размер страницы | 20 |
| сортировать | объект | сортировать конфиг. принимает colId в качестве идентификатора столбца, который необходимо отсортировать, и isAsc для определения направления сортировки. пример: { colId: 'some-column-id', isAsc: true } , для отмены сортировки просто передайте colId как null | { } |
| isLoading | логическое значение | отображать ли загрузчик | ЛОЖЬ |
| имя | тип | описание | значение по умолчанию |
|---|---|---|---|
| строкаидфилд | нить | имя поля в данных строки, которое должно использоваться в качестве идентификатора строки - должно быть уникальным | 'идентификатор' |
| minColumnResizeWidth | число | минимальная ширина для всех столбцов при изменении размера (не применяется к столбцу «флажок») | 70 |
| minSearchChars | число | минимальное количество символов, которое нужно ввести, прежде чем будет применен поиск | 2 |
| isHeaderSticky | логическое значение | будут ли ячейки заголовка таблицы прилипать к верху при прокрутке или нет | истинный |
| isPaginated | логическое значение | определить, должны ли элементы управления нумерацией отображаться в нижнем колонтитуле и должны ли данные строк разделяться на страницы | истинный |
| EnableColumnsReorder | логическое значение | разрешить ли перетаскивание столбца для изменения положения | истинный |
| ВыделитеПоиск | логическое значение | нужно ли выделять поисковый запрос | истинный |
| showПоиск | логическое значение | показывать ли компонент поиска в заголовке | истинный |
| showRowsInformation | логическое значение | показывать ли информационный компонент строк (расположен в левой части нижнего колонтитула) | истинный |
| showColumnVisibilityManager | логическое значение | отображать ли кнопку управления видимостью столбцов (расположена в правом верхнем углу заголовка) | истинный |
| Размеры страниц | массив чисел | параметры размера страницы | [20, 50, 100] |
| isVirtualScroll | логическое значение | следует ли отображать элементы в виртуальной прокрутке для повышения производительности (полезно, если на странице много строк) | истинный |
| выберите AllMode | нить | управляет типом «Все выделение». Доступные варианты: page , чтобы выбрать/отменить выбор только строк на текущей странице, или all , чтобы выбрать/отменить выбор всех строк на всех страницах. При использовании асинхронного потока параметр all выберет все доступные строки, а параметр page в сочетании с batchSize выберет или отменит выбор всех доступных строк на странице. | 'страница' |
| значки | объект узлов | настройка пользовательских значков | { sortAscending, sortDescending, ClearSelection, ColumnVisibility, поиск, загрузчик } |
| тексты | объект | конфигурация для всего текста пользовательского интерфейса, полезна для перевода или настройки текста | { search: 'Поиск:', totalRows: 'Всего строк:', rows: 'Строки:', выбрано: 'Выбрано', rowsPerPage: 'Строков на странице:', страница: 'Страница:', of: 'of' , предыдущая: «Предыдущая», следующая: «Далее», columnsVisibility: «Видимость столбца» } |
| компоненты | объект | Эта опора дает вам возможность переопределить внутренние компоненты своими собственными компонентами (см. полный список поддерживаемых компонентов). | { Компоненты по умолчанию } |
| дополнительные реквизиты | объект | Этот реквизит дает вам возможность передавать реквизиты компонентам/модулям таблицы (см. полный список поддерживаемых дополнительных реквизитов). | additionalProps={{ header: { ... } }} |
| имя | тип | описание | использование |
|---|---|---|---|
| onColumnsChange | функция | срабатывает, когда columns были изменены | columns => { ... } |
| onSelectedRowsChange | функция | срабатывает, когда выбор строк был изменен | selectedRowsIds => { ... } |
| onPageChange | функция | срабатывает при изменении страницы | nextPage => { ... } |
| onPageSizeChange | функция | срабатывает при изменении размера страницы | newPageSize => { ... } |
| onSearchTextChange | функция | срабатывает при изменении текста поиска | searchText => { ... } |
| onSortChange | функция | срабатывает при изменении сортировки | ({colId, isAsc}) => { ... } |
| onRowClick | функция | срабатывает при нажатии на строку | ({ rowIndex, data, column, isEdit, event }, tableManager) => { ... } |
| онедитровидчанже | функция | срабатывает при изменении rowEditId | rowEditId => { ... } |
| при загрузке | функция | срабатывает при инициализации tableManager (подробности) | tableManager => { ... } |
| onColumnResizeStart | функция | срабатывает, когда начинается изменение размера столбца | ({event, target, column}) => { ... } |
| onColumnResize | функция | срабатывает при изменении размера столбца | ({event, target, column}) => { ... } |
| onColumnResizeEnd | функция | срабатывает, когда изменение размера столбца закончилось | ({event, target, column}) => { ... } |
| onColumnReorderStart | функция | триггеры при перетаскивании столбца. данные сортировки, предоставленные с помощью реакции-сортировки-hoc с использованием реквизита onSortStart | (sortData, tableManager) => { ... } |
| onColumnReorderEnd | функция | срабатывает при падении столбца и только в том случае, если столбец изменил свое положение. данные сортировки, предоставленные с помощью реакции-сортировки-hoc с использованием реквизита onSortEnd | (sortData, tableManager) => { ... } |
| имя | тип | описание | использование/значение по умолчанию |
|---|---|---|---|
| onRowsRequest | функция | срабатывает, когда необходимо получить новые строки | см. пример |
| onRowsChange | функция | срабатывает, когда строки изменились | см. пример |
| onTotalRowsChange | функция | срабатывает, когда общее количество строк изменилось | см. пример |
| onRowsReset | функция | срабатывает, когда необходимо сбросить накопленные строки (при поиске или сортировке) | см. пример |
| размер партии | число | определяет количество строк, которые будут запрошены реквизитом onRowsRequest | размер страницы таблицы |
| запросDebounceTimeout | число | определяет количество времени устранения дребезга для запуска свойства onRowsRequest | 300 |
| всего строк | число | общее количество строк | --- |
Тип: массив объектов.
Этот реквизит определяет конфигурацию столбцов.
Каждый столбец (кроме столбца «флажок») поддерживает следующие свойства:
| имя | тип | описание | значение по умолчанию |
|---|---|---|---|
| идентификатор* | любой | уникальный идентификатор столбца, установка для него значения «флажок» приведет к созданию столбца выбора строк (подробнее о столбце флажка) | --- |
| поле | нить | имя поля, как в данных строки | --- |
| этикетка | нить | метка для отображения в ячейке заголовка | свойство field |
| закрепленный | логическое значение | будет ли столбец закреплен сбоку, поддерживается только в первом и последнем столбцах | ЛОЖЬ |
| видимый | логическое значение | отображать ли столбец | истинный |
| имя класса | нить | собственный селектор классов для всех ячеек столбца | "" |
| ширина | нить | начальная ширина столбца в значениях сетки (полный список значений) | "200 пикселей" |
| minResizeWidth | число | минимальная ширина столбца при изменении размера | Свойство 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; } |
| CellRenderer | функция | используется для пользовательского рендеринга компонента ячейки ({ tableManager, value, data, column, colIndex, rowIndex }) => ( children ) | --- |
| заголовокCellRenderer | функция | используется для пользовательского рендеринга компонента ячейки заголовка ({ tableManager, column }) => ( children ) | --- |
| редакторCellRenderer | функция | используется для пользовательского рендеринга компонента ячейки в режиме редактирования ({ 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 «флажок».
Столбец флажка поддерживает следующие свойства:
| имя | тип | описание | значение по умолчанию |
|---|---|---|---|
| идентификатор* | 'флажок' | сгенерирует столбец выбора строк | --- |
| закрепленный | логическое значение | будет ли столбец закреплен сбоку, поддерживается только в первом и последнем столбцах | ЛОЖЬ |
| видимый | логическое значение | отображать ли столбец | истинный |
| имя класса | нить | собственный класс для всех ячеек столбца | "" |
| ширина | нить | начальная ширина столбца в значениях сетки (полный список значений) | "макс-контент" |
| minResizeWidth | число | минимальная ширина столбца при изменении размера | 0 |
| МаксРесайзеВидс | число, ноль | максимальная ширина столбца при изменении размера | нулевой |
| изменяемый размер | логическое значение | разрешить ли изменение размера столбца | ЛОЖЬ |
| CellRenderer | функция | используется для пользовательской визуализации ячейки флажка | ({ tableManager, value, data, column, colIndex, rowIndex, onChange, disabled}) => ( <input type="checkbox" onChange={ onChange } checked={ value } disabled={ disabled } /> ) |
| заголовокCellRenderer | функция | используется для пользовательской визуализации ячейки заголовка флажка | ({ 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, columns, rowData }) => строка
Пример:
Допустим, значение поля для ячейки является объектом:
{ ... , fullName: {firstName: 'some-first-name', lastName: 'some-last-name'} } ,
Его функция getValue для отображения имени и фамилии как полного имени будет такой:
getValue: ({ value }) => value.firstName + ' ' + value.lastName
Возвращенное значение будет использоваться для поиска, сортировки и т. д.
Тип: объект.
Эта опора дает вам возможность переопределить внутренние компоненты своими собственными компонентами.
Все компоненты экспортируются, поэтому вы сможете импортировать их откуда угодно, но вы будете нести ответственность за предоставление им реквизитов:
| компонент | необходимый реквизит | дополнительный реквизит |
|---|---|---|
| Заголовок | tableManager | --- |
| Поиск | tableManager | value onChange |
| СтолбецВидимость | tableManager | columns onChange |
| ЗаголовокЯчейка | tableManager | column |
| ЗаголовокSelectionCell | tableManager | ref column onChange checked disabled |
| Клетка | tableManager | value |
| РедакторCell | tableManager | column data value colIndex rowIndex onChange |
| SelectionCell | tableManager | value disabled onChange |
| МестоДержательЯчейка | tableManager | --- |
| Погрузчик | tableManager | --- |
| Нет результатов | tableManager | --- |
| ПеретащитеHandle | --- | --- |
| Нижний колонтитул | 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 } }
/ >
)
}Тип: объект.
Этот реквизит дает вам возможность передавать реквизиты внутренним компонентам/модулям.
Пример Передача реквизита в компонент ячейки:
additionalProps = { { cell : { ... } , ... } }Список компонентов/модулей, которым можно передать реквизиты:
Это объект API, используемый внутренними компонентами. Вы можете использовать его для выполнения любых действий, предоставляемых API, вне компонента.
Структура API:
| имя | тип | описание | значение по умолчанию |
|---|---|---|---|
| строкаидфилд | нить | имя поля в данных строки, которое должно использоваться в качестве идентификатора строки - должно быть уникальным | 'идентификатор' |
| minColumnResizeWidth | число | минимальная ширина для всех столбцов при изменении размера (не применяется к столбцу «флажок») | 70 |
| minSearchChars | число | минимальное количество символов, которое нужно ввести, прежде чем будет применен поиск | 2 |
| isHeaderSticky | логическое значение | будут ли ячейки заголовка таблицы прилипать к верху при прокрутке или нет | истинный |
| isPaginated | логическое значение | определить, должны ли элементы управления нумерацией отображаться в нижнем колонтитуле и должны ли данные строк разделяться на страницы | истинный |
| EnableColumnsReorder | логическое значение | разрешить ли перетаскивание столбца для изменения положения | истинный |
| ВыделитеПоиск | логическое значение | нужно ли выделять поисковый запрос | истинный |
| showПоиск | логическое значение | показывать ли компонент поиска в заголовке | истинный |
| showRowsInformation | логическое значение | показывать ли информационный компонент строк (расположен в левой части нижнего колонтитула) | истинный |
| showColumnVisibilityManager | логическое значение | отображать ли кнопку управления видимостью столбцов (расположена в правом верхнем углу заголовка) | истинный |
| Размеры страницы | массив чисел | параметры размера страницы | [20, 50, 100] |
| запросDebounceTimeout | число | определяет время отключения для запуска свойства onRowsRequest | 300 |
| isVirtualScroll | логическое значение | следует ли отображать элементы в виртуальной прокрутке для повышения производительности (полезно, если на странице много строк) | истинный |
| таблицаHasSelection | логическое значение | есть ли в таблице столбец с флажком для управления выбором строк | --- |
| компоненты | объект | компоненты, используемые таблицей (см. полный список компонентов) | {Header, Search, ColumnVisibility, HeaderCell, HeaderSelectionCell, Cell, EditorCell, SelectionCell, PlaceHolderCell, Loader, NoResults, Footer, Information, PageSize, Pagination} |
| дополнительные реквизиты | объект | дополнительные реквизиты, передаваемые внутренним компонентам (см. полный список дополнительных реквизитов) | {} |
| значки | объект | значки, используемые таблицей | { sortAscending, sortDescending, ClearSelection, ColumnVisibility, поиск, загрузчик } |
| тексты | объект | тексты, которые используются в таблице | { search, totalRows, rows, selected, rowsPerPage, page, of, prev, next, columnsVisibility } |
| имя | тип | описание |
|---|---|---|
| rgtRef | объект | объект ref элемента-обертки |
| таблицаRef | объект | объект ref элемента контейнера таблицы |
| имя | тип | описание | использование |
|---|---|---|---|
| столбцы | множество | конфигурация столбцов | --- |
| видимые столбцы | множество | столбцы, которые видны | --- |
| setColumns | функция | обновляет столбцы | setColumns(columns) |
| имя | тип | описание | использование |
|---|---|---|---|
| toggleColumnVisibility | функция | переключает видимость столбца по его id | toggleColumnVisibility(column.id) |
| имя | тип | описание | использование |
|---|---|---|---|
| поискТекст | нить | текст для поиска | --- |
| действительныйSearchText | нить | пустая строка, если искомый текст не прошел minSearchChars ; если он прошел, он будет равен searchText | --- |
| setSearchText | функция | обновляет текст поиска | setSearchText('hello') |
| поиск строк | функция | фильтрует строки на основе текста поиска, используя метод поиска, определенный для столбцов | searchRows(rows) |
| valuePassesSearch | функция | возвращает true, если значение проходит поиск по определенному столбцу | valuePassesSearch('hello', column) |
| имя | тип | описание | использование |
|---|---|---|---|
| сортировать | объект | объект сортировки содержит colId для идентификатора столбца, который должен быть отсортирован, или null если сортировка отсутствует, и isAsc , который определяет направление сортировки. | --- |
| setSort | функция | обновляет объект сортировки | setSort({colId: 5, isAsc: false}) |
| сортировка строк | функция | сортирует строки в зависимости от выбранного направления, используя метод сортировки, определенный для столбца | sortRows(rows) |
| toggleSort | функция | переключает этапы сортировки столбца по возрастанию, по убыванию и до нуля | toggleSort(column.id) |
| имя | тип | описание | использование |
|---|---|---|---|
| ряды | множество | данные строк (в режиме синхронизации — данные строк после фильтра поиска и сортировки) | --- |
| оригинальные строки | множество | данные строк нетронуты (в режиме синхронизации — данные строк перед фильтром поиска) | --- |
| setRows | функция | обновляет строки | setRows(rows) |
| всего строк | число | общее количество строк | --- |
| setTotalRows | функция | обновляет общее количество строк | setTotalRows(1000) |
| имя | тип | описание | использование |
|---|---|---|---|
| страница | число | текущий номер страницы | --- |
| УстановитьПейдж | функция | обновляет номер страницы | setPage(3) |
| размер страницы | число | выбранный размер страницы | --- |
| setPageSize | функция | обновляет размер страницы | setPageSize(20) |
| страницыСтроки | множество | строки на текущей странице | --- |
| всего страниц | число | общее количество страниц | --- |
| имя | тип | описание | использование |
|---|---|---|---|
| выбранныеRowsIds | массив идентификаторов | идентификаторы всех выбранных строк | --- |
| setSelectedRowsIds | функция | обновляет выбранные строки | setSelectedRowsIds([1,3,5]) |
| toggleRowSelection | функция | переключает выбор строки по ее id | toggleRowSelection(row.id) |
| getIsRowSelectable | функция | определяет, можно ли выбрать строку | getIsRowSelectable(row.id) |
| выберитеВсе.режим | нить | тип выбора всех, возможные режимы: page , которая обрабатывает только выбор строк страницы, или all , которая обрабатывает выбор всех строк. При использовании асинхронного потока режим all будет обрабатывать выбор всех доступных строк, а режим страницы с контролируемым batchSize будет обрабатывать выбор всех доступных строк на странице. | --- |
| выберитеВсе.отключено | логическое значение | следует ли отключить кнопку «Выбрать все», поскольку нет доступных для выбора строк, соответствующих режиму selectAll.mode | --- |
| выберитеВсе.проверено | логическое значение | выбраны ли все строки, соответствующие selectAll.mode | --- |
| выберитеВсе.неопределенный | логическое значение | выбраны ли только некоторые строки, соответствующие selectAll.mode | --- |
| выберитеВсе.onChange | функция | выбирает/отменяет выбор всех строк, соответствующих режиму selectAll.mode | selectAll.onChange() |
| selectAll.ref | ссылка | ссылка, которую можно добавить к флажку «Выбрать все», чтобы включить автоматическую настройку неопределенного состояния | --- |
| имя | тип | описание | использование |
|---|---|---|---|
| редактироватьстроку | объект | данные строки, которая в данный момент редактируется | --- |
| редактироватьRowId | любой | идентификатор строки, которая в данный момент редактируется | --- |
| getIsRowEditable | функция | определяет, можно ли редактировать строку | getIsRowEditable(row) |
| setEditRow | функция | обновляет данные строки текущей редактируемой строки | setEditRow(row) |
| setEditRowId | функция | обновляет идентификатор строки, редактируемой в данный момент, вы можете передать null , чтобы вернуться из режима редактирования | setEditRowId(row.id) |
| имя | тип | описание | использование/значение по умолчанию |
|---|---|---|---|
| isLoading | логическое значение | находится ли запрос на новые строки в ожидании | --- |
| слияниеRowsAt | функция | объединяет 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* | асинхронная функция | Следует обновить реквизиты строк в соответствии с запросом |
| строки* | массив объектов | данные строк (подробности) |
| всего строк* | число | Должен содержать текущую длину данных |
| 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 ) }
> ✎ < / button >
) ,
editorCellRenderer : ( { tableManager , value , data , column , colIndex , rowIndex , onChange } ) => (
< div style = { { display : 'inline-flex' } } >
< button
style = { { marginLeft : 20 } }
onClick = { e => tableManager . rowEditApi . setEditRowId ( null ) }
> ✖ < / 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 ) ;
}
} > ✔ < / 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, которые вы можете легко переопределить. компоненты таблицы сопоставляются с заранее определенными классами, которые должны охватывать любую ситуацию, и вы можете добавить свой собственный класс для каждого столбца в конфигурации columns , используя свойство className .
| Компонент | Все доступные селекторы классов |
|---|---|
| обертка | 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-inner-not-pinned-right 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 |
© Массачусетский технологический институт
