Data Table

Komponent, mis renderdab andmeid tabeli kujul. Ehitatud react-table peal.

Valikud

• data | (array|object) (required): Vaadeldav andmeobjekt või massiivi. Kui tegemist on objektiga, vastavad võtmed veergude väärtustele, samas kui massiivi puhul oodatakse objektide massiivi, millel on igale veerule vastav nimeline väli.. Default: none.
• dataInfo | object: objekt, mis sisaldab andmekogumit kirjeldava stringimassiivi info, andmekogumi nime, muutujate objekti, mille võtmed vastavad muutujate nimedele ja väärtused muutujate kirjeldustele, ja boolean showOnStartup, mis kontrollib, kas infomoodulit kuvatakse käivitamisel.. Default: { 'info': [], 'name': '', 'variables': null, 'showOnStartup': false }.
• deletable | boolean: kontrollib, kas veergudel, mille kohta ei ole info olemas, on nupp, mille klõpsamisel kutsutakse välja tagasilöögifunktsioon onColumnDelete.. Default: false.
• undeletableVars | array<string>: massiivi muutujate nimedest, mida ei tohi kustutada.. Default: [].
• filterable | boolean: kontrollib, kas veerud on filtreeritavad. Default: true.
• editable | array: redigeeritavate veergude nimede massiivi. Default: [].
• getTrProps | function: callback-funktsioon, mis täidetakse iga rea puhul, et kohandada selle kujundust (edastatud tabeli olek, rea info, veerg ja tabeli instants). Default: none.
• onColumnDrag | function: funktsioon, mida kutsutakse üles, kui veerg on lohistatud teise positsiooni. Default: onColumnDrag() {}.
• onColumnDelete | function: funktsioon, mida kutsutakse esile veeru nimega, kui klõpsatakse vastava veeru kustutamise nupule. Default: onColumnDelete() {}.
• onColumnNameChange | function: funktsioon, mida kutsutakse üles, kui veerg on ümber nimetatud (kutsutakse vana nime esimese ja uue nimega teise argumendina).. Default: onColumnNameChange() {}.
• onClickRemove | function: funktsioon, mis määrab, mida tuleb teha andmetest eemaldatud ridade puhul (vaikimisi tühi funktsioon). Default: onClickRemove() {}.
• onEdit | function: funktsioon, mida kutsutakse üles koos uuendatud andmekogumiga pärast seda, kui kasutaja on lahtri väärtust muutnud (kehtib ainult siis, kui tabel on "redutseeritav").. Default: onEdit() {}.
• onTutorialCompletion | function: funktsioon, mida kutsutakse üles, kui kasutaja on lõpetanud andmetabeli õpetuse. Default: onTutorialCompletion() {}.
• filters | array: filtrite massiivi. Default: [].
• onFilteredChange | function: funktsioon, mida kutsutakse üles praeguste filtritega pärast seda, kui kasutaja on andmed filtreerinud.. Default: onFilteredChange() {}.
• showRemove | boolean: näitab, kas kuvada eemaldatavate ridade märkeruudud.. Default: false.
• showIdColumn | boolean: kontrollib, kas näidata ID veergu. Default: true.
• disableDownload | boolean: kas varjata nuppu andmete allalaadimiseks CSV- või JSON-failina.. Default: false.
• className | string: klassi nimi. Default: ''.
• style | object: Objekt, mis võimaldab kohandatud css-stiilimist. Vaikimisi on tühi objekt. Default: {}.

Näited

Live toimetaja

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

Tulemus

ReferenceError: Provider is not defined