Startseite>Programmierbezogen>Anderer Quellcode
Herunterladen

React-Grid-Tabelle

Eine modulare Tabelle, basierend auf einem CSS-Rasterlayout, optimiert für schnelle Konfiguration und umfassende Anpassung.

Unterstützte Funktionen:

  • Async-Unterstützung
  • Nach Spalte sortieren
  • Spaltengröße ändern
  • Neuordnung der Spalten
  • Suche mit Hervorhebung
  • Pagination
  • Zeilenauswahl
  • Inline-Zeilenbearbeitung
  • Spaltenpinning (vorkonfiguriert)
  • Verwaltung der Spaltensichtbarkeit
  • Virtuelle Schriftrolle
  • Klebriger Header
  • Dynamische Zeilenhöhe

Live-Demo

Demo

Installieren 

npm i @nadavshaar/react-grid-table

Verwendung

Standardmäßig ist die Tabelle auch mit nur einer Grundkonfiguration von Zeilen und Spalten voll funktionsfähig.

Beispiel: 

 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 ;

Dokumente

Inhaltsverzeichnis

  • Hauptkomponenten
  • Requisiten
  • Konfigurations-Requisiten
  • Event-Requisiten
  • Asynchrone Requisiten
  • Die columns prop
  • Die checkbox Spalte
  • Die rows -Requisite
  • Die components prop
  • Die additionalProps -Requisite
  • Die tableManager API
  • Anleitung: Synchronisieren/Asynchron
  • How-To: Zeilenbearbeitung
  • How-To: Styling

Unterstützen Sie dieses Paket

Hauptkomponenten

HEADER (optional | anpassbar): Such- und Spaltensichtbarkeitsverwaltung.

TABLE-HEADER: Sortieren, Ändern der Größe und Neuordnung der Spalten.

TABLE-BODY: Daten anzeigen/Loader/keine Ergebnisse, Zeilenbearbeitung und Zeilenauswahl.

FUSSZEILE (optional | anpassbar): Zeileninformationen, Zeilen pro Seite und Paginierung.

Requisiten

Name Typ Beschreibung Standardwert
Spalten* Array von Objekten Spaltenkonfiguration (Details) [ ]
Reihen Array von Objekten Zeilendaten (Details) [ ]
selectedRowsIds Array von IDs die IDs aller ausgewählten Zeilen (Details) [ ]
suchText Zeichenfolge Text für die Suche „“
getIsRowSelectable Funktion eine Rückruffunktion, die zurückgibt, ob die Zeilenauswahl für die aktuelle Zeile auswählbar oder deaktiviert sein soll row => true
getIsRowEditable Funktion eine Rückruffunktion, die zurückgibt, ob die Zeilenbearbeitung für die aktuelle Zeile zulässig sein soll oder nicht row => true
editRowId beliebig die ID der Zeile, die in den Inline-Bearbeitungsmodus wechseln soll (weitere Details zur Zeilenbearbeitung) null
Seite Nummer aktuelle Seitenzahl 1
Seitengröße Nummer die ausgewählte Seitengröße 20
Sortieren Objekt Sortierkonfiguration. akzeptiert colId für die ID der Spalte, die sortiert werden soll, und isAsc um die Sortierrichtung zu definieren. Beispiel: { colId: 'some-column-id', isAsc: true } , um die Sortierung aufzuheben, übergeben Sie colId einfach als null { }
wird geladen Boolescher Wert ob der Loader angezeigt werden soll FALSCH

Konfigurations-Requisiten

