Data Table

Komponenta vykreslující data v tabulkovém zobrazení. Postavena nad react-table.

Možnosti

• data | (array|object) (required): Datový objekt nebo pole, které se má zobrazit. Pokud se jedná o objekt, klíče odpovídají hodnotám sloupců, zatímco u pole se očekává pole objektů s pojmenovaným polem odpovídajícím každému sloupci.. Default: none.
• dataInfo | object: objekt s řetězcovým polem info popisujícím datovou sadu, název datové sady, objekt proměnných s klíči odpovídajícími názvům proměnných a hodnotami popisů proměnných a boolean showOnStartup určující, zda se má při spuštění zobrazit informační modal.. Default: { 'info': [], 'name': '', 'variables': null, 'showOnStartup': false }.
• deletable | boolean: řídí, zda sloupce, pro které neexistují žádné info, mají tlačítko, které po kliknutí vyvolá zpětné volání funkce onColumnDelete.. Default: false.
• undeletableVars | array<string>: pole názvů proměnných sloupců, které se nesmí smazat.. Default: [].
• filterable | boolean: řídí, zda je možné sloupce filtrovat. Default: true.
• editable | array: pole názvů sloupců, které mají být editovatelné.. Default: [].
• getTrProps | function: zpětné volání prováděné pro každý řádek za účelem přizpůsobení jeho stylu (předaný stav tabulky, informace o řádku, sloupce a instance tabulky). Default: none.
• onColumnDrag | function: funkce vyvolaná při přetažení sloupce na jinou pozici. Default: onColumnDrag() {}.
• onColumnDelete | function: funkce vyvolaná s názvem sloupce po kliknutí na příslušné tlačítko pro odstranění sloupce.. Default: onColumnDelete() {}.
• onColumnNameChange | function: funkce vyvolaná při přejmenování sloupce (volá se se starým názvem jako prvním a novým názvem jako druhým argumentem).. Default: onColumnNameChange() {}.
• onClickRemove | function: funkce určující akci, která se má provést pro řádky odstraněné z dat (výchozí hodnota je prázdná funkce).. Default: onClickRemove() {}.
• onEdit | function: funkce vyvolaná s aktualizovanou sadou dat poté, co uživatel změnil hodnotu buňky (platí pouze v případě, že je tabulka editovatelná).. Default: onEdit() {}.
• onTutorialCompletion | function: funkce vyvolaná po dokončení výukové tabulky s daty. Default: onTutorialCompletion() {}.
• filters | array: pole filtrů. Default: [].
• onFilteredChange | function: funkce vyvolaná s aktuálními filtry po filtrování dat uživatelem. Default: onFilteredChange() {}.
• showRemove | boolean: určuje, zda se mají zobrazovat zaškrtávací políčka pro řádky, které mají být odstraněny.. Default: false.
• showIdColumn | boolean: řídí, zda se má zobrazit sloupec ID. Default: true.
• disableDownload | boolean: zda skrýt tlačítko pro stažení dat jako souboru CSV nebo JSON.. Default: false.
• className | string: název třídy. Default: ''.
• style | object: Objekt umožňující vlastní stylování css. Výchozí hodnota je prázdný objekt. Default: {}.

Příklady

Živý 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 }}
/>

Výsledek

ReferenceError: Provider is not defined