Télécharger react grid table - react grid table Télécharger le code source

table-grille-réaction

Un tableau modulaire, basé sur une disposition en grille CSS, optimisé pour une configuration rapide et une personnalisation approfondie.

Fonctionnalités prises en charge :

Prise en charge asynchrone
Trier par colonne
Redimensionner la colonne
Réorganisation des colonnes
Rechercher avec surbrillance
Pagination
Sélection de ligne
Modification de ligne en ligne
Épinglage de colonnes (préconfiguré)
Gestion de la visibilité des colonnes
Défilement virtuel
En-tête collant
Hauteur de ligne dynamique

Démo en direct

Démo

Installer

npm i @nadavshaar/react-grid-table

Usage

Par défaut, le tableau est complet, même avec une configuration de base de lignes et de colonnes.

Exemple:

 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 ;

Documents

Table des matières

Principaux composants
Accessoires
Accessoires de configuration
Accessoires d'événement
Accessoires asynchrones
L'accessoire columns
La colonne checkbox
L'accessoire rows
Les components prop
L'accessoire additionalProps
L'API tableManager
Comment : Sync/Async
Comment : édition de lignes
Comment : style

Supporte ce package

Principaux composants

HEADER (optionnel | personnalisable) : gestion de la visibilité des recherches et des colonnes.

TABLE-HEADER : trier, redimensionner et réorganiser les colonnes.

TABLE-BODY : affichage des données / chargeur / aucun résultat, édition de lignes et sélection de lignes.

PIED DE PIED (facultatif | personnalisable) : informations sur les lignes, lignes par page et pagination.

Accessoires

nom	taper	description	valeur par défaut
colonnes*	tableau d'objets	configuration des colonnes (détails)	[ ]
lignes	tableau d'objets	données des lignes (détails)	[ ]
ID de lignes sélectionnés	tableau d'identifiants	les identifiants de toutes les lignes sélectionnées (détails)	[ ]
rechercheTexte	chaîne	texte à rechercher	""
getIsRowSelectable	fonction	une fonction de rappel qui renvoie si la sélection de ligne pour la ligne actuelle doit être sélectionnable ou désactivée	`row => true`
getIsRowEditable	fonction	une fonction de rappel qui renvoie si la modification de ligne pour la ligne actuelle doit être autorisée ou non	`row => true`
editRowId	n'importe lequel	l'identifiant de la ligne qui doit passer en mode d'édition en ligne (plus de détails sur l'édition de ligne)	nul
page	nombre	numéro de la page actuelle	1
taille de la page	nombre	la taille de page sélectionnée	20
trier	objet	trier la configuration. accepte `colId` pour l'identifiant de la colonne à trier et `isAsc` pour définir le sens du tri. exemple : `{ colId: 'some-column-id', isAsc: true }` , pour annuler le tri, transmettez simplement `colId` comme `null`	{ }
est en cours de chargement	booléen	s'il faut afficher le chargeur	FAUX

Accessoires de configuration

