Data Table

Az adatokat táblázatos formában megjelenítő komponens. A react-table tetejére épül.

Opciók

• data | (array|object) (required): A megtekintendő adatobjektum vagy tömb. Ha objektumról van szó, akkor a kulcsok az oszlopértékeknek felelnek meg, míg egy tömb objektumok tömbjét várja el, minden oszlopnak megfelelő névvel ellátott mezővel.. Default: none.
• dataInfo | object: objektum az adathalmazt leíró info string tömböt, az adathalmaz nevét, egy változók objektumot, amelynek kulcsai a változók nevének, értékei pedig a változók leírásának felelnek meg, és egy showOnStartup booleant, amely szabályozza, hogy megjelenjen-e az információs ablak indításkor.. Default: { 'info': [], 'name': '', 'variables': null, 'showOnStartup': false }.
• deletable | boolean: szabályozza, hogy az olyan oszlopok, amelyekhez nem létezik info, rendelkezzenek-e olyan gombbal, amelyre kattintva az onColumnDelete callback függvényt hívja meg.. Default: false.
• undeletableVars | array<string>: a nem törölhető oszlopok változóinak neveit tartalmazó tömb. Default: [].
• filterable | boolean: szabályozza, hogy az oszlopok szűrhetők legyenek-e. Default: true.
• editable | array: a szerkeszthető oszlopok neveinek tömbje. Default: [].
• getTrProps | function: callback függvény, amely minden egyes sorhoz végrehajtódik, hogy testre szabja annak stílusát (átadott táblaállapot, sorinformáció, oszlop és a táblázat példánya). Default: none.
• onColumnDrag | function: függvény, amely akkor hívódik meg, ha egy oszlopot más pozícióba húztak át. Default: onColumnDrag() {}.
• onColumnDelete | function: függvény, amely az oszlop nevével hívódik meg, amikor az oszlophoz tartozó törlés gombra kattintanak.. Default: onColumnDelete() {}.
• onColumnNameChange | function: függvény, amelyet akkor hívnak meg, ha egy oszlopot átneveztek (a régi névvel mint első és az új névvel mint második argumentummal hívják meg).. Default: onColumnNameChange() {}.
• onClickRemove | function: függvény, amely meghatározza az adatokból eltávolított sorok esetén végrehajtandó műveletet (alapértelmezés szerint üres függvény). Default: onClickRemove() {}.
• onEdit | function: függvény, amelyet a frissített adatkészlettel hívnak meg, miután a felhasználó megváltoztatta egy cella értékét (csak akkor alkalmazható, ha a táblázat "szerkeszthető").. Default: onEdit() {}.
• onTutorialCompletion | function: függvény, amelyet akkor hívnak meg, amikor a felhasználó befejezte az adattábla bemutatót. Default: onTutorialCompletion() {}.
• filters | array: szűrők tömbje. Default: [].
• onFilteredChange | function: függvény, amelyet az aktuális szűrőkkel hívnak meg, miután a felhasználó megszűrte az adatokat. Default: onFilteredChange() {}.
• showRemove | boolean: jelzi, hogy megjelenítse-e az eltávolítandó sorok jelölőnégyzeteit.. Default: false.
• showIdColumn | boolean: szabályozza, hogy megjelenjen-e az ID oszlop. Default: true.
• disableDownload | boolean: az adatok CSV vagy JSON fájlként történő letöltésére szolgáló gomb elrejtése. Default: false.
• className | string: osztály neve. Default: ''.
• style | object: Egy objektum, amely lehetővé teszi az egyéni css-formázást. Alapértelmezés szerint üres objektum. Default: {}.

Példák

Élő szerkesztő

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

Eredmény

ReferenceError: Provider is not defined