Data Table

Komponentti, joka renderöi tietoja taulukkomuodossa. Rakennettu react-table päälle.

Vaihtoehdot

• data | (array|object) (required): Katseltava datakohde tai -joukko. Jos kyseessä on objekti, avaimet vastaavat sarakkeiden arvoja, kun taas array odottaa joukko objekteja, joissa on nimetty kenttä jokaista saraketta varten.. Default: none.
• dataInfo | object: objekti, jossa on info merkkijonojoukko, joka kuvaa tietosarjaa, tietosarjan name, objekti muuttujista, jonka avaimet vastaavat muuttujien nimiä ja arvot muuttujien kuvauksia, ja showOnStartup boolean, joka ohjaa, näytetäänkö info-ikkuna käynnistyksen yhteydessä.. Default: { 'info': [], 'name': '', 'variables': null, 'showOnStartup': false }.
• deletable | boolean: valvoo, onko sarakkeilla, joille ei ole olemassa info, painike, jota napsauttamalla kutsutaan onColumnDelete callback-funktiota.. Default: false.
• undeletableVars | array<string>: sarakkeiden muuttujien nimet, joita ei saa poistaa.. Default: [].
• filterable | boolean: ohjaa, ovatko sarakkeet suodatettavissa. Default: true.
• editable | array: muokattavien sarakkeiden nimien joukko. Default: [].
• getTrProps | function: callback-funktio, joka suoritetaan jokaiselle riville sen muotoilun mukauttamiseksi (välitetty taulukon tila, rivin tiedot, sarake ja taulukon instanssi). Default: none.
• onColumnDrag | function: toiminto, jota kutsutaan, kun sarake on vedetty eri paikkaan.. Default: onColumnDrag() {}.
• onColumnDelete | function: funktio, jota kutsutaan sarakkeen nimellä, kun sarakkeen poistopainiketta napsautetaan.. Default: onColumnDelete() {}.
• onColumnNameChange | function: funktio, jota kutsutaan, kun sarake on nimetty uudelleen (kutsutaan vanhalla nimellä ensimmäisenä ja uudella nimellä toisena argumenttina).. Default: onColumnNameChange() {}.
• onClickRemove | function: funktio, joka määrittelee toiminnon, joka tehdään datasta poistetuille riveille (oletusarvo on tyhjä funktio).. Default: onClickRemove() {}.
• onEdit | function: funktio, jota kutsutaan päivitetyllä tietosarjalla sen jälkeen, kun käyttäjä on muuttanut solun arvoa (koskee vain, kun taulukko on editable).. Default: onEdit() {}.
• onTutorialCompletion | function: toiminto, jota kutsutaan, kun käyttäjä on suorittanut datataulukon opetusohjelman loppuun. Default: onTutorialCompletion() {}.
• filters | array: joukko suodattimia. Default: [].
• onFilteredChange | function: funktio, jota kutsutaan nykyisillä suodattimilla sen jälkeen, kun käyttäjä on suodattanut tiedot.. Default: onFilteredChange() {}.
• showRemove | boolean: ilmoittaa, näytetäänkö poistettavien rivien valintaruudut.. Default: false.
• showIdColumn | boolean: valvoo, näytetäänkö ID-sarake. Default: true.
• disableDownload | boolean: halutaanko piilottaa painike tietojen lataamiseksi CSV- tai JSON-tiedostona?. Default: false.
• className | string: luokan nimi. Default: ''.
• style | object: Objekti, joka mahdollistaa mukautetun css-muotoilun. Oletusarvo on tyhjä objekti. Default: {}.

Esimerkkejä

Live Editor

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

Tulos

ReferenceError: Provider is not defined