react grid table
V.1.1.2
Una tabla modular, basada en un diseño de cuadrícula CSS, optimizada para una configuración rápida y una personalización profunda.
Funciones compatibles:
Demostración en vivo
npm i @nadavshaar/react-grid-tableDe forma predeterminada, la tabla tiene todas las funciones incluso con solo una configuración básica de filas y columnas.
Ejemplo:
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 apuntalancheckboxrows apuntalancomponents apuntalanadditionalPropstableManagerENCABEZADO (opcional | personalizable): gestión de visibilidad de búsqueda y columnas.
ENCABEZADO DE TABLA: ordenar, cambiar el tamaño y reordenar las columnas.
CUERPO DE TABLA: visualización de datos/cargador/sin resultados, edición de filas y selección de filas.
PIE DE PIE (opcional | personalizable): información de filas, filas por página y paginación.
| nombre | tipo | descripción | valor predeterminado |
|---|---|---|---|
| columnas* | conjunto de objetos | configuración de columnas (detalles) | [ ] |
| filas | conjunto de objetos | datos de filas (detalles) | [ ] |
| identificadores de filas seleccionadas | conjunto de identificaciones | los identificadores de todas las filas seleccionadas (detalles) | [ ] |
| buscarTexto | cadena | texto para buscar | "" |
| getIsRowSelectable | función | una función de devolución de llamada que devuelve si la selección de fila para la fila actual debe ser seleccionable o deshabilitada | row => true |
| getIsRowEditable | función | una función de devolución de llamada que devuelve si se debe permitir o no la edición de filas para la fila actual | row => true |
| editarIdRow | cualquier | la identificación de la fila que debería cambiar al modo de edición en línea (más detalles sobre la edición de filas) | nulo |
| página | número | número de página actual | 1 |
| tamaño de página | número | el tamaño de página seleccionado | 20 |
| clasificar | objeto | ordenar configuración. acepta colId para la identificación de la columna que debe ordenarse e isAsc para definir la dirección de clasificación. ejemplo: { colId: 'some-column-id', isAsc: true } , para desclasificar simplemente pase colId como null | { } |
| está cargando | booleano | si mostrar el cargador | FALSO |
| nombre | tipo | descripción | valor predeterminado |
|---|---|---|---|
| filaIdCampo | cadena | el nombre del campo en los datos de la fila que debe usarse como identificador de fila; debe ser único | 'identificación' |
| minColumnResizeWidth | número | ancho mínimo para todas las columnas al cambiar el tamaño (no se aplica a la columna 'casilla de verificación') | 70 |
| minBuscarCaracteres | número | Se aplicarán los caracteres mínimos que se deben escribir antes de realizar la búsqueda. | 2 |
| isHeaderSticky | booleano | si las celdas del encabezado de la tabla se pegarán a la parte superior al desplazarse o no | verdadero |
| está paginado | booleano | determinar si los controles de paginación deben mostrarse en el pie de página y si los datos de las filas deben dividirse en páginas | verdadero |
| habilitarColumnasReordenar | booleano | si se permite arrastrar y soltar columnas para reposicionar | verdadero |
| resaltarBuscar | booleano | si se debe resaltar el término de búsqueda | verdadero |
| mostrarBuscar | booleano | si mostrar el componente de búsqueda en el encabezado | verdadero |
| mostrarFilasInformación | booleano | si se muestra el componente de información de filas (ubicado en el lado izquierdo del pie de página) | verdadero |
| mostrarColumnVisibilityManager | booleano | si se muestra el botón de gestión de visibilidad de las columnas (ubicado en la parte superior derecha del encabezado) | verdadero |
| tamaños de página | conjunto de números | opciones de tamaño de página | [20, 50, 100] |
| esVirtualScroll | booleano | si se deben representar elementos en un desplazamiento virtual para mejorar el rendimiento (útil cuando tienes muchas filas en una página) | verdadero |
| seleccionarTodoModo | cadena | controla el tipo de "Toda la selección". Las opciones disponibles son page para seleccionar/deseleccionar solo las filas en la página actual, o all para seleccionar/deseleccionar todas las filas en todas las páginas. Si utiliza un flujo asíncrono, la opción all seleccionará todas las filas disponibles y la opción page combinada con batchSize seleccionará/deseleccionará todas las filas disponibles en la página. | 'página' |
| iconos | objeto de nodos | configuración de iconos personalizados | {sortAscending, sortDescending, clearSelection, columnVisibility, búsqueda, cargador} |
| textos | objeto | configuración para todo el texto de la interfaz de usuario, útil para traducciones o para personalizar el texto | { búsqueda: 'Buscar:', totalRows: 'Total de filas:', filas: 'Filas:', seleccionado: 'Seleccionado', filasPorPágina: 'Filas por página:', página: 'Página:', de: 'de' , anterior: 'Anterior', siguiente: 'Siguiente', columnVisibility: 'Visibilidad de la columna' } |
| componentes | objeto | Este accesorio le brinda la posibilidad de anular los componentes internos con sus propios componentes personalizados (consulte la lista completa de componentes compatibles) | { Componentes predeterminados } |
| accesorios adicionales | objeto | Este accesorio le brinda la posibilidad de pasar accesorios a los componentes/módulos de la tabla (consulte la lista completa de accesorios adicionales admitidos) | additionalProps={{ header: { ... } }} |
| nombre | tipo | descripción | uso |
|---|---|---|---|
| enColumnasCambiar | función | Se activa cuando las columns han sido cambiadas. | columns => { ... } |
| en filas seleccionadas cambiar | función | Se activa cuando se ha cambiado la selección de filas. | selectedRowsIds => { ... } |
| enPageChange | función | se activa cuando se cambia la página | nextPage => { ... } |
| enPageSizeChange | función | se activa cuando se cambia el tamaño de la página | newPageSize => { ... } |
| onSearchTextChange | función | se activa cuando el texto de búsqueda cambia | searchText => { ... } |
| enOrdenarCambiar | función | se activa cuando se cambia la clasificación | ({colId, isAsc}) => { ... } |
| en filahacer clic | función | se activa cuando se hace clic en una fila | ({ rowIndex, data, column, isEdit, event }, tableManager) => { ... } |
| enEditRowIdChange | función | Se activa cuando cambia rowEditId | rowEditId => { ... } |
| en carga | función | se activa cuando se inicializa tableManager (detalles) | tableManager => { ... } |
| onColumnResizeStart | función | Se activa cuando comienza el cambio de tamaño de la columna. | ({event, target, column}) => { ... } |
| enColumnResize | función | se activa cuando se produce el cambio de tamaño de la columna | ({event, target, column}) => { ... } |
| onColumnResizeEnd | función | se activa cuando finaliza el cambio de tamaño de la columna | ({event, target, column}) => { ... } |
| onColumnReorderStart | función | se activa al arrastrar la columna. los datos de clasificación proporcionados por reaccionar-sortable-hoc usando la propiedad onSortStart | (sortData, tableManager) => { ... } |
| onColumnReorderEnd | función | se activa al caer la columna, y solo si la columna cambió su posición. los datos de clasificación proporcionados por reaccionar-sortable-hoc usando la propiedad onSortEnd | (sortData, tableManager) => { ... } |
| nombre | tipo | descripción | valor de uso/predeterminado |
|---|---|---|---|
| onRowsRequest | función | desencadena cuando se deben recuperar nuevas filas | ver ejemplo |
| onRowsCambiar | función | se activa cuando las filas han cambiado | ver ejemplo |
| enTotalRowsChange | función | Se activa cuando el número total de filas ha cambiado. | ver ejemplo |
| onRowsReset | función | Se activa cuando es necesario restablecer las filas acumuladas (al buscar u ordenar) | ver ejemplo |
| tamaño del lote | número | define la cantidad de filas que serán solicitadas por la propiedad onRowsRequest | el tamaño de página de la tabla |
| solicitudDebounceTimeout | número | define la cantidad de tiempo antirrebote para activar la propiedad onRowsRequest | 300 |
| filas totales | número | el número total de filas | --- |
Tipo: conjunto de objetos.
Este accesorio define la configuración de las columnas.
Cada columna (excepto la columna 'casilla de verificación') admite las siguientes propiedades:
| nombre | tipo | descripción | valor predeterminado |
|---|---|---|---|
| identificación* | cualquier | un identificador único para la columna, configurarlo en 'casilla de verificación' generará una columna de selección de filas (más detalles sobre la columna de casilla de verificación) | --- |
| campo | cadena | el nombre del campo como en los datos de la fila | --- |
| etiqueta | cadena | la etiqueta que se mostrará en la celda del encabezado | la propiedad field |
| fijado | booleano | si la columna estará fijada a un lado, apoyada solo en la primera y la última columna | FALSO |
| visible | booleano | si mostrar la columna | verdadero |
| nombre de clase | cadena | un selector de clase personalizado para todas las celdas de la columna | "" |
| ancho | cadena | el ancho inicial de la columna en los valores de la cuadrícula (lista completa de valores) | "200px" |
| minResizeWidth | número | el ancho mínimo de la columna al cambiar el tamaño | minColumnResizeWidth accesorio |
| maxResizeWidth | número, nulo | el ancho máximo de la columna al cambiar el tamaño | nulo |
| obtenerValor | función | utilizado para obtener el valor de la celda (útil cuando el valor de la celda no es una cadena - detalles) | ({value, column}) => value |
| establecer valor | función | utilizado para actualizar el valor de la celda (útil cuando el valor de la celda no es una cadena - detalles) | ({ value, data, setRow, column }) => { setRow({ ...data, [column.field]: value}) } |
| buscable | booleano | si se debe aplicar el filtrado de búsqueda en la columna | verdadero |
| editable | booleano | si se permite la edición de la columna | verdadero |
| ordenable | booleano | si permitir la clasificación de la columna | verdadero |
| redimensionable | booleano | si se permite cambiar el tamaño de la columna | verdadero |
| buscar | función | la función de búsqueda de la columna | ({value, searchText}) => value.toString().toLowerCase().includes(searchText.toLowerCase()) |
| clasificar | función | la función de clasificación para la columna | ({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; } |
| renderizador de celda | función | se utiliza para representar de forma personalizada el componente de la celda ({ tableManager, value, data, column, colIndex, rowIndex }) => ( children ) | --- |
| encabezadoCellRenderer | función | utilizado para representar de forma personalizada el componente de la celda del encabezado ({ tableManager, column }) => ( children ) | --- |
| editorCellRenderer | función | se utiliza para representar de forma personalizada el componente de celda en modo de edición ({ tableManager, value, data, column, colIndex, rowIndex, onChange }) => ( children ) | --- |
| lugarHolderRenderer | función | se utiliza para representar de forma personalizada el componente de marcador de posición de la celda que se muestra al cargar nuevas filas ({ tableManager, value, data, column, colIndex, rowIndex }) => ( children ) | --- |
Ejemplo:
// 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 )
} La selección de filas se realiza mediante una columna predefinida, simplemente agregue una columna con una id de "casilla de verificación".
La columna de casilla de verificación admite las siguientes propiedades:
| nombre | tipo | descripción | valor predeterminado |
|---|---|---|---|
| identificación* | 'caja' | generará una columna de selección de filas | --- |
| fijado | booleano | si la columna estará fijada a un lado, apoyada solo en la primera y la última columna | FALSO |
| visible | booleano | si mostrar la columna | verdadero |
| nombre de clase | cadena | una clase personalizada para todas las celdas de la columna | "" |
| ancho | cadena | el ancho inicial de la columna en los valores de la cuadrícula (lista completa de valores) | "contenido máximo" |
| minResizeWidth | número | el ancho mínimo de la columna al cambiar el tamaño | 0 |
| maxResizeWidth | número, nulo | el ancho máximo de la columna al cambiar el tamaño | nulo |
| redimensionable | booleano | si se permite cambiar el tamaño de la columna | FALSO |
| renderizador de celda | función | utilizado para representar de forma personalizada la celda de la casilla de verificación | ({ tableManager, value, data, column, colIndex, rowIndex, onChange, disabled}) => ( <input type="checkbox" onChange={ onChange } checked={ value } disabled={ disabled } /> ) |
| encabezadoCellRenderer | función | utilizado para representar de forma personalizada la celda del encabezado de la casilla de verificación | ({ tableManager, column, mode, ref, checked, disabled, indeterminate, onChange }) => ( <input type="checkbox" onChange={ onChange } checked={ checked } disabled={ disabled } /> ) |
Ejemplo:
// 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: conjunto de objetos.
Este accesorio contiene los datos de las filas.
Cada fila debe tener un campo de identificador único, que de forma predeterminada es id , pero se puede cambiar a un campo diferente usando la propiedad 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: Si el valor de una propiedad no es de tipo cadena, o en los casos en que no especifica un campo para la columna, deberá usar la función getValue en la columna para poder extraer el valor deseado.
Firma : getValue: ({tableManager, valor, columna, filaData}) => cadena
Ejemplo:
Digamos que el valor del campo para una celda es un objeto:
{ ... , fullName: {firstName: 'some-first-name', lastName: 'some-last-name'} } ,
Su función getValue para mostrar el nombre y apellido como nombre completo, sería:
getValue: ({ value }) => value.firstName + ' ' + value.lastName
El valor devuelto se utilizará para buscar, ordenar, etc.
Tipo: objeto.
Este accesorio le brinda la posibilidad de anular los componentes internos con sus propios componentes personalizados.
Todos los componentes se exportan, por lo que podrás importarlos desde cualquier lugar, pero serás responsable de suministrarles sus accesorios:
| componente | accesorios requeridos | accesorios opcionales |
|---|---|---|
| Encabezamiento | tableManager | --- |
| Buscar | tableManager | value onChange |
| Visibilidad de columna | tableManager | columns onChange |
| Celda de encabezado | tableManager | column |
| Celda De Selección De Encabezado | tableManager | ref column onChange checked disabled |
| Celúla | tableManager | value |
| EditorCelda | tableManager | column data value colIndex rowIndex onChange |
| Celda de selección | tableManager | value disabled onChange |
| Celda de soporte de lugar | tableManager | --- |
| Cargador | tableManager | --- |
| Sin resultados | tableManager | --- |
| Arrastrar manija | --- | --- |
| Pie de página | tableManager | --- |
| Información | tableManager | totalCount pageSize pageCount selectedCount |
| Tamaño de página | tableManager | value onChange options |
| Paginación | tableManager | page onChange |
Ejemplo: anular el componente de encabezado
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 accesorio le brinda la posibilidad de pasar accesorios a componentes/módulos internos.
Ejemplo Pasar accesorios al componente de la celda:
additionalProps = { { cell : { ... } , ... } }Lista de componentes/módulos a los que puede pasar accesorios:
Este es el objeto API utilizado por los componentes internos; puede usarlo para hacer cualquier cosa que proporcione la API, fuera del componente.
Estructura API:
| nombre | tipo | descripción | valor predeterminado |
|---|---|---|---|
| filaIdCampo | cadena | el nombre del campo en los datos de la fila que debe usarse como identificador de fila; debe ser único | 'identificación' |
| minColumnResizeWidth | número | ancho mínimo para todas las columnas al cambiar el tamaño (no se aplica a la columna 'casilla de verificación') | 70 |
| minBuscarCaracteres | número | Se aplicarán los caracteres mínimos que se deben escribir antes de realizar la búsqueda. | 2 |
| isHeaderSticky | booleano | si las celdas del encabezado de la tabla se pegarán a la parte superior al desplazarse o no | verdadero |
| está paginado | booleano | determinar si los controles de paginación deben mostrarse en el pie de página y si los datos de las filas deben dividirse en páginas | verdadero |
| habilitarColumnasReordenar | booleano | si se permite arrastrar y soltar columnas para reposicionar | verdadero |
| resaltarBuscar | booleano | si se debe resaltar el término de búsqueda | verdadero |
| mostrarBuscar | booleano | si mostrar el componente de búsqueda en el encabezado | verdadero |
| mostrarFilasInformación | booleano | si se muestra el componente de información de filas (ubicado en el lado izquierdo del pie de página) | verdadero |
| mostrarColumnVisibilityManager | booleano | si se muestra el botón de gestión de visibilidad de las columnas (ubicado en la parte superior derecha del encabezado) | verdadero |
| tamaños de página | conjunto de números | opciones de tamaño de página | [20, 50, 100] |
| solicitudDebounceTimeout | número | define la cantidad de tiempo de eliminación de rebotes para activar la propiedad onRowsRequest | 300 |
| esVirtualScroll | booleano | si se deben representar elementos en un desplazamiento virtual para mejorar el rendimiento (útil cuando tienes muchas filas en una página) | verdadero |
| tablaTieneSelección | booleano | si la tabla tiene una columna de casilla de verificación para controlar la selección de filas | --- |
| componentes | objeto | los componentes que utiliza la tabla (consulte la lista completa de componentes) | {Encabezado, Búsqueda, Visibilidad de columna, Celda de encabezado, Celda de selección de encabezado, Celda, Celda de editor, Celda de selección, Celda de lugar, Cargador, Sin resultados, Pie de página, Información, Tamaño de página, Paginación} |
| accesorios adicionales | objeto | accesorios adicionales que se pasan a los componentes internos (ver lista completa de accesorios adicionales) | {} |
| iconos | objeto | los iconos que están en uso por la tabla | {sortAscending, sortDescending, clearSelection, columnVisibility, búsqueda, cargador} |
| textos | objeto | los textos que están en uso por la mesa | {búsqueda, total de filas, filas, seleccionadas, filas por página, página de, anterior, siguiente, visibilidad de columna} |
| nombre | tipo | descripción |
|---|---|---|
| rgtRef | objeto | el objeto ref del elemento contenedor |
| tablaRef | objeto | el objeto ref del elemento contenedor de la tabla |
| nombre | tipo | descripción | uso |
|---|---|---|---|
| columnas | formación | configuración de columnas | --- |
| columnas visibles | formación | las columnas que son visibles | --- |
| establecer columnas | función | actualiza las columnas | setColumns(columns) |
| nombre | tipo | descripción | uso |
|---|---|---|---|
| alternarColumnaVisibilidad | función | alterna la visibilidad de una columna por su id | toggleColumnVisibility(column.id) |
| nombre | tipo | descripción | uso |
|---|---|---|---|
| buscarTexto | cadena | texto para buscar | --- |
| texto de búsqueda válido | cadena | es una cadena vacía si el texto buscado no pasó minSearchChars , si pasa, será igual a searchText | --- |
| establecerBuscarTexto | función | actualiza el texto de búsqueda | setSearchText('hello') |
| buscarfilas | función | filtra filas según el texto de búsqueda, utilizando el método de búsqueda definido en las columnas | searchRows(rows) |
| valorPasesBuscar | función | devuelve verdadero si un valor pasa la búsqueda de una determinada columna | valuePassesSearch('hello', column) |
| nombre | tipo | descripción | uso |
|---|---|---|---|
| clasificar | objeto | el objeto de clasificación contiene colId para la identificación de la columna que debe ordenarse o null cuando no hay clasificación, y isAsc que define la dirección de clasificación | --- |
| establecerOrdenar | función | actualiza el objeto de clasificación | setSort({colId: 5, isAsc: false}) |
| ordenar filas | función | ordena filas según la dirección seleccionada utilizando el método de clasificación definido en la columna | sortRows(rows) |
| alternarOrdenar | función | alterna los pasos de clasificación de una columna de ascendente, descendente y ninguno | toggleSort(column.id) |
| nombre | tipo | descripción | uso |
|---|---|---|---|
| filas | formación | los datos de las filas (en modo de sincronización, los datos de las filas después del filtro de búsqueda y la clasificación) | --- |
| Filas originales | formación | los datos de las filas intactos (en modo de sincronización, los datos de las filas antes del filtro de búsqueda) | --- |
| establecer filas | función | actualiza las filas | setRows(rows) |
| filas totales | número | el número total de filas | --- |
| establecer filas totales | función | actualiza el número total de filas | setTotalRows(1000) |
| nombre | tipo | descripción | uso |
|---|---|---|---|
| página | número | el número de página actual | --- |
| establecer página | función | actualiza el número de página | setPage(3) |
| tamaño de página | número | el tamaño de página seleccionado | --- |
| establecer tamaño de página | función | actualiza el tamaño de la página | setPageSize(20) |
| páginaFilas | formación | las filas de la página actual | --- |
| totalPáginas | número | el número total de páginas | --- |
| nombre | tipo | descripción | uso |
|---|---|---|---|
| identificadores de filas seleccionadas | conjunto de identificaciones | los identificadores de todas las filas seleccionadas | --- |
| setSelectedRowsIds | función | actualiza las filas seleccionadas | setSelectedRowsIds([1,3,5]) |
| alternar selección de fila | función | alterna la selección de una fila por su id | toggleRowSelection(row.id) |
| getIsRowSelectable | función | Determina si se puede seleccionar una fila. | getIsRowSelectable(row.id) |
| seleccionarTodo.modo | cadena | el tipo de seleccionar todo, los modos posibles son page que solo maneja la selección de las filas de la página, o all que maneja la selección de todas las filas. Si utiliza un flujo asíncrono, el modo todo manejará la selección de todas las filas disponibles , y el modo de página con un batchSize controlado manejará la selección de todas las filas disponibles en la página. | --- |
| seleccionarTodo.disabled | booleano | si el botón Seleccionar todo debe desactivarse porque no hay filas seleccionables que coincidan con selectAll.mode | --- |
| seleccionarTodo.marcado | booleano | si todas las filas que coinciden con selectAll.mode están seleccionadas | --- |
| seleccionarTodo.indeterminado | booleano | si solo se seleccionan algunas de las filas que coinciden con selectAll.mode | --- |
| seleccionarTodo.onChange | función | selecciona/deselecciona todas las filas que coinciden con selectAll.mode | selectAll.onChange() |
| seleccionarTodo.ref | árbitro | una referencia que se puede agregar a la casilla de verificación Seleccionar todo para habilitar la configuración automática del estado indeterminado | --- |
| nombre | tipo | descripción | uso |
|---|---|---|---|
| editarFila | objeto | los datos de la fila que se están editando actualmente | --- |
| editarIdRow | cualquier | la identificación de la fila que se está editando actualmente | --- |
| getIsRowEditable | función | Determina si una fila se puede editar | getIsRowEditable(row) |
| establecerEditarfila | función | actualiza los datos de la fila de la fila actualmente editada | setEditRow(row) |
| establecerEditRowId | función | actualiza la identificación de la fila actualmente editada, puede pasar null para volver del modo de edición | setEditRowId(row.id) |
| nombre | tipo | descripción | uso/valor predeterminado |
|---|---|---|---|
| está cargando | booleano | si aún está pendiente una solicitud de nuevas filas | --- |
| fusionar filas en | función | fusiona array de filas en un determinado índice mientras llena "agujeros" con null | mergeRowsAt(rows, moreRows, atIndex) |
| restablecer filas | función | elimina las filas acumuladas, lo que activará una nueva solicitud | resetRows() |
| tamaño del lote | número | define la cantidad de filas que serán solicitadas por la propiedad onRowsRequest | paginationApi.pageSize |
react-grid-table admite 4 modelos de datos diferentes:
Utilice este flujo si tiene todos los datos localmente.
Simplemente pase todos los datos usando la propiedad rows .
Accesorios necesarios :
| nombre | tipo | descripción |
|---|---|---|
| filas* | conjunto de objetos | datos de filas (detalles) |
Ejemplo:
export const SyncedTable = ( ) => {
const rows = getRows ( ) ;
const columns = getColumns ( ) ;
return (
< GridTable
columns = { columns }
rows = { rows }
/ >
)
} Utilice este flujo si necesita recuperar la asincronía de sus datos y desea que react-grid-table los administre internamente.
Todos los datos se suministran a la tabla a través de la propiedad onRowsRequest .
Accesorios necesarios :
| nombre | tipo | descripción |
|---|---|---|
| enRowsRequest* | función asíncrona | Debería devolver una promesa que se resuelva en {rows, totalRows} |
Ejemplo:
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 }
/ >
)
} Utilice este flujo si necesita recuperar la asincronía de sus datos y desea que react-grid-table los administre internamente, pero aún pueda usarlos en otros lugares de la aplicación.
Todos los datos se suministran a la tabla a través de la propiedad onRowsRequest , pero están controlados por un componente principal a través de las propiedades rows , onRowsChange , totalRows y onTotalRowsChange .
Accesorios necesarios :
| nombre | tipo | descripción |
|---|---|---|
| enRowsRequest* | función asíncrona | Debería devolver una promesa que se resuelva en {rows, totalRows} |
| filas* | conjunto de objetos | datos de filas (detalles) |
| enRowsChange* | función | Debe usarse para configurar los datos actuales. |
| total de filas* | número | Debe contener la longitud de datos actual. |
| enTotalRowsChange* | función | Debe usarse para establecer la longitud de los datos actuales. |
Ejemplo:
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 }
/ >
)
} Úselo si necesita recuperar la asincronía de sus datos y administrarlos usted mismo (útil cuando hay otros lugares que deberían poder recuperar los mismos datos).
Todos los datos se suministran a la tabla a través de la propiedad rows , que debe actualizarse utilizando la propiedad onRowsRequest .
Nota : react-grid-table no necesariamente solicitará datos concurrentes, lo que significa que es posible que haya "agujeros" en los datos. Estos "agujeros" deben llenarse con elementos nulos/indefinidos para garantizar un funcionamiento adecuado.
Para lograr esto, puedes usar:
let mergedRows = tableManager . asyncApi . mergeRowsAt ( rows , fetchedRows , at )Accesorios necesarios :
| nombre | tipo | descripción |
|---|---|---|
| enRowsRequest* | función asíncrona | Debe actualizar los accesorios de las filas de acuerdo con la solicitud. |
| filas* | conjunto de objetos | datos de filas (detalles) |
| total de filas* | número | Debe contener la longitud de datos actual. |
| onRowsReset* | función | Debe usarse para restablecer los datos actuales. Se llamará cuando se ordene o se cambie el texto de búsqueda. |
Ejemplo:
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 }
/ >
)
} La edición de filas se puede realizar representando el botón de edición usando la propiedad cellRenderer en la configuración de la columna, luego, cuando se hace clic, controlará la propiedad editRowId , luego la tabla representará los componentes de edición para las columnas que están definidas como editable (verdadero de forma predeterminada) , y como se definió en el editorCellRenderer que de forma predeterminada representará una entrada de texto.
Ejemplo:
// 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 columnas que contienen valores distintos de cadenas, deberá definir la función setValue en la columna para que el valor actualizado no anule el valor original.
Ejemplo:
setValue: ( { value , data , setRow , column } ) => {
// value: '35',
// data: { ..., columnField: { fieldToUpdate: '27' }}
let rowClone = { ... data } ;
rowClone [ column . field ] . fieldToUpdate = value ;
setRow ( rowClone ) ;
} El estilo se realiza mediante clases CSS que puedes anular fácilmente. Los componentes de la tabla están asignados con clases predefinidas que deberían cubrir cualquier situación, y usted puede agregar su propia clase personalizada por columna en la configuración columns usando la propiedad className .
| Componente | Todos los selectores de clases disponibles |
|---|---|
| Envoltura | rgt-wrapper |
| Encabezamiento | rgt-header-container |
| Buscar | rgt-search-container rgt-search-label rgt-search-icon rgt-search-input rgt-search-highlight |
| Administrador de visibilidad de columnas | 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 |
| Celda de encabezado | 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 |
| Celúla | 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 |
| Pie de página | rgt-footer rgt-footer-right-container |
| Paginación | rgt-footer-pagination rgt-footer-pagination-button rgt-footer-pagination-input-container rgt-footer-page-input |
| Información | rgt-footer-items-information rgt-footer-clear-selection-button |
| Tamaño de página | rgt-footer-page-size rgt-footer-page-size-select |
| (Utilidades) | rgt-text-truncate rgt-clickable rgt-disabled rgt-disabled-button rgt-flex-child |
© MIT