Name Typ Beschreibung Standardwert
rowIdField Zeichenfolge Der Name des Feldes in den Zeilendaten, das als Zeilenbezeichner verwendet werden soll – muss eindeutig sein 'Ausweis'
minColumnResizeWidth Nummer Mindestbreite für alle Spalten beim Ändern der Größe (gilt nicht für die Spalte „Kontrollkästchen“) 70
minSearchChars Nummer Es gelten die Mindestzeichen, die vor der Suche eingegeben werden müssen 2
isHeaderSticky Boolescher Wert ob die Tabellenkopfzellen beim Scrollen oben bleiben oder nicht WAHR
istPaginiert Boolescher Wert Bestimmen Sie, ob die Paginierungssteuerelemente in der Fußzeile angezeigt werden sollen und ob die Zeilendaten in Seiten aufgeteilt werden sollen WAHR
enableColumnsReorder Boolescher Wert ob Spalten-Drag & Drop zur Neupositionierung zugelassen werden soll WAHR
markierenSuche Boolescher Wert ob der Suchbegriff hervorgehoben werden soll WAHR
showSearch Boolescher Wert ob die Suchkomponente im Header angezeigt werden soll WAHR
showRowsInformation Boolescher Wert ob die Zeileninformationskomponente angezeigt werden soll (befindet sich auf der linken Seite der Fußzeile) WAHR
showColumnVisibilityManager Boolescher Wert ob die Schaltfläche zur Verwaltung der Spaltensichtbarkeit angezeigt werden soll (oben rechts in der Kopfzeile) WAHR
Seitengrößen Array von Zahlen Optionen für die Seitengröße [20, 50, 100]
isVirtualScroll Boolescher Wert ob Elemente in einem virtuellen Bildlauf gerendert werden sollen, um die Leistung zu verbessern (nützlich, wenn Sie viele Zeilen auf einer Seite haben) WAHR
selectAllMode Zeichenfolge steuert die Art der „Alle Auswahl“. Verfügbare Optionen sind page um nur die Zeilen auf der aktuellen Seite auszuwählen bzw. die Auswahl aufzuheben, oder „ all , um alle Zeilen auf allen Seiten auszuwählen bzw. die Auswahl aufzuheben. Wenn Sie einen asynchronen Fluss verwenden, wählt die Option all alle verfügbaren Zeilen aus, und die Option page in Kombination mit batchSize wählt alle verfügbaren Zeilen auf der Seite aus bzw. hebt die Auswahl auf 'Seite'
Symbole Objekt von Knoten Benutzerdefinierte Symbolkonfiguration { sortAscending, sortDescending, clearSelection, ColumnVisibility, Suche, Loader }
Texte Objekt config für den gesamten UI-Text, nützlich für Übersetzungen oder zum Anpassen des Textes { search: 'Search:', totalRows: 'Total rows:', rows: 'Rows:', selected: 'Selected', rowsPerPage: 'Rows per page:', page: 'Page:', of: 'of' , prev: 'Prev', next: 'Next', ColumnVisibility: 'Spaltensichtbarkeit' }
Komponenten Objekt Mit dieser Requisite haben Sie die Möglichkeit, die internen Komponenten durch Ihre eigenen benutzerdefinierten Komponenten zu überschreiben (siehe vollständige Liste der unterstützten Komponenten). { Standardkomponenten }
zusätzliche Requisiten Objekt Mit dieser Requisite haben Sie die Möglichkeit, Props an die Komponenten/Module der Tabelle zu übergeben (siehe vollständige Liste der unterstützten zusätzlichen Props). additionalProps={{ header: { ... } }}

Event-Requisiten

Name Typ Beschreibung Verwendung
onColumnsChange Funktion Wird ausgelöst, wenn die columns geändert wurden columns => { ... }
onSelectedRowsChange Funktion Wird ausgelöst, wenn die Zeilenauswahl geändert wurde selectedRowsIds => { ... }
onPageChange Funktion Wird ausgelöst, wenn die Seite geändert wird nextPage => { ... }
onPageSizeChange Funktion Wird ausgelöst, wenn die Seitengröße geändert wird newPageSize => { ... }
onSearchTextChange Funktion Wird ausgelöst, wenn der Suchtext geändert wurde searchText => { ... }
onSortChange Funktion Wird ausgelöst, wenn sich die Sortierung ändert ({colId, isAsc}) => { ... }
onRowClick Funktion Wird ausgelöst, wenn auf eine Zeile geklickt wird ({ rowIndex, data, column, isEdit, event }, tableManager) => { ... }
onEditRowIdChange Funktion Wird ausgelöst, wenn sich rowEditId geändert hat rowEditId => { ... }
onLoad Funktion Wird ausgelöst, wenn tableManager initialisiert wird (Details) tableManager => { ... }
onColumnResizeStart Funktion Wird ausgelöst, wenn die Größenänderung der Spalte beginnt ({event, target, column}) => { ... }
onColumnResize Funktion Wird ausgelöst, wenn die Spaltengröße geändert wird ({event, target, column}) => { ... }
onColumnResizeEnd Funktion Wird ausgelöst, wenn die Größenänderung der Spalte beendet ist ({event, target, column}) => { ... }
onColumnReorderStart Funktion Wird beim Ziehen der Spalte ausgelöst. die von „react-sortable-hoc“ mithilfe der onSortStart Requisite bereitgestellten Sortierdaten (sortData, tableManager) => { ... }
onColumnReorderEnd Funktion Wird beim Löschen der Spalte und nur dann ausgelöst, wenn die Spalte ihre Position geändert hat. die von „react-sortable-hoc“ mithilfe der onSortEnd Requisite bereitgestellten Sortierdaten (sortData, tableManager) => { ... }

