Tree Table je rozšiřitelná tabulka, která umožňuje zobrazovat hierarchická data (stromová struktura) přímo v tabulkovém formátu. Uživatel může rozbalovat a sbalovat jednotlivé uzly a procházet tak detailnější úrovně dat.
Záhlaví tabulky - text
Záznamy v tabulce, rozbalované pomocí chevronu
Záznamy v tabulce s nastaveným zobrazením checkboxu
Vyhledávání záznamů v tabulce
Zápatí tabulky s akcemi
Paginace pro navigaci mezi stránkami
Globální akce
Varianty
Základní varianta
Tabulka s řazením sloupců, filtrováním, stránkováním a akcemi v patičce.
Live preview
Zvolit téma:
Akce řádků
Tabulka s akcemi dostupnými pro každý řádek. Zobrazuje kontextové tlačítka pro operace s jednotlivými položkami.
Live preview
Zvolit téma:
Chování
Zvýraznění řádků
Tabulka s možností zvýraznění řádků při najetí myší nebo výběru. Zlepšuje orientaci uživatele v datech.
Live preview
Zvolit téma:
Filtry sloupců
Tabulka s pokročilými filtry pro jednotlivé sloupce. Umožňuje rychlé vyhledávání a filtrování dat podle různých kritérií.
Live preview
Zvolit téma:
Přeuspořádání sloupců
Tabulka s možností přetahování sloupců pro změnu jejich pořadí podle potřeb uživatele.
Live preview
Zvolit téma:
Výběr řádků checkboxy
Tabulka s checkboxy pro výběr více řádků.
Live preview
Zvolit téma:
Multi výběr řádků checkboxy
Tabulka s checkboxy pro výběr více řádků, kdy se výběr projeví na všech podřízených řádcích.
Live preview
Zvolit téma:
Rychlé akce
Tabulka s rychlými akcemi, které se zobrazí při najetí na řádek. Poskytuje okamžitý přístup k nejčastějším operacím.
Live preview
Zvolit téma:
Global Filter
Tabulka s globálním filtrem pro všechny sloupce.
Live preview
Zvolit téma:
Custom Footer
Akce se u Treetable zobrazují v patičce tabulky.
Live preview
Zvolit téma:
Loading
Pro zajištění integrity se při stránkování zobrazuje full loading, u kterého je deaktivována klikací plocha.
Live preview
Zvolit téma:
Nesting
Ukázka 10 úrovní vnoření.
Live preview
Zvolit téma:
Horizontalní scrollování
Je-li tabulka dlouhá a nevejde se do viewportu, zobrazí se automaticky horizontální scrollbar.
Obsah buněk tabulky
Textový obsah
Text v buňce může mít maximálně tři řádky.
Pokud je text delší, automaticky se zobrazí v tooltipu (na hover).
Komponenty v buňkách
Do buňky je možné vložit libovolnou komponentu.
Pokud ale není obsahem čistý text, nefunguje standardní filtrování a řazení nad tímto sloupcem.
V takovém případě musí vývojář logiku filtrování a řazení nastavit ručně.
Přehled předdefinovaného obsahu v tabulce
Pravidlo pro buttony v buňce
Zobrazit lze až tři buttony, přičemž třetí je již zobrazen jako dropdown s elipsis ikonou.
Pravidlo pro text v buňce
Číselné (častky, měna) zarovnáváme pokaždé doprava
Ostatní text doleva
Resposivita
Vyjímky Table na mobilních zařízení:
Column Reorder (přesouvání sloupců)
Funkce není dostupná na mobilních zařízeních.
Na mobilech je proto nutné spoléhat na výchozí pořadí sloupců nebo připravit alternativní zobrazení.
