Tabele

Prosta tabela

Szerszy niż pokój

Tabela z akcjami

Wiersze w paski, podświetlane pod wskaźnikiem

Wiersze, które można zaznaczyć

Pole przy głowie każdego wiersza, jedno w nagłówku dla wszystkich, oraz akcje powyżej: przesyłają zaznaczone wiersze do ich własnego adresu i pozostają poza zasięgiem, gdy nic nie jest zaznaczone.

Pliki, suma, akcja na każdym wierszu

Ścieżki odczytywane po ich nazwach, foldery przed nimi są odcinane od początku. Pasek kończy się na liczbie wierszy, a akcja oznaczona jako `wszystko` działa bez zaznaczenia — obejmuje każdy wiersz i prowadzi pasek, gdy jest to oczekiwane.

Filtry

Pasek filtrów na głowie tabeli, jedno dyskretne menu dla każdego, mówiące, na co się zwęża, gdy to robi. Na serwerze żyją w zapytaniu strony — każda opcja to link — a kontroler zwęża wiersze na ich podstawie; w vue są to wartości przekazywane stronie dla jej API, lub stosowane przez tabelę do już posiadanych wierszy. Każda opcja to pole — okrągłe dla wyboru jednego — kolorowane według tonu, gdy ma taki, statusu lub kategorii.

Sortowanie

Nagłówek, który sortuje, jest linkiem na serwerze i przyciskiem w vue: rosnąco, malejąco, a potem powracając do porządku, który strona zadeklarowała, na którym lista się otwiera i który jej strzałka pokazuje od początku. Puste daty idą na końcu w obie strony, a imiona porównują się tak, jak język je uporządkowuje. Tutaj tabela sortuje wiersze, które sama otrzymała; kontroler paginujący swoją listę odczytuje to samo zapytanie.

Sortowanie w przeglądarce, z twig

`vue: true` przekazuje te same kolumny i wiersze do bliźniaka vue: sortuje i przeszukuje całą listę w przeglądarce, bez ładowania strony. Dla listy, którą strona trzyma w całości — krótkiej lub takiej, dla której nie ma serwisu api.

Akcje w wyborze

Ten sam pasek, gdy jest wystarczająco dużo akcji, by go zapełnić: jedna jest wybierana, a następnie stosowana.

Komórki z linkami i ikonami

Stan ładowania

Stan pusty

Wyrównanie kolumn

Kody, liczby i sumy

`cell: 'code'` ustawia identyfikator w mono face; `cell: 'number'`, lub `unit`, zapisuje liczbę w lokalizacji strony. `negative: true` rysuje liczbę poniżej zera w tonie błędu, a jej znak minus również to sygnalizuje. `totals` to wiersz, który strona przekazuje, rysowany pod innymi — tabela nie sumuje nic, trzymając jedną stronę lub przefiltrowaną listę. Rysowana przez serwer, a potem przez vue.

Z markdown

Tabela napisana w markdown i przetworzona przez `markdown_ds`: kolumny, ich wyrównanie oraz formatowanie każdej komórki są odczytywane z dokumentu, a tabela jest rysowana tutaj jak każda inna. `markdown` zachowuje prosty `<table>`, dla wszystkiego, co nie jest stroną — e-mailem, kanałem.

Grupuj wiersze

Wiersz zawierający tylko grupę nie jest wierszem: to linia między dwoma ich seriami, z nadanym słowem. Rozciąga się na całą tabelę i nazywa to, co następuje — to samo, co separator menu.

Komórki statusu

Stan to okrąg, nigdy kolor wybrany przez kogoś: komórka przyjmuje nazwę typu, lub typ z liczbą i tytułem, i rysuje ikonę statusu, jaką rysuje reszta systemu. Nic do stylizacji na stronie.

Przyklejony nagłówek

Długa tabela jest odczytywana kolumna po kolumnie tak samo jak wiersz po wierszu. Przy `sticky` nagłówek pozostaje w widoku, podczas gdy wiersze przewijają się pod nim; strona z czymś przypiętym na górze mówi, jak daleko w `--table-sticky-top`.

Tabela w własnej strefie

Strefa `zone--table` jest przydzielona całej tabeli: co ją prowadzi na górze, jej strony na dole, z tego, co się przewija, a między nimi dno tabeli aż do dna strefy, nawet dla trzech wierszy. Każda tabela może się w niej znajdować, napisana przez serwer lub przez vue. Przy `natural`, jak ta po lewej, tabela zachowuje szerokość swoich kolumn, ani nie rozciągnięta, ani nie ściśnięta.

Tabela jednostek Vue

Tabela Vue z zaznaczeniem

Ten sam kontrakt po stronie klienta: zaznaczone klucze wracają przez v-model:selected, każda akcja jest emitowana jako bulk-action, a jedna z adresem jest przesyłana, jak serwerowa tabela to przesyła. Te nie mają żadnej, więc linia poniżej mówi, co by zostało zrobione. Trzy wiersze na stronę, suma na końcu paska, oraz Archiwizuj wszystko nie wymagające zaznaczenia.

Paginacja bez sumy

Gdy API nie zwraca sumy, pager wraca do poprzedniego/następnego.

Stronicowanie, rysowane przez serwer

`pagination(page, pages_count)` rysuje strony listy jako linki: każdy zachowuje trasę i zapytanie strony, na której się znajduje — wyszukiwanie, sortowanie — i zmienia tylko `page`, licząc od 1. Pokazywane liczby to numery pagera vue: pierwszy, ostatni, bieżący i jego sąsiedzi. `compact` utrzymuje poprzednią i następną stronę wokół numeru strony; `route` i `params` przeskakują do innego adresu.

Formatery dat Vue