Ugrás a fő tartalomra

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ő
Eredmény
ReferenceError: Provider is not defined