Table je komponenta pro zobrazení strukturovaných dat v tabulkovém formátu. Podporuje řazení, filtrování, paginaci a různé interaktivní funkce pro práci s daty.
Vyhledávání záznamů v tabulce
Záhlaví tabulky - text
Záznamy v tabulce
Možnosti řazení a filtrování sloupců
Záznamy v tabulce - tagy
Globální akce
Paginace pro navigaci mezi stránkami
Záznamy v tabulce - akce
Varianty
Základní varianta
Standardní tabulka s řazením sloupců, paginací a základními funkcemi pro zobrazení dat.
Live preview
Zvolit téma:
Statická varianta
Tabulka bez interaktivních funkcí, vhodná pro jednoduché zobrazení dat bez potřeby řazení nebo filtrování.
Live preview
Zvolit téma:
Skryté záhlaví
Tabulka bez viditelného záhlaví, užitečná když názvy sloupců nejsou potřeba nebo jsou zřejmé z kontextu.
Live preview
Zvolit téma:
Master-detail varianta
Tabulka s možností rozbalení řádků pro zobrazení detailních informací. Umožňuje hierarchické zobrazení dat.
Live preview
Zvolit téma:
Kombinovaný výběr dvou tabulek
Propojené tabulky s možností výběru položek napříč oběma tabulkami. Užitečné pro přenos dat mezi seznamy.
Live preview
Zvolit téma:
Chování
Akce celého řádku (Row click)
Obsahuje-li řádek tabulky nějakou akci (checkbox, masterdetail, radiobutton) lze jej aktivovat kliknutím kamkoliv na řádek. Obsah řádku lze i přes tuto funkci bezproblému kopírovat.
Live preview
Zvolit téma:
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:
Přeuspořádání řádků
Tabulka umožňující přetahování řádků pro změnu pořadí dat. Vhodné pro seznamy s prioritami nebo custom řazení.
Live preview
Zvolit téma:
Výběr řádků checkboxy
Tabulka s checkboxy pro výběr více řádků současně. Umožňuje hromadné operace s vybranými položkami.
Live preview
Zvolit téma:
Výběr řádků radio buttony
Tabulka s radio buttony pro výběr pouze jednoho řádku. Vhodné když je potřeba vybrat právě jednu položku.
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:
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:
Pruhované řádky
Tabulka s alternativním zbarvením řádků pro lepší čitelnost a orientaci ve velkém množství dat.
Live preview
Zvolit téma:
Nekonečné scrollování (lazy loading)
Tabulka s automatickým načítáním dalších dat při scrollování. Vhodné pro velké datové sady bez klasické paginace.
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í.