nom	taper	description	valeur par défaut
champIdligne	chaîne	le nom du champ dans les données de la ligne qui doit être utilisé comme identifiant de ligne - doit être unique	'identifiant'
minColumnResizeWidth	nombre	largeur minimale pour toutes les colonnes lors du redimensionnement (ne s'applique pas à la colonne « case à cocher »)	70
minSearchChars	nombre	le minimum de caractères à saisir avant la recherche s'appliquera	2
isHeaderSticky	booléen	si les cellules d'en-tête du tableau resteront en haut lors du défilement ou non	vrai
estPaginé	booléen	déterminer si les contrôles de pagination doivent être affichés dans le pied de page et si les données des lignes doivent être divisées en pages	vrai
activerColumnsReorder	booléen	s'il faut autoriser le glisser-déposer des colonnes pour le repositionnement	vrai
surlignerRechercher	booléen	s'il faut mettre en évidence le terme de recherche	vrai
showRecherche	booléen	s'il faut afficher le composant de recherche dans l'en-tête	vrai
showRowsInformations	booléen	s'il faut afficher le composant d'information sur les lignes (situé sur le côté gauche du pied de page)	vrai
showColumnVisibilityManager	booléen	s'il faut afficher le bouton de gestion de la visibilité des colonnes (situé en haut à droite de l'en-tête)	vrai
Tailles de page	tableau de nombres	options de taille de page	[20, 50, 100]
estVirtualScroll	booléen	s'il faut restituer les éléments dans un défilement virtuel pour améliorer les performances (utile lorsque vous avez beaucoup de lignes dans une page)	vrai
sélectionnerTousMode	chaîne	contrôle le type de « Toute la sélection ». Les options disponibles sont `page` pour sélectionner/désélectionner uniquement les lignes de la page actuelle, ou `all` pour sélectionner/désélectionner toutes les lignes de toutes les pages. Si vous utilisez un flux asynchrone, l'option `all` sélectionnera toutes les lignes disponibles et l'option `page` combinée avec `batchSize` sélectionnera/désélectionnera toutes les lignes disponibles dans la page.	'page'
icônes	objet des nœuds	configuration d'icônes personnalisées	{ sortAscending, sortDescending, clearSelection, columnVisibility, recherche, chargeur }
textes	objet	configuration pour tout le texte de l'interface utilisateur, utile pour les traductions ou pour personnaliser le texte	{ search : 'Recherche :', totalRows : 'Total des lignes :', lignes : 'Lignes :', sélectionné : 'Sélectionné', rowsPerPage : 'Lignes par page :', page : 'Page :', de : 'de' , prev : 'Précédent', suivant : 'Suivant', columnVisibility : 'Visibilité de la colonne' }
composants	objet	Cet accessoire vous donne la possibilité de remplacer les composants internes par vos propres composants personnalisés (voir la liste complète des composants pris en charge)	{ Composants par défaut }
accessoires supplémentaires	objet	Cet accessoire vous donne la possibilité de transmettre des accessoires aux composants/modules de la table (voir la liste complète des accessoires supplémentaires pris en charge)	`additionalProps={{ header: { ... } }}`

Accessoires d'événement

nom	taper	description	usage
onColumnsChange	fonction	se déclenche lorsque les `columns` ont été modifiées	`columns => { ... }`
onSelectedRowsChange	fonction	se déclenche lorsque la sélection des lignes a été modifiée	`selectedRowsIds => { ... }`
surChangement de page	fonction	se déclenche lorsque la page est modifiée	`nextPage => { ... }`
surChangementTaillePage	fonction	se déclenche lorsque la taille de la page est modifiée	`newPageSize => { ... }`
surSearchTextChange	fonction	se déclenche lorsque le texte de recherche est modifié	`searchText => { ... }`
surSortChange	fonction	se déclenche lorsque le tri est modifié	`({colId, isAsc}) => { ... }`
surRowClick	fonction	se déclenche lorsqu'un clic sur une ligne est effectué	`({ rowIndex, data, column, isEdit, event }, tableManager) => { ... }`
onEditRowIdChange	fonction	se déclenche lorsque `rowEditId` a changé	`rowEditId => { ... }`
en chargement	fonction	se déclenche lorsque `tableManager` est initialisé (détails)	`tableManager => { ... }`
onColumnResizeStart	fonction	se déclenche lorsque le redimensionnement de la colonne commence	`({event, target, column}) => { ... }`
surColumnResize	fonction	se déclenche lorsque le redimensionnement de la colonne se produit	`({event, target, column}) => { ... }`
onColumnResizeEnd	fonction	se déclenche à la fin du redimensionnement de la colonne	`({event, target, column}) => { ... }`
onColumnReorderStart	fonction	se déclenche lors du glissement de la colonne. les données de tri fournies par réagir-sortable-hoc en utilisant la prop `onSortStart`	`(sortData, tableManager) => { ... }`
onColumnReorderEnd	fonction	se déclenche lors de la chute de la colonne, et seulement si la colonne change de position. les données de tri fournies par réagir-sortable-hoc en utilisant la prop `onSortEnd`	`(sortData, tableManager) => { ... }`

Accessoires asynchrones

