react grid table
V.1.1.2
Uma tabela modular, baseada em um layout de grade CSS, otimizada para configuração rápida e personalização profunda.
Recursos suportados:
Demonstração ao vivo
npm i @nadavshaar/react-grid-tablePor padrão, a tabela possui todos os recursos, mesmo com apenas uma configuração básica de linhas e colunas.
Exemplo:
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 ;columnscheckboxrowscomponentsadditionalPropstableManagerHEADER (opcional | personalizável): gerenciamento de pesquisa e visibilidade de colunas.
TABLE-HEADER: classificar, redimensionar e reordenar colunas.
TABLE-BODY: exibindo dados/carregador/sem resultados, edição de linha e seleção de linha.
FOOTER (opcional | personalizável): informações de linhas, linhas por página e paginação.
| nome | tipo | descrição | valor padrão |
|---|---|---|---|
| colunas* | matriz de objetos | configuração de colunas (detalhes) | [ ] |
| linhas | matriz de objetos | dados de linhas (detalhes) | [ ] |
| selectRowsIds | matriz de IDs | os ids de todas as linhas selecionadas (detalhes) | [ ] |
| texto de pesquisa | corda | texto para pesquisa | "" |
| getIsRowSelectable | função | uma função de retorno de chamada que retorna se a seleção de linha para a linha atual deve ser selecionável ou desabilitada | row => true |
| getIsRowEditável | função | uma função de retorno de chamada que retorna se a edição de linha da linha atual deve ser permitida ou não | row => true |
| editarRowId | qualquer | o id da linha que deve mudar para o modo de edição inline (mais detalhes sobre edição de linha) | nulo |
| página | número | número da página atual | 1 |
| tamanho da página | número | o tamanho da página selecionado | 20 |
| organizar | objeto | classificar configuração. aceita colId para o id da coluna que deve ser classificada e isAsc para definir a direção da classificação. exemplo: { colId: 'some-column-id', isAsc: true } , para desordenar basta passar colId como null | { } |
| está carregando | booleano | se deseja exibir o carregador | falso |
| nome | tipo | descrição | valor padrão |
|---|---|---|---|
| rowIdField | corda | o nome do campo nos dados da linha que deve ser usado como identificador da linha - deve ser exclusivo | 'eu ia' |
| minColumnResizeWidth | número | largura mínima para todas as colunas durante o redimensionamento (não se aplica à coluna 'caixa de seleção') | 70 |
| minSearchChars | número | o mínimo de caracteres a serem digitados antes da pesquisa ser aplicada | 2 |
| isHeaderSticky | booleano | se as células do cabeçalho da tabela ficarão no topo durante a rolagem ou não | verdadeiro |
| isPaginado | booleano | determine se os controles de paginação devem ser mostrados no rodapé e se os dados das linhas devem ser divididos em páginas | verdadeiro |
| enableColumnsReordenar | booleano | se deve permitir arrastar e soltar colunas para reposicionamento | verdadeiro |
| destaquePesquisar | booleano | se deve destacar o termo de pesquisa | verdadeiro |
| mostrarPesquisa | booleano | se deve mostrar o componente de pesquisa no cabeçalho | verdadeiro |
| mostrarRowsInformation | booleano | se deve mostrar o componente de informações de linhas (localizado no lado esquerdo do rodapé) | verdadeiro |
| showColumnVisibilityManager | booleano | se deseja exibir o botão de gerenciamento de visibilidade de colunas (localizado no canto superior direito do cabeçalho) | verdadeiro |
| tamanhos de página | matriz de números | opções de tamanho de página | [20, 50, 100] |
| éVirtualScroll | booleano | se deve renderizar itens em uma rolagem virtual para melhorar o desempenho (útil quando você tem muitas linhas em uma página) | verdadeiro |
| selecioneAllMode | corda | controla o tipo de "Todas as seleções". As opções disponíveis são page para selecionar/desmarcar apenas as linhas da página atual ou all para selecionar/desmarcar todas as linhas em todas as páginas. Se estiver usando um fluxo assíncrono, a opção all selecionará todas as linhas disponíveis e a opção page combinada com batchSize , selecionará/desmarcará todas as linhas disponíveis na página | 'página' |
| ícones | objeto de nós | configuração de ícones personalizados | {sortAcrescente, sortDecrescente, clearSelection, columnVisibility, pesquisa, carregador} |
| textos | objeto | config para todo o texto da UI, útil para traduções ou para personalizar o texto | { pesquisa: 'Pesquisar:', totalRows: 'Total de linhas:', linhas: 'Linhas:', selecionado: 'Selecionado', rowsPerPage: 'Linhas por página:', página: 'Página:', de: 'de' , prev: 'Anterior', próximo: 'Próximo', columnVisibility: 'Visibilidade da coluna' } |
| componentes | objeto | Este suporte oferece a capacidade de substituir os componentes internos por seus próprios componentes personalizados (veja a lista completa de componentes suportados) | {Componentes padrão} |
| adereços adicionais | objeto | Este suporte oferece a capacidade de passar acessórios para os componentes/módulos da tabela (veja a lista completa de suportes adicionais) | additionalProps={{ header: { ... } }} |
| nome | tipo | descrição | uso |
|---|---|---|---|
| onColumnsChange | função | dispara quando as columns foram alteradas | columns => { ... } |
| onSelectedRowsChange | função | dispara quando a seleção de linhas foi alterada | selectedRowsIds => { ... } |
| onPageChange | função | aciona quando a página é alterada | nextPage => { ... } |
| onPageSizeChange | função | aciona quando o tamanho da página é alterado | newPageSize => { ... } |
| onSearchTextChange | função | é acionado quando o texto da pesquisa é alterado | searchText => { ... } |
| onSortChange | função | dispara quando a classificação é alterada | ({colId, isAsc}) => { ... } |
| onRowClick | função | dispara quando uma linha é clicada | ({ rowIndex, data, column, isEdit, event }, tableManager) => { ... } |
| onEditRowIdChange | função | dispara quando rowEditId é alterado | rowEditId => { ... } |
| onLoad | função | dispara quando tableManager é inicializado (detalhes) | tableManager => { ... } |
| onColumnResizeStart | função | dispara quando o redimensionamento da coluna começa | ({event, target, column}) => { ... } |
| onColumnResize | função | dispara quando ocorre o redimensionamento da coluna | ({event, target, column}) => { ... } |
| onColumnResizeEnd | função | dispara quando o redimensionamento da coluna termina | ({event, target, column}) => { ... } |
| onColumnReorderStart | função | dispara ao arrastar a coluna. os dados de classificação fornecidos por react-sortable-hoc usando a propriedade onSortStart | (sortData, tableManager) => { ... } |
| onColumnReorderEnd | função | é acionado ao soltar a coluna e somente se a coluna mudar de posição. os dados de classificação fornecidos por react-sortable-hoc usando a propriedade onSortEnd | (sortData, tableManager) => { ... } |
| nome | tipo | descrição | uso/valor padrão |
|---|---|---|---|
| onRowsRequest | função | dispara quando novas linhas devem ser buscadas | veja exemplo |
| onRowsChange | função | dispara quando as linhas são alteradas | veja exemplo |
| onTotalRowsChange | função | é acionado quando o número total de linhas é alterado | veja exemplo |
| onRowsReset | função | é acionado quando as linhas acumuladas precisam ser redefinidas (ao pesquisar ou classificar) | veja exemplo |
| tamanho do lote | número | define a quantidade de linhas que serão solicitadas pela prop onRowsRequest | o tamanho da página da tabela |
| solicitaçãoDebounceTimeout | número | define a quantidade de tempo de depuração para acionar a propriedade onRowsRequest | 300 |
| linhas totais | número | o número total de linhas | --- |
Tipo: matriz de objetos.
Esta propriedade define a configuração das colunas.
Cada coluna (exceto a coluna 'checkbox') tem suporte para as seguintes propriedades:
| nome | tipo | descrição | valor padrão |
|---|---|---|---|
| eu ia* | qualquer | um identificador exclusivo para a coluna, defini-lo como 'caixa de seleção' gerará uma coluna de seleção de linhas (mais detalhes sobre a coluna caixa de seleção) | --- |
| campo | corda | o nome do campo como nos dados da linha | --- |
| rótulo | corda | o rótulo a ser exibido na célula do cabeçalho | a propriedade field |
| fixado | booleano | se a coluna será fixada na lateral, apoiada apenas na primeira e última colunas | falso |
| visível | booleano | se deseja exibir a coluna | verdadeiro |
| nomedaclasse | corda | um seletor de classe personalizado para todas as células da coluna | "" |
| largura | corda | a largura inicial da coluna em valores de grade (lista completa de valores) | "200 pixels" |
| minResizeWidth | número | a largura mínima da coluna ao redimensionar | propriedade minColumnResizeWidth |
| maxResizeWidth | número, nulo | a largura máxima da coluna ao redimensionar | nulo |
| obterValor | função | usado para obter o valor da célula (útil quando o valor da célula não é uma string - detalhes) | ({value, column}) => value |
| definirValor | função | usado para atualizar o valor da célula (útil quando o valor da célula não é uma string - detalhes) | ({ value, data, setRow, column }) => { setRow({ ...data, [column.field]: value}) } |
| pesquisável | booleano | se deseja aplicar filtragem de pesquisa na coluna | verdadeiro |
| editável | booleano | se deve permitir a edição da coluna | verdadeiro |
| classificável | booleano | se deve permitir a classificação para a coluna | verdadeiro |
| redimensionável | booleano | se deve permitir o redimensionamento da coluna | verdadeiro |
| procurar | função | a função de pesquisa para a coluna | ({value, searchText}) => value.toString().toLowerCase().includes(searchText.toLowerCase()) |
| organizar | função | a função de classificação para a coluna | ({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 | função | usado para renderização personalizada do componente de célula ({ tableManager, value, data, column, colIndex, rowIndex }) => ( children ) | --- |
| headerCellRenderer | função | usado para renderização personalizada do componente da célula do cabeçalho ({ tableManager, column }) => ( children ) | --- |
| editorCellRenderer | função | usado para renderização personalizada do componente de célula no modo de edição ({ tableManager, value, data, column, colIndex, rowIndex, onChange }) => ( children ) | --- |
| placeHolderRenderer | função | usado para renderização personalizada do componente de espaço reservado da célula que é exibido ao carregar novas linhas ({ tableManager, value, data, column, colIndex, rowIndex }) => ( children ) | --- |
Exemplo:
// 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 )
} A seleção das linhas é feita por uma coluna predefinida, basta adicionar uma coluna com um id de 'checkbox'.
A coluna Checkbox tem suporte para as seguintes propriedades:
| nome | tipo | descrição | valor padrão |
|---|---|---|---|
| eu ia* | 'caixa de seleção' | irá gerar uma coluna de seleção de linhas | --- |
| fixado | booleano | se a coluna será fixada na lateral, apoiada apenas na primeira e última colunas | falso |
| visível | booleano | se deseja exibir a coluna | verdadeiro |
| nomedaclasse | corda | uma classe personalizada para todas as células da coluna | "" |
| largura | corda | a largura inicial da coluna nos valores da grade (lista completa de valores) | "conteúdo máximo" |
| minResizeWidth | número | a largura mínima da coluna ao redimensionar | 0 |
| maxResizeWidth | número, nulo | a largura máxima da coluna ao redimensionar | nulo |
| redimensionável | booleano | se deve permitir o redimensionamento da coluna | falso |
| cellRenderer | função | usado para renderização personalizada da célula da caixa de seleção | ({ tableManager, value, data, column, colIndex, rowIndex, onChange, disabled}) => ( <input type="checkbox" onChange={ onChange } checked={ value } disabled={ disabled } /> ) |
| headerCellRenderer | função | usado para renderização personalizada da célula do cabeçalho da caixa de seleção | ({ tableManager, column, mode, ref, checked, disabled, indeterminate, onChange }) => ( <input type="checkbox" onChange={ onChange } checked={ checked } disabled={ disabled } /> ) |
Exemplo:
// 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 )
}Tipo: matriz de objetos.
Este suporte contém os dados das linhas.
Cada linha deve ter um campo identificador exclusivo, que por padrão é id , mas pode ser alterado para um campo diferente usando a propriedade 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 "
} Nota: Se o valor de uma propriedade não for do tipo string, ou caso você não especifique um campo para a coluna, será necessário utilizar a função getValue na coluna para extrair o valor desejado.
Assinatura : getValue: ({tableManager, valor, coluna, rowData }) => string
Exemplo:
Digamos que o valor do campo para uma célula seja um objeto:
{ ... , fullName: {firstName: 'some-first-name', lastName: 'some-last-name'} } ,
Sua função getValue para exibir o nome e o sobrenome como nome completo seria:
getValue: ({ value }) => value.firstName + ' ' + value.lastName
O valor retornado será usado para pesquisa, classificação, etc.
Tipo: objeto.
Este suporte oferece a capacidade de substituir os componentes internos por seus próprios componentes personalizados.
Todos os componentes são exportados, então você poderá importá-los de qualquer lugar, mas você será responsável por fornecer seus acessórios:
| componente | adereços necessários | adereços opcionais |
|---|---|---|
| Cabeçalho | tableManager | --- |
| Procurar | tableManager | value onChange |
| Visibilidade da Coluna | tableManager | columns onChange |
| CabeçalhoCélula | tableManager | column |
| HeaderSelectionCell | tableManager | column ref onChange checked disabled |
| Célula | tableManager | value |
| EditorCélula | tableManager | column data value colIndex rowIndex onChange |
| Célula de seleção | tableManager | value disabled onChange |
| PlaceHolderCell | tableManager | --- |
| Carregador | tableManager | --- |
| Sem resultados | tableManager | --- |
| ArrastarHandle | --- | --- |
| Rodapé | tableManager | --- |
| Informação | tableManager | totalCount pageSize pageCount selectedCount |
| Tamanho da página | tableManager | value options onChange |
| Paginação | tableManager | page onChange |
Exemplo: Substituindo o componente de cabeçalho
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 } }
/ >
)
}Tipo: objeto.
Este suporte oferece a capacidade de passar acessórios para componentes/módulos internos.
Exemplo Passando props para o componente celular:
additionalProps = { { cell : { ... } , ... } }Lista de componentes/módulos para os quais você pode passar props:
Este é o objeto API usado pelos componentes internos, você pode usá-lo para fazer qualquer coisa que a API forneça, fora do componente.
Estrutura da API:
| nome | tipo | descrição | valor padrão |
|---|---|---|---|
| rowIdField | corda | o nome do campo nos dados da linha que deve ser usado como identificador da linha - deve ser exclusivo | 'eu ia' |
| minColumnResizeWidth | número | largura mínima para todas as colunas durante o redimensionamento (não se aplica à coluna 'caixa de seleção') | 70 |
| minSearchChars | número | o mínimo de caracteres a serem digitados antes da pesquisa ser aplicada | 2 |
| isHeaderSticky | booleano | se as células do cabeçalho da tabela ficarão no topo durante a rolagem ou não | verdadeiro |
| isPaginado | booleano | determine se os controles de paginação devem ser mostrados no rodapé e se os dados das linhas devem ser divididos em páginas | verdadeiro |
| enableColumnsReordenar | booleano | se deve permitir arrastar e soltar colunas para reposicionamento | verdadeiro |
| destaquePesquisar | booleano | se deve destacar o termo de pesquisa | verdadeiro |
| mostrarPesquisar | booleano | se deve mostrar o componente de pesquisa no cabeçalho | verdadeiro |
| mostrarRowsInformation | booleano | se deve mostrar o componente de informações de linhas (localizado no lado esquerdo do rodapé) | verdadeiro |
| showColumnVisibilityManager | booleano | se deseja exibir o botão de gerenciamento de visibilidade de colunas (localizado no canto superior direito do cabeçalho) | verdadeiro |
| tamanhos de página | matriz de números | opções de tamanho de página | [20, 50, 100] |
| solicitaçãoDebounceTimeout | número | define a quantidade de tempo de debouning para acionar a propriedade onRowsRequest | 300 |
| éVirtualScroll | booleano | se deve renderizar itens em uma rolagem virtual para melhorar o desempenho (útil quando você tem muitas linhas em uma página) | verdadeiro |
| tabelaHasSelection | booleano | se a tabela tem uma coluna de caixa de seleção para controlar a seleção de linhas | --- |
| componentes | objeto | os componentes que estão em uso pela tabela (veja a lista completa de componentes) | {Cabeçalho, Pesquisa, ColumnVisibility, HeaderCell, HeaderSelectionCell, Cell, EditorCell, SelectionCell, PlaceHolderCell, Loader, NoResults, Rodapé, Informações, PageSize, Paginação} |
| adereços adicionais | objeto | props adicionais que são passados para os componentes internos (veja a lista completa de advancedProps) | {} |
| ícones | objeto | os ícones que estão em uso pela mesa | {sortAcrescente, sortDecrescente, clearSelection, columnVisibility, pesquisa, carregador} |
| textos | objeto | os textos que estão em uso pela mesa | { pesquisa, totalRows, linhas, selecionadas, rowsPerPage, página, de, anterior, próximo, columnVisibility } |
| nome | tipo | descrição |
|---|---|---|
| rgtRef | objeto | o objeto ref do elemento wrapper |
| tabelaRef | objeto | o objeto ref do elemento contêiner da tabela |
| nome | tipo | descrição | uso |
|---|---|---|---|
| colunas | variedade | configuração de colunas | --- |
| colunas visíveis | variedade | as colunas que são visíveis | --- |
| setColumns | função | atualiza as colunas | setColumns(columns) |
| nome | tipo | descrição | uso |
|---|---|---|---|
| toggleColumnVisibility | função | alterna a visibilidade de uma coluna pelo seu id | toggleColumnVisibility(column.id) |
| nome | tipo | descrição | uso |
|---|---|---|---|
| texto de pesquisa | corda | texto para pesquisa | --- |
| válidoSearchText | corda | é uma string vazia se o texto pesquisado não passou em minSearchChars , se passar, será igual a searchText | --- |
| setSearchText | função | atualiza o texto de pesquisa | setSearchText('hello') |
| linhas de pesquisa | função | filtra linhas com base no texto de pesquisa, usando o método de pesquisa definido nas colunas | searchRows(rows) |
| valorPassesSearch | função | retorna verdadeiro se um valor passar na pesquisa de uma determinada coluna | valuePassesSearch('hello', column) |
| nome | tipo | descrição | uso |
|---|---|---|---|
| organizar | objeto | o objeto sort contém colId para o id da coluna que deve ser classificada ou null quando não há classificação, e isAsc que define a direção da classificação | --- |
| definirClassificar | função | atualiza o objeto de classificação | setSort({colId: 5, isAsc: false}) |
| classificarRows | função | classifica as linhas com base na direção selecionada usando o método de classificação definido na coluna | sortRows(rows) |
| alternarClassificar | função | alterna as etapas de classificação de uma coluna de ascendente para decrescente e para nenhuma | toggleSort(column.id) |
| nome | tipo | descrição | uso |
|---|---|---|---|
| linhas | variedade | os dados das linhas (no modo de sincronização - os dados das linhas após o filtro de pesquisa e a classificação) | --- |
| linhas originais | variedade | os dados das linhas intactos (no modo de sincronização - os dados das linhas antes do filtro de pesquisa) | --- |
| setRows | função | atualiza as linhas | setRows(rows) |
| linhas totais | número | o número total de linhas | --- |
| setTotalRows | função | atualiza o número total de linhas | setTotalRows(1000) |
| nome | tipo | descrição | uso |
|---|---|---|---|
| página | número | o número da página atual | --- |
| setPágina | função | atualiza o número da página | setPage(3) |
| tamanho da página | número | o tamanho da página selecionado | --- |
| definirPageSize | função | atualiza o tamanho da página | setPageSize(20) |
| linhas de páginas | variedade | as linhas na página atual | --- |
| total de páginas | número | o número total de páginas | --- |
| nome | tipo | descrição | uso |
|---|---|---|---|
| selectRowsIds | matriz de IDs | os IDs de todas as linhas selecionadas | --- |
| setSelectedRowsIds | função | atualiza as linhas selecionadas | setSelectedRowsIds([1,3,5]) |
| toggleRowSelection | função | alterna a seleção de uma linha pelo seu id | toggleRowSelection(row.id) |
| getIsRowSelectable | função | determina se uma linha pode ser selecionada | getIsRowSelectable(row.id) |
| selectAll.mode | corda | o tipo de selecionar tudo, os modos possíveis são page que trata apenas da seleção das linhas da página ou all que trata da seleção de todas as linhas. Se estiver usando um fluxo assíncrono, o modo all tratará da seleção de todas as linhas disponíveis , e o modo de página com um batchSize controlado tratará da seleção de todas as linhas disponíveis na página | --- |
| selectAll.disabled | booleano | se o botão selecionar tudo deve ser desabilitado porque não há linhas selecionáveis que correspondam ao selectAll.mode | --- |
| selectAll.checked | booleano | se todas as linhas que correspondem a selectAll.mode estão selecionadas | --- |
| selectAll.indeterminado | booleano | se apenas algumas das linhas que correspondem a selectAll.mode estão selecionadas | --- |
| selectAll.onChange | função | seleciona/desmarca todas as linhas que correspondem ao selectAll.mode | selectAll.onChange() |
| selectAll.ref | referência | uma referência que pode ser adicionada à caixa de seleção selecionar tudo para ativar a configuração automática de estado indeterminado | --- |
| nome | tipo | descrição | uso |
|---|---|---|---|
| editarLinha | objeto | os dados da linha que está sendo editada no momento | --- |
| editarRowId | qualquer | o id da linha que está sendo editada no momento | --- |
| getIsRowEditável | função | determina se uma linha pode ser editada | getIsRowEditable(row) |
| setEditRow | função | atualiza os dados da linha atualmente editada | setEditRow(row) |
| setEditRowId | função | atualiza o ID da linha atualmente editada, você pode passar null para voltar do modo de edição | setEditRowId(row.id) |
| nome | tipo | descrição | uso/valor padrão |
|---|---|---|---|
| está carregando | booleano | se uma solicitação de novas linhas ainda está pendente | --- |
| mesclarRowsAt | função | mescla array s de linhas em um determinado índice enquanto preenche "buracos" com null s | mergeRowsAt(rows, moreRows, atIndex) |
| resetRows | função | descarta as linhas acumuladas, o que acionará uma nova solicitação | resetRows() |
| tamanho do lote | número | define a quantidade de linhas que serão solicitadas pela prop onRowsRequest | paginationApi.pageSize |
react-grid-table suporta 4 modelos de dados diferentes:
Utilize este fluxo se tiver todos os dados localmente.
Basta passar todos os dados usando a propriedade rows .
Adereços necessários :
| nome | tipo | descrição |
|---|---|---|
| linhas* | matriz de objetos | dados de linhas (detalhes) |
Exemplo:
export const SyncedTable = ( ) => {
const rows = getRows ( ) ;
const columns = getColumns ( ) ;
return (
< GridTable
columns = { columns }
rows = { rows }
/ >
)
} Use este fluxo se precisar buscar a assincronia de seus dados e quiser que react-grid-table os gerencie internamente.
Todos os dados são fornecidos à tabela por meio da propriedade onRowsRequest .
Adereços necessários :
| nome | tipo | descrição |
|---|---|---|
| onRowsRequest* | função assíncrona | Deve retornar uma promessa que resolve {rows, totalRows} |
Exemplo:
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 }
/ >
)
} Use este fluxo se precisar buscar a assincronia de seus dados e quiser que react-grid-table os gerencie internamente, mas ainda possa usá-los em outros locais do aplicativo.
Todos os dados são fornecidos à tabela por meio da propriedade onRowsRequest , mas são controlados por um componente pai por meio das propriedades rows , onRowsChange , totalRows e onTotalRowsChange .
Adereços necessários :
| nome | tipo | descrição |
|---|---|---|
| onRowsRequest* | função assíncrona | Deve retornar uma promessa que resolve {rows, totalRows} |
| linhas* | matriz de objetos | dados de linhas (detalhes) |
| onRowsChange* | função | Deve ser usado para definir os dados atuais |
| totalLinhas* | número | Deve conter o comprimento atual dos dados |
| onTotalRowsChange* | função | Deve ser usado para definir o comprimento atual dos dados |
Exemplo:
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 }
/ >
)
} Use-o se precisar buscar seus dados de forma assíncrona e gerenciá-los você mesmo (útil quando há outros locais que devem ser capazes de buscar os mesmos dados).
Todos os dados são fornecidos à tabela por meio da propriedade rows , que deve ser atualizada usando a propriedade onRowsRequest .
Nota : react-grid-table não solicitará necessariamente dados simultâneos, o que significa que são possíveis "buracos" nos dados. Esses "buracos" precisam ser preenchidos com itens nulos/indefinidos para garantir o funcionamento adequado.
Para conseguir isso, você pode usar:
let mergedRows = tableManager . asyncApi . mergeRowsAt ( rows , fetchedRows , at )Adereços necessários :
| nome | tipo | descrição |
|---|---|---|
| onRowsRequest* | função assíncrona | Deve atualizar os adereços de linhas de acordo com a solicitação |
| linhas* | matriz de objetos | dados de linhas (detalhes) |
| totalLinhas* | número | Deve conter o comprimento atual dos dados |
| onRowsReset* | função | Deve ser usado para redefinir os dados atuais. Será chamado quando sort ou searchText mudar |
Exemplo:
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 }
/ >
)
} A edição de linha pode ser feita renderizando o botão de edição usando a propriedade cellRenderer na configuração da coluna, então, quando clicado, ele controlará a propriedade editRowId , então a tabela renderizará os componentes de edição para colunas definidas como editable (verdadeiro por padrão) , e como foi definido no editorCellRenderer que por padrão renderizará uma entrada de texto.
Exemplo:
// 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}
. . .
/ > Para colunas que contêm valores diferentes de string, você precisará definir a função setValue na coluna para que o valor atualizado não substitua o valor original.
Exemplo:
setValue: ( { value , data , setRow , column } ) => {
// value: '35',
// data: { ..., columnField: { fieldToUpdate: '27' }}
let rowClone = { ... data } ;
rowClone [ column . field ] . fieldToUpdate = value ;
setRow ( rowClone ) ;
} O estilo é feito por classes CSS que você pode substituir facilmente. os componentes da tabela são mapeados com classes pré-definidas que devem cobrir qualquer situação, e você pode adicionar sua própria classe customizada por coluna na configuração columns usando a propriedade className .
| Componente | Todos os seletores de classe disponíveis |
|---|---|
| Invólucro | rgt-wrapper |
| Cabeçalho | rgt-header-container |
| Procurar | rgt-search-container rgt-search-label rgt-search-icon rgt-search-input rgt-search-highlight |
| Gerenciador de visibilidade de colunas | 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 |
| Mesa | rgt-container rgt-container-overlay |
| Célula de cabeçalho | 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 |
| Célula | 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 |
| Rodapé | rgt-footer rgt-footer-right-container |
| Paginação | rgt-footer-pagination rgt-footer-pagination-button rgt-footer-pagination-input-container rgt-footer-page-input |
| Informação | rgt-footer-items-information rgt-footer-clear-selection-button |
| Tamanho da página | rgt-footer-page-size rgt-footer-page-size-select |
| (Utilitários) | rgt-text-truncate rgt-clickable rgt-disabled rgt-disabled-button rgt-flex-child |
©MIT