Asynchrone Requisiten

Name Typ Beschreibung Verwendung/Standardwert
onRowsRequest Funktion löst aus, wann neue Zeilen abgerufen werden sollen siehe Beispiel
onRowsChange Funktion Wird ausgelöst, wenn sich die Zeilen geändert haben siehe Beispiel
onTotalRowsChange Funktion Wird ausgelöst, wenn sich die Gesamtzahl der Zeilen geändert hat siehe Beispiel
onRowsReset Funktion Wird ausgelöst, wenn die akkumulierten Zeilen zurückgesetzt werden müssen (beim Suchen oder Sortieren) siehe Beispiel
BatchSize Nummer Definiert die Anzahl der Zeilen, die von der onRowsRequest Requisite angefordert werden die Seitengröße der Tabelle
requestDebounceTimeout Nummer Definiert die Entprellzeit zum Auslösen der onRowsRequest -Requisite 300
totalRows Nummer die Gesamtzahl der Zeilen ---

Requisiten - detailliert

Spalten

Typ: Array von Objekten.

Diese Requisite definiert die Spaltenkonfiguration.

Jede Spalte (mit Ausnahme der Spalte „Kontrollkästchen“) unterstützt die folgenden Eigenschaften:

Name Typ Beschreibung Standardwert
Ausweis* beliebig Ein eindeutiger Bezeichner für die Spalte. Wenn Sie ihn auf „Kontrollkästchen“ setzen, wird eine Zeilenauswahlspalte generiert (weitere Details zur Kontrollkästchenspalte). ---
Feld Zeichenfolge der Name des Feldes wie in den Zeilendaten ---
Etikett Zeichenfolge die Beschriftung, die in der Kopfzelle angezeigt werden soll die field
angepinnt Boolescher Wert ob die Spalte an der Seite angeheftet wird, wird nur in der ersten und letzten Spalte unterstützt FALSCH
sichtbar Boolescher Wert ob die Spalte angezeigt werden soll WAHR
Klassenname Zeichenfolge ein benutzerdefinierter Klassenselektor für alle Spaltenzellen „“
Breite Zeichenfolge die anfängliche Breite der Spalte in Rasterwerten (vollständige Werteliste) „200px“
minResizeWidth Nummer die Mindestbreite der Spalte bei der Größenänderung minColumnResizeWidth prop
maxResizeWidth Zahl, null die maximale Breite der Spalte bei der Größenänderung null
getValue Funktion Wird zum Abrufen des Zellenwerts verwendet (nützlich, wenn der Zellenwert keine Zeichenfolge ist – Details) ({value, column}) => value
setValue Funktion Wird zum Aktualisieren des Zellenwerts verwendet (nützlich, wenn der Zellenwert keine Zeichenfolge ist – Details) ({ value, data, setRow, column }) => { setRow({ ...data, [column.field]: value}) }
durchsuchbar Boolescher Wert ob die Suchfilterung auf die Spalte angewendet werden soll WAHR
editierbar Boolescher Wert ob die Bearbeitung der Spalte zulässig ist WAHR
sortierbar Boolescher Wert ob die Sortierung für die Spalte zugelassen werden soll WAHR
veränderbar Boolescher Wert ob eine Größenänderung der Spalte zulässig ist WAHR
suchen Funktion die Suchfunktion für die Spalte ({value, searchText}) => value.toString().toLowerCase().includes(searchText.toLowerCase())
Sortieren Funktion die Sortierfunktion für die Spalte ({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 Funktion Wird für die benutzerdefinierte Darstellung der Zellkomponente verwendet ({ tableManager, value, data, column, colIndex, rowIndex }) => ( children ) ---
headerCellRenderer Funktion Wird für die benutzerdefinierte Darstellung der Header-Zellenkomponente ({ tableManager, column }) => ( children ) verwendet. ---
editorCellRenderer Funktion Wird zum benutzerdefinierten Rendern der Zellkomponente im Bearbeitungsmodus verwendet ({ tableManager, value, data, column, colIndex, rowIndex, onChange }) => ( children ) ---
placeHolderRenderer Funktion Wird zum benutzerdefinierten Rendern der Platzhalterkomponente der Zelle verwendet, die beim Laden neuer Zeilen angezeigt wird ({ tableManager, value, data, column, colIndex, rowIndex }) => ( children ) ---

Beispiel: 

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

Kontrollkästchen-Spalte

Die Zeilenauswahl erfolgt über eine vordefinierte Spalte. Fügen Sie einfach eine Spalte mit der id „Kontrollkästchen“ hinzu.

Die Kontrollkästchenspalte unterstützt die folgenden Eigenschaften:

Name Typ Beschreibung Standardwert
Ausweis* 'Kontrollkästchen' generiert eine Zeilenauswahlspalte ---
angepinnt Boolescher Wert ob die Spalte an der Seite angeheftet wird, wird nur in der ersten und letzten Spalte unterstützt FALSCH
sichtbar Boolescher Wert ob die Spalte angezeigt werden soll WAHR
Klassenname Zeichenfolge eine benutzerdefinierte Klasse für alle Spaltenzellen „“
Breite Zeichenfolge die anfängliche Breite der Spalte in Rasterwerten (vollständige Werteliste) „max-content“
minResizeWidth Nummer die Mindestbreite der Spalte bei der Größenänderung 0
maxResizeWidth Zahl, null die maximale Breite der Spalte bei der Größenänderung null
veränderbar Boolescher Wert ob eine Größenänderung der Spalte zulässig ist FALSCH
cellRenderer Funktion Wird für die benutzerdefinierte Darstellung der Kontrollkästchenzelle verwendet ({ tableManager, value, data, column, colIndex, rowIndex, onChange, disabled}) => ( <input type="checkbox" onChange={ onChange } checked={ value } disabled={ disabled } /> )
headerCellRenderer Funktion Wird für die benutzerdefinierte Darstellung der Kontrollkästchen-Headerzelle verwendet ({ tableManager, column, mode, ref, checked, disabled, indeterminate, onChange }) => ( <input type="checkbox" onChange={ onChange } checked={ checked } disabled={ disabled } /> )

Beispiel: 

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

Reihen

Typ: Array von Objekten.

Diese Requisite enthält die Daten für die Zeilen.

Jede Zeile sollte ein eindeutiges Bezeichnerfeld haben, das standardmäßig id ist, aber mit der rowIdField Requisite in ein anderes Feld geändert werden kann. 

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

Hinweis: Wenn ein Eigenschaftswert nicht vom Typ „String“ ist oder Sie kein Feld für die Spalte angeben, müssen Sie die Funktion getValue für die Spalte verwenden, um den gewünschten Wert zu extrahieren.

Signatur : getValue: ({ tableManager, value, columns, rowData }) => string

Beispiel:

Nehmen wir an, der Feldwert für eine Zelle ist ein Objekt:

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

Seine getValue Funktion zum Anzeigen des Vor- und Nachnamens als vollständiger Name wäre:

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

Der zurückgegebene Wert wird zum Suchen, Sortieren usw. verwendet.

Komponenten

Typ: Objekt.

Diese Requisite gibt Ihnen die Möglichkeit, die internen Komponenten durch Ihre eigenen benutzerdefinierten Komponenten zu überschreiben.

Alle Komponenten werden exportiert, sodass Sie sie von überall importieren können, aber Sie sind dafür verantwortlich, sie mit ihren Requisiten zu versorgen:

Komponente erforderliche Requisiten optionale Requisiten
Kopfzeile tableManager ---
Suchen tableManager value onChange
ColumnVisibility tableManager columns onChange
HeaderCell tableManager column
HeaderSelectionCell tableManager column onChange checked ref disabled
Zelle tableManager value
EditorCell tableManager value column rowIndex onChange data colIndex
Auswahlzelle tableManager value onChange disabled
PlaceHolderCell tableManager ---
Lader tableManager ---
Keine Ergebnisse tableManager ---
DragHandle --- ---
Fußzeile tableManager ---
Information tableManager totalCount pageSize pageCount selectedCount
Seitengröße tableManager value onChange options
Pagination tableManager page onChange

Beispiel: Überschreiben der Header-Komponente 

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

zusätzliche Requisiten

Typ: Objekt.

Mit dieser Requisite haben Sie die Möglichkeit, Props an interne Komponenten/Module weiterzuleiten.

Beispiel für die Übergabe von Requisiten an die Zellkomponente: 

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

Liste der Komponenten/Module, an die Sie Requisiten übergeben können:

  • Kopfzeile
  • suchen
  • ColumnVisibility
  • headerCell
  • headerSelectionCell
  • Zelle
  • editorCell
  • AuswahlZelle
  • placeHolderCell
  • Fußzeile
  • Information
  • Seitengröße
  • Pagination
  • rowVirtualizer

tableManager

Dies ist das API-Objekt, das von den internen Komponenten verwendet wird. Sie können es verwenden, um alles zu tun, was die API außerhalb der Komponente bereitstellt.

API-Struktur:

  • id: Eine eindeutige Kennung für jede Tabellenkomponente.
  • isMounted: Ist der Tisch montiert.
  • isInitialized: Ist die Tabelle initialisiert? Wird auf true gesetzt, sobald alle Komponenten initialisiert sind.
  • Modus: „sync“ oder „async“, abgeleitet von den bereitgestellten Requisiten.
  • isLoading: Lädt die Tabelle derzeit Daten?
  • config: Alle Parameter, die die Benutzeroberfläche der Tabelle und ihr Verhalten definieren.
  • refs: Ref-Objekte für ausgewählte Elemente.
  • columnsApi: API der Spalten.
  • columnsVisibilityApi: API der Spaltensichtbarkeit.
  • searchApi: API der Suche.
  • sortApi: API der Sorte.
  • rowsApi: API der Zeilen
  • paginationApi: API der Paginierung.
  • rowSelectionApi: API der Zeilenauswahl.
  • rowEditApi: API der Zeilenbearbeitung.
  • rowVirtualizer: API des Zeilenvirtualisierungstools (siehe vollständige Dokumentation unter „react-virtual“ ).
  • asyncApi: API der Async-Funktionalität.

config

Name Typ Beschreibung Standardwert
rowIdField Zeichenfolge Der Name des Feldes in den Zeilendaten, das als Zeilenbezeichner verwendet werden soll – muss eindeutig sein 'Ausweis'
minColumnResizeWidth Nummer Mindestbreite für alle Spalten beim Ändern der Größe (gilt nicht für die Spalte „Kontrollkästchen“) 70
minSearchChars Nummer Es gelten die Mindestzeichen, die vor der Suche eingegeben werden müssen 2
isHeaderSticky Boolescher Wert ob die Tabellenkopfzellen beim Scrollen oben bleiben oder nicht WAHR
istPaginiert Boolescher Wert Bestimmen Sie, ob die Paginierungssteuerelemente in der Fußzeile angezeigt werden sollen und ob die Zeilendaten in Seiten aufgeteilt werden sollen WAHR
enableColumnsReorder Boolescher Wert ob Spalten-Drag & Drop zur Neupositionierung zugelassen werden soll WAHR
markierenSuche Boolescher Wert ob der Suchbegriff hervorgehoben werden soll WAHR
showSearch Boolescher Wert ob die Suchkomponente im Header angezeigt werden soll WAHR
showRowsInformation Boolescher Wert ob die Zeileninformationskomponente angezeigt werden soll (befindet sich auf der linken Seite der Fußzeile) WAHR
showColumnVisibilityManager Boolescher Wert ob die Schaltfläche zur Verwaltung der Spaltensichtbarkeit angezeigt werden soll (oben rechts in der Kopfzeile) WAHR
Seitengrößen Array von Zahlen Optionen für die Seitengröße [20, 50, 100]
requestDebounceTimeout Nummer Definiert die Entkopplungszeit zum Auslösen der onRowsRequest -Requisite 300
isVirtualScroll Boolescher Wert ob Elemente in einem virtuellen Bildlauf gerendert werden sollen, um die Leistung zu verbessern (nützlich, wenn Sie viele Zeilen auf einer Seite haben) WAHR
tableHasSelection Boolescher Wert ob die Tabelle über eine Kontrollkästchenspalte verfügt, um die Zeilenauswahl zu steuern ---
Komponenten Objekt die Komponenten, die von der Tabelle verwendet werden (siehe vollständige Liste der Komponenten) {Header, Search, ColumnVisibility, HeaderCell, HeaderSelectionCell, Cell, EditorCell, SelectionCell, PlaceHolderCell, Loader, NoResults, Footer, Information, PageSize, Pagination}
zusätzliche Requisiten Objekt zusätzliche Requisiten, die an die internen Komponenten übergeben werden (siehe vollständige Liste der zusätzlichen Requisiten) {}
Symbole Objekt die Symbole, die von der Tabelle verwendet werden { sortAscending, sortDescending, clearSelection, ColumnVisibility, Suche, Loader }
Texte Objekt die Texte, die von der Tabelle verwendet werden { search, totalRows, rows, selected, rowsPerPage, page, of, prev, next, columnsVisibility }

Refs

Name Typ Beschreibung
rgtRef Objekt das ref Objekt des Wrapper-Elements
TabellenRef Objekt das ref Objekt des Tabellencontainerelements

columnsApi

Name Typ Beschreibung Verwendung
Spalten Array Spaltenkonfiguration ---
sichtbare Spalten Array die sichtbaren Spalten ---
setColumns Funktion aktualisiert die Spalten setColumns(columns)

columnsVisibilityApi

Name Typ Beschreibung Verwendung
toggleColumnVisibility Funktion schaltet die Sichtbarkeit einer Spalte anhand ihrer id um toggleColumnVisibility(column.id)

searchApi

Name Typ Beschreibung Verwendung
suchText Zeichenfolge Text für die Suche ---
validSearchText Zeichenfolge ist eine leere Zeichenfolge, wenn der gesuchte Text die minSearchChars nicht bestanden hat. Wenn er bestanden hat, ist er gleich searchText ---
setSearchText Funktion aktualisiert den Suchtext setSearchText('hello')
searchRows Funktion Filtert Zeilen basierend auf dem Suchtext und verwendet dabei die für die Spalten definierte Suchmethode searchRows(rows)
valuePassesSearch Funktion gibt true zurück, wenn ein Wert die Suche nach einer bestimmten Spalte besteht valuePassesSearch('hello', column)

sortApi

Name Typ Beschreibung Verwendung
Sortieren Objekt Das Sortierobjekt enthält colId für die ID der Spalte, die sortiert werden soll, oder null wenn keine Sortierung erfolgt, und isAsc , das die Sortierrichtung definiert ---
setSort Funktion Aktualisiert das Sortierobjekt setSort({colId: 5, isAsc: false})
sortRows Funktion Sortiert Zeilen basierend auf der ausgewählten Richtung mithilfe der für die Spalte definierten Sortiermethode sortRows(rows)
toggleSortieren Funktion schaltet die Sortierschritte einer Spalte von aufsteigend auf absteigend und auf keine um toggleSort(column.id)

rowsApi

Name Typ Beschreibung Verwendung
Reihen Array die Zeilendaten (im Synchronisierungsmodus – die Zeilendaten nach dem Suchfilter und der Sortierung) ---
originalRows Array Die Zeilendaten bleiben unberührt (im Synchronisierungsmodus – die Zeilendaten vor dem Suchfilter) ---
setRows Funktion aktualisiert die Zeilen setRows(rows)
totalRows Nummer die Gesamtzahl der Zeilen ---
setTotalRows Funktion aktualisiert die Gesamtzahl der Zeilen setTotalRows(1000)

paginationApi

Name Typ Beschreibung Verwendung
Seite Nummer die aktuelle Seitenzahl ---
setPage Funktion aktualisiert die Seitenzahl setPage(3)
Seitengröße Nummer die ausgewählte Seitengröße ---
setPageSize Funktion aktualisiert die Seitengröße setPageSize(20)
Seitenzeilen Array die Zeilen auf der aktuellen Seite ---
Gesamtseiten Nummer die Gesamtzahl der Seiten ---

rowSelectionApi

Name Typ Beschreibung Verwendung
selectedRowsIds Array von IDs die IDs aller ausgewählten Zeilen ---
setSelectedRowsIds Funktion aktualisiert die ausgewählten Zeilen setSelectedRowsIds([1,3,5])
toggleRowSelection Funktion Schaltet die Auswahl einer Zeile anhand ihrer id um toggleRowSelection(row.id)
getIsRowSelectable Funktion bestimmt, ob eine Zeile ausgewählt werden kann getIsRowSelectable(row.id)
selectAll.mode Zeichenfolge Je nach Typ „Alle auswählen“ sind die möglichen Modi page , die nur die Auswahl der Seitenzeilen übernimmt, oder all , die die Auswahl aller Zeilen übernimmt. Bei Verwendung eines asynchronen Flusses übernimmt der All-Modus die Auswahl aller verfügbaren Zeilen und der Seitenmodus mit kontrollierter batchSize die Auswahl aller verfügbaren Zeilen auf der Seite ---
selectAll.disabled Boolescher Wert ob die Schaltfläche „Alle auswählen“ deaktiviert werden soll, da keine auswählbaren Zeilen vorhanden sind, die mit „selectAll.mode“ übereinstimmen ---
selectAll.checked Boolescher Wert ob alle Zeilen ausgewählt werden, die dem selectAll.mode entsprechen ---
selectAll.indeterminate Boolescher Wert ob nur einige der Zeilen ausgewählt werden, die dem selectAll.mode entsprechen ---
selectAll.onChange Funktion Wählt alle Zeilen aus bzw. hebt die Auswahl auf, die dem selectAll.mode entsprechen selectAll.onChange()
selectAll.ref ref Eine Referenz, die zum Kontrollkästchen „Alle auswählen“ hinzugefügt werden kann, um die automatische Einstellung des unbestimmten Status zu ermöglichen ---

rowEditApi

Name Typ Beschreibung Verwendung
editRow Objekt die Daten der Zeile, die gerade bearbeitet wird ---
editRowId beliebig die ID der Zeile, die gerade bearbeitet wird ---
getIsRowEditable Funktion legt fest, ob eine Zeile bearbeitet werden kann getIsRowEditable(row)
setEditRow Funktion aktualisiert die Zeilendaten der aktuell bearbeiteten Zeile setEditRow(row)
setEditRowId Funktion Aktualisiert die Zeilen-ID der aktuell bearbeiteten Zeile. Sie können null übergeben, um aus dem Bearbeitungsmodus zurückzukehren setEditRowId(row.id)

asyncApi

Name Typ Beschreibung Verwendung / Standardwert
wird geladen Boolescher Wert ob noch eine Anfrage für neue Zeilen aussteht ---
mergeRowsAt Funktion Fügt array von Zeilen an einem bestimmten Index zusammen und füllt dabei „Löcher“ mit null -S mergeRowsAt(rows, moreRows, atIndex)
Zeilen zurücksetzen Funktion löscht die angesammelten Zeilen, was eine neue Anfrage auslöst resetRows()
BatchSize Nummer Definiert die Anzahl der Zeilen, die von der onRowsRequest Requisite angefordert werden paginationApi.pageSize

So geht's...

Synchron/Asynchron

react-grid-table unterstützt 4 verschiedene Datenmodelle:

Synchronisieren:

Verwenden Sie diesen Ablauf, wenn Sie alle Daten lokal haben.
Übergeben Sie einfach alle Daten mit der rows -Requisite.

Benötigte Requisiten :

Name Typ Beschreibung
Zeilen* Array von Objekten Zeilendaten (Details)

Beispiel: 

 export const SyncedTable = ( ) => {

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

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

Asynchron (unkontrolliert):

Verwenden Sie diesen Ablauf, wenn Sie Ihre Daten asynchron abrufen müssen und möchten react-grid-table sie intern verwaltet.
Alle Daten werden der Tabelle über die Requisite onRowsRequest bereitgestellt.

Benötigte Requisiten :

Name Typ Beschreibung
onRowsRequest* asynchrone Funktion Sollte ein Versprechen zurückgeben, das in {rows, totalRows} aufgelöst wird

Beispiel: 

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

Asynchron (kontrolliert):

Verwenden Sie diesen Ablauf, wenn Sie Ihre Daten asynchron abrufen müssen und möchten, dass react-grid-table sie intern verwaltet, sie aber dennoch an anderen Stellen in der App verwenden kann.
Alle Daten werden der Tabelle über die Stütze onRowsRequest bereitgestellt, werden aber von einer übergeordneten Komponente über die Stützen rows , onRowsChange , totalRows und onTotalRowsChange gesteuert.

Benötigte Requisiten :

Name Typ Beschreibung
onRowsRequest* asynchrone Funktion Sollte ein Versprechen zurückgeben, das zu {rows, totalRows} aufgelöst wird
Zeilen* Array von Objekten Zeilendaten (Details)
onRowsChange* Funktion Sollte zum Einstellen der aktuellen Daten verwendet werden
totalRows* Nummer Sollte die aktuelle Datenlänge enthalten
onTotalRowsChange* Funktion Sollte verwendet werden, um die aktuelle Datenlänge festzulegen

Beispiel: 

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

Asynchron (verwaltet):

Verwenden Sie es, wenn Sie Ihre Daten asynchron abrufen und selbst verwalten müssen (nützlich, wenn es andere Orte gibt, die in der Lage sein sollten, dieselben Daten abzurufen).
Alle Daten werden der Tabelle über die rows -Requisite bereitgestellt, die mit der onRowsRequest Requisite aktualisiert werden sollte.
Hinweis : react-grid-table fragt nicht unbedingt nach gleichzeitigen Daten, was bedeutet, dass „Lücken“ in den Daten möglich sind. Diese „Löcher“ müssen mit null/undefinierten Elementen gefüllt werden, um eine ordnungsgemäße Funktion sicherzustellen.

Um dies zu erreichen, können Sie Folgendes verwenden: 

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

Benötigte Requisiten :

Name Typ Beschreibung
onRowsRequest* asynchrone Funktion Sollte die Zeilen-Requisiten entsprechend der Anfrage aktualisieren
Zeilen* Array von Objekten Zeilendaten (Details)
totalRows* Nummer Sollte die aktuelle Datenlänge enthalten
onRowsReset* Funktion Sollte zum Zurücksetzen der aktuellen Daten verwendet werden. Wird aufgerufen, wenn sich sort oder searchText ändern

Beispiel: 

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

Zeilenbearbeitung

Die Zeilenbearbeitung kann durchgeführt werden, indem die Bearbeitungsschaltfläche mithilfe der cellRenderer -Eigenschaft in der Spaltenkonfiguration gerendert wird. Wenn darauf geklickt wird, wird die editRowId Requisite gesteuert. Anschließend rendert die Tabelle die Bearbeitungskomponenten für Spalten, die als editable definiert sind (standardmäßig „true“). und wie im editorCellRenderer definiert, der standardmäßig eine Texteingabe rendert.

Beispiel: 

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

Für Spalten, die andere Werte als Zeichenfolgen enthalten, müssen Sie die Funktion setValue für die Spalte definieren, damit der aktualisierte Wert den ursprünglichen Wert nicht überschreibt.

Beispiel: 

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

Styling

Das Styling erfolgt durch CSS-Klassen, die Sie leicht überschreiben können. Den Komponenten der Tabelle werden vordefinierte Klassen zugeordnet, die jede Situation abdecken sollten. Sie können in der columns mithilfe der Eigenschaft className Ihre eigene benutzerdefinierte Klasse pro Spalte hinzufügen.

Komponente Alle verfügbaren Klassenselektoren
Verpackung rgt-wrapper
Kopfzeile rgt-header-container
Suchen rgt-search-container rgt-search-label rgt-search-icon rgt-search-input rgt-search-highlight
Spalten-Sichtbarkeits-Manager 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
Tisch rgt-container rgt-container-overlay
Header-Zelle 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
Zelle 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
Fußzeile 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
Seitengröße rgt-footer-page-size rgt-footer-page-size-select
(Dienstprogramme) rgt-text-truncate rgt-clickable rgt-disabled rgt-disabled-button rgt-flex-child

Lizenz

© MIT

Expandieren
Zusätzliche Informationen
Ähnliche Anwendungen
Empfohlen für Sie
Ähnliche Nachrichten Alle