nom	taper	description	utilisation/valeur par défaut
surRowsRequest	fonction	se déclenche lorsque de nouvelles lignes doivent être récupérées	voir exemple
surRowsChange	fonction	se déclenche lorsque les lignes ont changé	voir exemple
surTotalRowsChange	fonction	se déclenche lorsque le nombre total de lignes a changé	voir exemple
surRowsReset	fonction	se déclenche lorsque les lignes accumulées doivent être réinitialisées (lors de la recherche ou du tri)	voir exemple
taille du lot	nombre	définit le nombre de lignes qui seront demandées par la prop `onRowsRequest`	la taille de la page du tableau
requestDebounceTimeout	nombre	définit la durée du temps anti-rebond pour déclencher la prop `onRowsRequest`	300
totalLignes	nombre	le nombre total de lignes	---

accessoires - détaillés

colonnes

Type : tableau d’objets.

Cet accessoire définit la configuration des colonnes.

Chaque colonne (à l'exception de la colonne « case à cocher ») prend en charge les propriétés suivantes :

nom	taper	description	valeur par défaut
identifiant*	n'importe lequel	un identifiant unique pour la colonne, le définir sur « case à cocher » générera une colonne de sélection de lignes (plus de détails sur la colonne de case à cocher)	---
champ	chaîne	le nom du champ comme dans les données de la ligne	---
étiquette	chaîne	le libellé à afficher dans la cellule d'en-tête	la propriété `field`
épinglé	booléen	si la colonne sera épinglée sur le côté, prise en charge uniquement dans la première et la dernière colonne	FAUX
visible	booléen	s'il faut afficher la colonne	vrai
Nom de classe	chaîne	un sélecteur de classe personnalisé pour toutes les cellules de colonne	""
largeur	chaîne	la largeur initiale de la colonne en valeurs de grille (liste complète des valeurs)	"200px"
minResizeWidth	nombre	la largeur minimale de la colonne lors du redimensionnement	accessoire `minColumnResizeWidth`
maxResizeWidth	nombre, nul	la largeur maximale de la colonne lors du redimensionnement	nul
obtenirValeur	fonction	utilisé pour obtenir la valeur de la cellule (utile lorsque la valeur de la cellule n'est pas une chaîne - détails)	`({value, column}) => value`
définirValeur	fonction	utilisé pour mettre à jour la valeur de la cellule (utile lorsque la valeur de la cellule n'est pas une chaîne - détails)	`({ value, data, setRow, column }) => { setRow({ ...data, [column.field]: value}) }`
consultable	booléen	s'il faut appliquer un filtrage de recherche sur la colonne	vrai
modifiable	booléen	s'il faut autoriser la modification pour la colonne	vrai
triable	booléen	s'il faut autoriser le tri pour la colonne	vrai
redimensionnable	booléen	s'il faut autoriser le redimensionnement de la colonne	vrai
recherche	fonction	la fonction de recherche de la colonne	`({value, searchText}) => value.toString().toLowerCase().includes(searchText.toLowerCase())`
trier	fonction	la fonction de tri pour la colonne	`({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; }`
moteur de rendu de cellules	fonction	utilisé pour le rendu personnalisé du composant cellulaire `({ tableManager, value, data, column, colIndex, rowIndex }) => ( children )`	---
en-têteCellRenderer	fonction	utilisé pour le rendu personnalisé du composant de cellule d'en-tête `({ tableManager, column }) => ( children )`	---
éditeurCellRenderer	fonction	utilisé pour le rendu personnalisé du composant cellulaire en mode édition `({ tableManager, value, data, column, colIndex, rowIndex, onChange }) => ( children )`	---
placeHolderRenderer	fonction	utilisé pour le rendu personnalisé du composant d'espace réservé de la cellule qui s'affiche lors du chargement de nouvelles lignes `({ tableManager, value, data, column, colIndex, rowIndex }) => ( children )`	---

Exemple:

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

colonne de case à cocher

La sélection des lignes se fait par une colonne prédéfinie, ajoutez simplement une colonne avec un id « case à cocher ».

La colonne Case à cocher prend en charge les propriétés suivantes :

nom	taper	description	valeur par défaut
identifiant*	'case à cocher'	générera une colonne de sélection de lignes	---
épinglé	booléen	si la colonne sera épinglée sur le côté, prise en charge uniquement dans la première et la dernière colonne	FAUX
visible	booléen	s'il faut afficher la colonne	vrai
Nom de classe	chaîne	une classe personnalisée pour toutes les cellules de la colonne	""
largeur	chaîne	la largeur initiale de la colonne en valeurs de grille (liste complète des valeurs)	"contenu maximum"
minResizeWidth	nombre	la largeur minimale de la colonne lors du redimensionnement	0
maxResizeWidth	nombre, nul	la largeur maximale de la colonne lors du redimensionnement	nul
redimensionnable	booléen	s'il faut autoriser le redimensionnement de la colonne	FAUX
moteur de rendu de cellules	fonction	utilisé pour le rendu personnalisé de la cellule de la case à cocher	`({ tableManager, value, data, column, colIndex, rowIndex, onChange, disabled}) => ( <input type="checkbox" onChange={ onChange } checked={ value } disabled={ disabled } /> )`
en-têteCellRenderer	fonction	utilisé pour le rendu personnalisé de la cellule d'en-tête de case à cocher	`({ tableManager, column, mode, ref, checked, disabled, indeterminate, onChange }) => ( <input type="checkbox" onChange={ onChange } checked={ checked } disabled={ disabled } /> )`

Exemple:

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

lignes

Type : tableau d’objets.

Cet accessoire contient les données des lignes.

Chaque ligne doit avoir un champ d'identifiant unique, qui est par défaut id , mais il peut être remplacé par un champ différent à l'aide de la prop 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 "
}

Remarque : Si une valeur de propriété n'est pas de type chaîne, ou dans les cas où vous ne spécifiez pas de champ pour la colonne, vous devrez utiliser la fonction getValue sur la colonne afin d'extraire la valeur souhaitée.

Signature : getValue : ({ tableManager, valeur, colonne, rowData }) => chaîne

Exemple:

Disons que la valeur du champ d'une cellule est un objet :

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

Sa fonction getValue pour afficher le prénom et le nom sous forme de nom complet serait :

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

La valeur renvoyée sera utilisée pour la recherche, le tri etc...

composants

Type : objet.

Cet accessoire vous donne la possibilité de remplacer les composants internes par vos propres composants personnalisés.

Tous les composants sont exportés, vous pourrez donc les importer de n'importe où, mais vous serez responsable de leur fournir leurs accessoires :

composant	accessoires requis	accessoires optionnels
En-tête	`tableManager`	---
Recherche	`tableManager`	`value` `onChange`
Visibilité des colonnes	`tableManager`	`columns` `onChange`
Cellule d'en-tête	`tableManager`	`column`
Cellule de sélection d'en-tête	`tableManager`	`column` `ref` `onChange` `checked` `disabled`
Cellule	`tableManager`	`value`
ÉditeurCell	`tableManager`	`value` `column` `data` `colIndex` `rowIndex` `onChange`
Cellule de sélection	`tableManager`	`value` `disabled` `onChange`
PlaceHolderCell	`tableManager`	---
Chargeur	`tableManager`	---
Aucun résultat	`tableManager`	---
Faites glisser la poignée	---	---
Pied de page	`tableManager`	---
Information	`tableManager`	`totalCount` `pageSize` `pageCount` `selectedCount`
Taille de la page	`tableManager`	`options` `value` `onChange`
Pagination	`tableManager`	`page` `onChange`

Exemple : remplacement du composant d'en-tête

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

accessoires supplémentaires

Type : objet.

Cet accessoire vous donne la possibilité de transmettre des accessoires aux composants/modules internes.

Exemple Passer des accessoires au composant cellulaire :

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

Liste des composants/modules auxquels vous pouvez transmettre des accessoires :

en-tête
recherche
visibilité de la colonne
en-têteCell
en-têteSélectionCell
cellule
éditeurCell
sélectionCellule
placeHolderCell
pied de page
information
taille de la page
pagination
rowVirtualiseur

gestionnaire de table

Il s'agit de l'objet API utilisé par les composants internes, vous pouvez l'utiliser pour faire tout ce que l'API fournit, en dehors du composant.

Structure de l'API :

id : un identifiant unique pour chaque composant de la table.
isMounted : la table est-elle montée.
isInitialized : la table est-elle initialisée. Sera défini sur true une fois que tous les composants seront initialisés.
mode : 'sync' ou 'async', dérivé des accessoires fournis.
isLoading : la table charge-t-elle actuellement des données.
config : tous les paramètres qui définissent l'interface utilisateur de la table et son comportement.
refs : objets de référence pour les éléments sélectionnés.
columnsApi : API des colonnes.
columnsVisibilityApi : API de visibilité des colonnes.
searchApi : API de la recherche.
sortApi : API du tri.
rowsApi : API des lignes
paginationApi : API de la pagination.
rowSelectionApi : API de sélection de lignes.
rowEditApi : API d'édition de lignes.
rowVirtualizer : API du virtualiseur de lignes (Voir la documentation complète sur react-virtual ).
asyncApi : API de la fonctionnalité async.

configuration

nom	taper	description	valeur par défaut
champIdligne	chaîne	le nom du champ dans les données de la ligne qui doit être utilisé comme identifiant de ligne - doit être unique	'identifiant'
minColumnResizeWidth	nombre	largeur minimale pour toutes les colonnes lors du redimensionnement (ne s'applique pas à la colonne « case à cocher »)	70
minSearchChars	nombre	le minimum de caractères à saisir avant la recherche s'appliquera	2
isHeaderSticky	booléen	si les cellules d'en-tête du tableau resteront en haut lors du défilement ou non	vrai
estPaginé	booléen	déterminer si les contrôles de pagination doivent être affichés dans le pied de page et si les données des lignes doivent être divisées en pages	vrai
activerColumnsReorder	booléen	s'il faut autoriser le glisser-déposer des colonnes pour le repositionnement	vrai
surlignerRechercher	booléen	s'il faut mettre en évidence le terme de recherche	vrai
showRecherche	booléen	s'il faut afficher le composant de recherche dans l'en-tête	vrai
showRowsInformations	booléen	s'il faut afficher le composant d'information sur les lignes (situé sur le côté gauche du pied de page)	vrai
showColumnVisibilityManager	booléen	s'il faut afficher le bouton de gestion de la visibilité des colonnes (situé en haut à droite de l'en-tête)	vrai
Tailles de page	tableau de nombres	options de taille de page	[20, 50, 100]
requestDebounceTimeout	nombre	définit la durée d'anti-rebond pour déclencher la prop `onRowsRequest`	300
estVirtualScroll	booléen	s'il faut restituer les éléments dans un défilement virtuel pour améliorer les performances (utile lorsque vous avez beaucoup de lignes dans une page)	vrai
tableHasSelection	booléen	si le tableau comporte une colonne de cases à cocher pour contrôler la sélection des lignes	---
composants	objet	les composants utilisés par la table (voir la liste complète des composants)	{En-tête, Recherche, ColumnVisibility, HeaderCell, HeaderSelectionCell, Cell, EditorCell, SelectionCell, PlaceHolderCell, Loader, NoResults, Footer, Information, PageSize, Pagination}
accessoires supplémentaires	objet	des accessoires supplémentaires qui sont transmis aux composants internes (voir la liste complète des accessoires supplémentaires)	{}
icônes	objet	les icônes utilisées par la table	{ sortAscending, sortDescending, clearSelection, columnVisibility, recherche, chargeur }
textes	objet	les textes utilisés par la table	{ recherche, totalRows, lignes, sélectionnées, lignesParPage, page, de, précédent, suivant, colonneVisibilité }

références

nom	taper	description
rgtRéf	objet	l'objet `ref` de l'élément wrapper
tableRef	objet	l'objet `ref` de l'élément conteneur de table

colonnesApi

nom	taper	description	usage
colonnes	tableau	configuration des colonnes	---
colonnes visibles	tableau	les colonnes visibles	---
setColumns	fonction	met à jour les colonnes	`setColumns(columns)`

colonnesVisibilityApi

nom	taper	description	usage
toggleColumnVisibilité	fonction	bascule la visibilité d'une colonne par son `id`	`toggleColumnVisibility(column.id)`

API de recherche

nom	taper	description	usage
rechercheTexte	chaîne	texte à rechercher	---
texte de recherche valide	chaîne	est une chaîne vide si le texte recherché n'a pas réussi le `minSearchChars` , s'il réussit, il sera égal à `searchText`	---
setSearchText	fonction	met à jour le texte de recherche	`setSearchText('hello')`
lignes de recherche	fonction	filtre les lignes en fonction du texte recherché, en utilisant la méthode de recherche définie sur les colonnes	`searchRows(rows)`
valuePassesRecherche	fonction	renvoie vrai si une valeur réussit la recherche d'une certaine colonne	`valuePassesSearch('hello', column)`

trierApi

nom	taper	description	usage
trier	objet	l'objet de tri contient `colId` pour l'identifiant de la colonne qui doit être triée ou `null` lorsqu'il n'y a pas de tri, et `isAsc` qui définit la direction du tri	---
définirTrier	fonction	met à jour l'objet de tri	`setSort({colId: 5, isAsc: false})`
trier les lignes	fonction	trie les lignes en fonction de la direction sélectionnée à l'aide de la méthode de tri définie sur la colonne	`sortRows(rows)`
basculeTrier	fonction	fait basculer les étapes de tri d'une colonne de croissant à décroissant et à aucun	`toggleSort(column.id)`

lignesApi

nom	taper	description	usage
lignes	tableau	les données des lignes (en mode sync - les données des lignes après le filtre de recherche et le tri)	---
Lignes d'origine	tableau	les données des lignes intactes (en mode synchronisation - les données des lignes avant le filtre de recherche)	---
définir des lignes	fonction	met à jour les lignes	`setRows(rows)`
totalLignes	nombre	le nombre total de lignes	---
définirTotalRows	fonction	met à jour le nombre total de lignes	`setTotalRows(1000)`

paginationApi

nom	taper	description	usage
page	nombre	le numéro de la page actuelle	---
définirPage	fonction	met à jour le numéro de page	`setPage(3)`
taille de la page	nombre	la taille de page sélectionnée	---
définir la taille de la page	fonction	met à jour la taille de la page	`setPageSize(20)`
pageLignes	tableau	les lignes de la page actuelle	---
totalPages	nombre	le nombre total de pages	---

rowSelectionApi

nom	taper	description	usage
ID de lignes sélectionnés	tableau d'identifiants	les identifiants de toutes les lignes sélectionnées	---
setSelectedRowsIds	fonction	met à jour les lignes sélectionnées	`setSelectedRowsIds([1,3,5])`
toggleRowSelection	fonction	bascule la sélection d'une ligne par son `id`	`toggleRowSelection(row.id)`
getIsRowSelectable	fonction	détermine si une ligne peut être sélectionnée	`getIsRowSelectable(row.id)`
selectAll.mode	chaîne	le type de tout sélectionner, les modes possibles sont `page` qui gère uniquement la sélection des lignes de la page, ou `all` qui gère la sélection de toutes les lignes. Si vous utilisez un flux asynchrone, tous les modes géreront la sélection de toutes les lignes disponibles , et le mode page avec un `batchSize` contrôlé gérera la sélection de toutes les lignes disponibles dans la page.	---
selectAll.disabled	booléen	si le bouton Sélectionner tout doit être désactivé car aucune ligne sélectionnable ne correspond à selectAll.mode	---
selectAll.checked	booléen	si toutes les lignes qui correspondent à selectAll.mode sont sélectionnées	---
selectAll.indéterminé	booléen	si seules certaines des lignes qui correspondent à selectAll.mode sont sélectionnées	---
selectAll.onChange	fonction	sélectionne/désélectionne toutes les lignes qui correspondent au selectAll.mode	`selectAll.onChange()`
selectAll.ref	réf	une référence qui peut être ajoutée à la case à cocher Sélectionner tout pour activer le réglage automatique de l'état indéterminé	---

rowEditApi

nom	taper	description	usage
modifierRangée	objet	les données de la ligne en cours de modification	---
editRowId	n'importe lequel	l'identifiant de la ligne en cours de modification	---
getIsRowEditable	fonction	détermine si une ligne peut être modifiée	`getIsRowEditable(row)`
setEditRow	fonction	met à jour les données de la ligne actuellement modifiée	`setEditRow(row)`
setEditRowId	fonction	met à jour l'identifiant de la ligne actuellement modifiée, vous pouvez transmettre `null` pour revenir du mode édition	`setEditRowId(row.id)`

asyncApi

nom	taper	description	utilisation / valeur par défaut
est en cours de chargement	booléen	si une demande de nouvelles lignes est toujours en attente	---
mergeRowsAt	fonction	fusionne `array` de lignes à un certain index tout en remplissant les "trous" avec des valeurs `null`	`mergeRowsAt(rows, moreRows, atIndex)`
réinitialiser les lignes	fonction	supprime les lignes accumulées, ce qui déclenchera une nouvelle requête	`resetRows()`
taille du lot	nombre	définit le nombre de lignes qui seront demandées par la prop `onRowsRequest`	`paginationApi.pageSize`

Comment...

Synchronisation/Async

react-grid-table prend en charge 4 modèles de données différents :

Synchronisation :

Utilisez ce flux si vous disposez de toutes les données localement.
Transmettez simplement toutes les données à l’aide de la prop rows .

Accessoires requis :

nom	taper	description
lignes*	tableau d'objets	données des lignes (détails)

Exemple:

 export const SyncedTable = ( ) => {

    const rows = getRows ( ) ;
    const columns = getColumns ( ) ;

    return (
        < GridTable
            columns = { columns }
            rows = { rows }
        / >
    )
}

Asynchrone (non contrôlé) :

Utilisez ce flux si vous avez besoin de récupérer vos données de manière asynchrone et que vous souhaitez que react-grid-table les gère en interne.
Toutes les données sont fournies à la table via la prop onRowsRequest .

Accessoires requis :

nom	taper	description
surRowsRequest*	fonction asynchrone	Doit renvoyer une promesse qui résout {rows, totalRows}

Exemple:

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

Asynchrone (contrôlé) :

Utilisez ce flux si vous avez besoin de récupérer vos données de manière asynchrone et que vous souhaitez que react-grid-table les gère en interne, tout en pouvant toujours les utiliser à d'autres endroits de l'application.
Toutes les données sont fournies à la table via la prop onRowsRequest , mais sont contrôlées par un composant parent via les props rows , onRowsChange , totalRows et onTotalRowsChange .

Accessoires requis :

nom	taper	description
surRowsRequest*	fonction asynchrone	Doit renvoyer une promesse qui résout {rows, totalRows}
lignes*	tableau d'objets	données des lignes (détails)
surRowsChange*	fonction	Doit être utilisé pour définir les données actuelles
totalLignes*	nombre	Doit contenir la longueur actuelle des données
surTotalRowsChange*	fonction	Doit être utilisé pour définir la longueur actuelle des données

Exemple:

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

Asynchrone (géré) :

Utilisez-le si vous avez besoin de récupérer vos données de manière asynchrone et de les gérer vous-même (utile lorsqu'il existe d'autres endroits qui devraient pouvoir récupérer les mêmes données).
Toutes les données sont fournies à la table via la prop rows , qui doit être mise à jour à l'aide de la prop onRowsRequest .
Remarque : react-grid-table ne demandera pas nécessairement des données simultanées, ce qui signifie que des "trous" dans les données sont possibles. Ces "trous" doivent être remplis d'éléments nuls/indéfinis afin de garantir un bon fonctionnement.

Pour y parvenir, vous pouvez utiliser :

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

Accessoires requis :

nom	taper	description
surRowsRequest*	fonction asynchrone	Doit mettre à jour les accessoires de lignes en fonction de la demande
lignes*	tableau d'objets	données des lignes (détails)
totalLignes*	nombre	Doit contenir la longueur actuelle des données
surRowsReset*	fonction	Doit être utilisé pour réinitialiser les données actuelles. Sera appelé lors du changement de tri ou de rechercheText

Exemple:

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

Édition de lignes

L'édition de lignes peut être effectuée en rendant le bouton d'édition à l'aide de la propriété cellRenderer dans la configuration de la colonne, puis lorsque vous cliquez dessus, il contrôlera la prop editRowId , puis la table restituera les composants d'édition pour les colonnes définies comme editable (true par défaut) , et comme cela a été défini dans l' editorCellRenderer qui restituera par défaut une entrée de texte.

Exemple:

 // state
const [ rowsData , setRows ] = useState ( MOCK_DATA ) ;

// 'editRowId' can also be controlled.
// if using controlled state, you can call your 'setEditRowId' instead of 'tableManager.rowEditApi.setEditRowId' to set it directly on your state.
// the table will typicaly call 'onEditRowIdChange' to reset it if 'searchText', 'sort' or 'page' has changed.
// const [editRowId, setEditRowId] = useState(null)

// columns
let columns = [
    ... ,
    {
        id : 'my-buttons-column' ,
        width : 'max-content' ,
        pinned : true ,
        sortable : false ,
        resizable : false ,
        cellRenderer : ( { tableManager , value , data , column , colIndex , rowIndex } ) => (
            < button 
                style = { { marginLeft : 20 } } 
                onClick = { e => tableManager . rowEditApi . setEditRowId ( data . id ) }
            > &#x270E; < / button >
        ) ,
        editorCellRenderer : ( { tableManager , value , data , column , colIndex , rowIndex , onChange } ) => (
            < div style = { { display : 'inline-flex' } } >
                < button 
                    style = { { marginLeft : 20 } } 
                    onClick = { e => tableManager . rowEditApi . setEditRowId ( null ) }
                > &#x2716; < / button >
                < button 
                    style = { { marginLeft : 10 , marginRight : 20 } } 
                    onClick = { e => {
                        let rowsClone = [ ... rowsData ] ;
                        let updatedRowIndex = rowsClone . findIndex ( r => r . id === data . id ) ;
                        rowsClone [ updatedRowIndex ] = data ;

                        setRowsData ( rowsClone ) ;
                        tableManager . rowEditApi . setEditRowId ( null ) ;
                    }
                } > &#x2714; < / button >
            < / div >
        )
    }
] ;

// render
< GridTable 
    columns = { columns }
    rows = { rowsData } 
    //editRowId={editRowId}
    //onEditRowIdChange={setEditRowId}
    . . .
/ >

Pour les colonnes contenant des valeurs autres qu'une chaîne, vous devrez définir la fonction setValue sur la colonne afin que la valeur mise à jour ne remplace pas la valeur d'origine.

Exemple:

setValue: ( { value , data , setRow , column } ) => {
    // value: '35', 
    // data: { ..., columnField: { fieldToUpdate: '27' }} 
    let rowClone = { ... data } ;
    rowClone [ column . field ] . fieldToUpdate = value ;
    setRow ( rowClone ) ;
}

Stylisme

Le style est effectué par des classes CSS que vous pouvez facilement remplacer. les composants de la table sont mappés avec des classes prédéfinies qui doivent couvrir n'importe quelle situation, et vous pouvez ajouter votre propre classe personnalisée par colonne dans la configuration columns à l'aide de la propriété className .

Composant	Tous les sélecteurs de classes disponibles
Emballage	`rgt-wrapper`
En-tête	`rgt-header-container`
Recherche	`rgt-search-container` `rgt-search-label` `rgt-search-icon` `rgt-search-input` `rgt-search-highlight`
Gestionnaire de visibilité des colonnes	`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`
Tableau	`rgt-container` `rgt-container-overlay`
Cellule d'en-tête	`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`
Cellule	`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`
Pied de page	`rgt-footer` `rgt-footer-right-container`
Pagination	`rgt-footer-pagination` `rgt-footer-pagination-button` `rgt-footer-pagination-input-container` `rgt-footer-page-input`
Information	`rgt-footer-items-information` `rgt-footer-clear-selection-button`
Taille de la page	`rgt-footer-page-size` `rgt-footer-page-size-select`
(Utilitaires)	`rgt-text-truncate` `rgt-clickable` `rgt-disabled` `rgt-disabled-button` `rgt-flex-child`

Licence

©MIT

Développer