Table
Obsah
Úvod
Účel
Tabulka slouží k přehlednému zobrazení strukturovaných dat ve formě řádků a sloupců. Umožňuje uživatelům snadno číst, porovnávat a analyzovat informace. Typicky zahrnuje funkce jako třídění, filtrování a další interaktivní možnosti pro práci s daty.
Kde se používá
Komponenta je ideální tam, kde je třeba zobrazit větší množství dat přehledným a strukturovaným způsobem. Typicky pro účely:
- prezentaci statistik a výstupů
- správy uživatelů, objednávek, reportů nebo inventáře
Varianty
Základní verze tabulky bez specifických funkcionalit. Vhodná k základnímu zobrazení strukturovaných dat. Počet řádků, sloupců a jejich velikosti je možné měnit. Zároveň je možné měnit jednotlivé typy obsahu buněk v řádku (viz níže).
Základní datová tabulka s možností doplňujících popisných údajů s akcí k otevření/zavření všech řádků přímo v hlavičce tabulky.
Počet řádků, sloupců a jejich velikosti je možné měnit. Zároveň je možné měnit jednotlivé typy obsahu buněk (viz níže). Do expanzního slotu lze doplnit jakýkoliv vlastní obsah (text, obrázek, ...).
Základní datová tabulka s možností akcí s daným řádkem. Počet řádků, sloupců a jejich velikosti je možné měnit. Zároveň je možné měnit jednotlivé typy obsahu buněk (viz níže).
Počet řádků, sloupců a jejich velikosti je možné měnit. Zároveň je možné měnit jednotlivé typy obsahu buněk (viz níže).
Základní datová tabulka s možností výběru položek - checkbox přímo v hlavičce tabulky. Výběr slouží k následné práci s danými řádky. Znázornění defaultního stavu i výběr jednotlivých řádků.
Počet řádků, sloupců a jejich velikosti je možné měnit. Zároveň je možné měnit jednotlivé typy obsahu buněk (viz níže).
Datová tabulka s možností výběru položek včetně možnosti vložení doplňujících údajů. Znázornění výběru všech položek rovnou v hlavičce tabulky.
Počet řádků, sloupců a jejich velikosti je možné měnit. Zároveň je možné měnit jednotlivé typy obsahu buněk (viz níže).
Znázornění tabulky, která neobsahuje žádné záznamy.
V rámci tabulky zůstává zachováno záhlaví a hlavička (.Table head), akce s tabulkou nejsou dostupné. Tlačítko pro přidání záznamů i znění textace empty stavu je volitelné.
Mobile specifika
Responzivní zobrazení: Tabulky nejsou příliš vhodné pro zobrazení na mobilních zařízeních. Obvykle jsou využity desktopové verze tabulky společně s lištou pro scrollování v tabulce.
Doporučení
Optimalizujte zobrazení číselných dat
Zarovnání čísel vpravo umožňuje uživatelům snadno porovnávat číselné hodnoty bez ohledu na jejich délku či velikost. Zarovnejte také text hlavičky stejně jako obsah v příslušných sloupcích.
Delší textový obsah
Delší textový obsah v tabulkách zkraťte pomocí "..." a poskytněte tooltip obsahující celý text při najetí myší na buňku.
Skenovatelnost tabulky
Odlište hlavičku pro vytvoření hierarchie informací (výraznější pozadí, písmo a barvy) a pro posílení kontrastu a skenovatelnosti.
Berte však v potaz, že nadměrné nebo bezúčelné používání barev může vést k vizuálnímu chaosu, odklonu pozornosti od důležitosti obsahu.
Jasně indikujte stav vybraného řádku
Když uživatelé interagují s řádky v tabulce, je vhodné pro efektivní práci ukázat vizuální interakci (hover stav do řádku, když je nad ním kurzor). Také v situacích, kdy uživatelé potřebují vybrat více řádků tabulky pro hromadné akce, je nutné, aby vybrané řádky vizuálně vynikly a nezanikly.
Umožněte nastavení počtu položek na stránku
Při zacházení se zdlouhavými tabulkami může být přínosné poskytnout uživatelům možnost vybrat počet zobrazených položek na stránku podle jejich preferencí, čímž zvyšuje jejich schopnost porozumět a skenovat tabulku efektivněji.
Zefektivněte tabulkové operace
Pro usnadnění hromadných operací zajistěte, aby byla zaškrtávací políčka vždy viditelná. Pokud uživatel vybere jedno nebo více zaškrtávacích políček, měly by se výrazně zviditelnit odpovídající ikony hromadných akcí signalizující dostupnost těchto akcí.
Další doporučení
Dostačující výška řádku
Výška buňky pro řádek S - 40px, M 48px a L 56px. Použití těchto výšek řádků poskytuje lepší uživatelský zážitek a zároveň poskytuje dostatečnou dotykovou oblast i pro mobilní telefony.
Skrytí akcí s řádkem pod ikonu
Skryjte akce s řádkem za třítečkovou nabídku pro účely ušetření místa, zmenšení vizuálního nepořádku a usnadnění skenování tabulkových dat bez rušivých tlačítek nebo jiných akčních položek.
Povolení přizpůsobení tabulky
Povolte uživatelům možnost osobního přizpůsobení tabulky, nabízející např. měnit velikost sloupců, řazení obsahu různými způsoby nebo připnutí sloupců (funkce 'připnutí' zajistí, že zůstanou viditelné, bez ohledu na rozsah tabulky).
Umožněte vyhledávání
Poskytněte uživatelům možnost vyhledávání v obsahu tabulky pro zefektivnění možnosti nalezení konkrétního řádku nebo údaje v tabulce.
Ukotvení buněk s akcemi
Buňky, které vyvolávají nějakou akci, je vhodné ukotvit na viditelném místě tabulky skrze oddělovače. Při scrollování tabulkou buňky za oddělovačem zůstávají na původním místě a nejsou skryty.
Empty stav
V prázdném stavu tabulky je vhodné zachovat hlavičku tabulky a doplnit vysvětlení tohoto stavu. Pro tabulky, které jsou uživatelsky editovatelné, je k prázdnému stavu vhodné doplnit tlačítko k přidání záznamů tabulky.