Data Table

Een component die gegevens weergeeft in een tabelweergave. Gebouwd bovenop reageer-tabel.

Opties

• data | (array|object) (required): Een te bekijken data-object of -array. Als het een object is, komen de toetsen overeen met de kolomwaarden, terwijl een array een array verwacht met een veld met een naam die overeenkomt met elke kolom. Default: none.
• dataInfo | object: object met info string array die de dataset beschrijft, de naam van de dataset, een object van variabelen met toetsen die overeenkomen met variabelennamen en -waarden bij variabelenbeschrijvingen, een showOnStartup boolean die bepaalt of de infomodal bij het opstarten wordt weergegeven. Default: { 'info': [], 'name': '', 'variables': null, 'showOnStartup': false }.
• deletable | boolean: bepaalt of kolommen waarvoor geen info bestaat een knop hebben die bij het aanklikken de onColumnDelete terugbelfunctie oproept. Default: false.
• undeletableVars | array<string>: array van variabele namen van kolommen die niet mogen worden geschrapt. Default: [].
• filterable | boolean: controleert of de kolommen filterbaar zijn. Default: true.
• editable | array: array van namen voor kolommen die bewerkbaar moeten zijn. Default: [].
• getTrProps | function: callback functie die voor elke rij wordt uitgevoerd om de styling ervan aan te passen (doorgegeven tabelstatus, rij-info, kolom, en de tabel instantie). Default: none.
• onColumnDrag | function: functie aangeroepen wanneer een kolom naar een andere positie is gesleept. Default: onColumnDrag() {}.
• onColumnDelete | function: functie aangeroepen met de naam van een kolom wanneer op de respectievelijke verwijderknop voor een kolom wordt geklikt. Default: onColumnDelete() {}.
• onColumnNameChange | function: functie aangeroepen wanneer een kolom is hernoemd (met de oude naam als eerste en de nieuwe naam als tweede argument). Default: onColumnNameChange() {}.
• onClickRemove | function: functie die een actie specificeert voor rijen die uit de gegevens worden verwijderd (standaard naar een lege functie). Default: onClickRemove() {}.
• onEdit | function: functie aangeroepen met de bijgewerkte dataset nadat de waarde van een cel door de gebruiker is gewijzigd (geldt alleen als de tabel 'bewerkbaar' is). Default: onEdit() {}.
• onTutorialCompletion | function: functie die wordt aangeroepen wanneer de gebruiker de gegevenstabelinstructie heeft voltooid. Default: onTutorialCompletion() {}.
• filters | array: reeks filters. Default: [].
• onFilteredChange | function: functie die wordt aangeroepen met de huidige filters nadat de gegevens door de gebruiker zijn gefilterd. Default: onFilteredChange() {}.
• showRemove | boolean: geeft aan of de selectievakjes voor de te verwijderen rijen moeten worden weergegeven. Default: false.
• showIdColumn | boolean: controleert of er een ID-kolom wordt getoond. Default: true.
• disableDownload | boolean: of de knop om de gegevens te downloaden als CSV- of JSON-bestand te verbergen. Default: false.
• className | string: klassennaam. Default: ''.
• style | object: Een object dat een aangepaste css-styling mogelijk maakt. Standaardinstelling van een leeg object. Default: {}.

Voorbeelden

Live redacteur

<DataTable showRemove onClickRemove={( data ) => { console.log(data); }} data={{ firstName: [ 'Hans', 'Lotti', 'Fritz' ], lastName: [ 'Bauer', 'Müller', 'Schultz' ], age: [ 37, 55, 62 ] }} style={{ width: 600 }} />

<DataTable
    showRemove
    onClickRemove={( data ) => { console.log(data); }}
    data={{ 
        firstName: [ 'Hans', 'Lotti', 'Fritz' ], 
        lastName: [ 'Bauer', 'Müller', 'Schultz' ],
        age: [ 37, 55, 62 ]
    }}
    style={{ width: 600 }}
/>

Resultaat

ReferenceError: Provider is not defined