Droptables: Stylizacja tabeli

1. Formatowanie w tabeli

Na pasku narzędzi można ustawić styl komórki, taki jak: czcionka, rozmiar czcionki, styl tekstu, kolor tła komórki, kolor tekstu, wyrównanie komórki w pionie i poziomie itp. Styl ten można zastosować do pojedynczej komórki lub wielu komórek.

Wysokość wiersza i szerokość kolumny można zdefiniować w pikselach. Przejdź do menu Format > Zastosuj rozmiar kolumny/linii , a następnie wybierz Zmień rozmiar kolumny / Zmień rozmiar wiersza . W wyskakującym okienku możesz wybrać zakres i ustawić px dla kolumn lub wierszy. Kliknij Gotowe , aby zakończyć.

2. Motyw i opcje sortowania

wyboru motywu znajdziesz w menu Motyw . Wystarczy kliknąć motyw, aby go zastosować.

W tym samym menu Motyw > Kolory alternatywne funkcja „Automatyczne stylizowanie” pozwala na pokolorowanie linii w tabeli za pomocą nagłówka i Stopki . Możesz wybrać style szablonu lub utworzyć własne w ustawieniach wtyczki.

Parametr sortable umożliwia sortowanie danych AJAX w interfejsie użytkownika. Możesz to zrobić w menu Format > Sortuj .

Wyrównanie tabeli polega na wyrównaniu div-a zawierającego całą tabelę, na przykład wyśrodkowaniu całej tabeli. Funkcję tę można znaleźć w menu Format > Wyrównanie tabeli .

Podświetlanie komórek jest również dostępne opcjonalnie. W konfiguracji . Domyślnie jest ona wyłączona. Można dostosować kolor i krycie podświetlenia.

3. Dodaj podpowiedź do komórek

podpowiedzi po kliknięciu prawym przyciskiem na każdej komórce tabeli

Możesz ustawić szerokość podpowiedzi w pikselach. Przeniesie Cię to do podpowiedzi z edytorem, który możesz edytować.

Dodaj treść i zapisz. Gotowe. Podpowiedź zostanie wyświetlona publicznie po najechaniu myszką.

4. Administracja ACL i front-endem

Można zarządzać tabelami z poziomu interfejsu Joomla. W menedżerze menu Joomla dodaj pozycję „Nowe menu” i wybierz typ „ Zarządzaj tabelami”, a następnie wybierz szablon Droptables

Oto co można zobaczyć Droptables Manager z poziomu front-endu.

Możesz użyć listy kontroli dostępu grupy użytkowników Joomla (ACL), aby kontrolować działania związane z edycją tabel. Aby skonfigurować, kto ma prawo przeglądać tabele, przejdź do Role użytkowników w Droptables .

Właściciela tabeli można ustawić w menu Tabela > Dostęp do tabeli.

5. Zamrażanie wierszy i kolumn

Zamrażanie kolumny

Zamrożenie kolumn jest dostępne w menu Format > Opcje responsywne . Można zamrozić do 5 kolumn. Liczenie odbywa się od pierwszej kolumny.

Aby zamrozić kolor/wiersz, dostępna jest dodatkowa opcja umożliwiająca ustalenie wysokości tabeli (ponieważ kontener tabeli może mieć nieskończoną wysokość).

Po wybraniu kolumny do zamrożenia będziesz mieć możliwość przewijania tabeli i zawsze będziesz wyświetlać ustaloną kolumnę.

Zamrażanie rzędów

Można to znaleźć w Format menu > Nagłówek tabeli . W tym miejscu można włączyć opcję i ustawić zamrożenie wierszy (maksymalnie 5 wierszy).

Jeśli chcesz ustawić wysokość tabeli, wróć do opcji responsywnych.

Następnie pierwszy wiersz zostanie zamrożony na froncie zgodnie z ustawieniem.

6. Filtrowanie danych kolumnowych

Opcja filtrowania jest dostępna w menu Format > Filtry . Możesz ją aktywować, klikając, aby włączyć publiczne pola filtrowania danych.

Przykład filtrów:

7. Wypełnienie komórki i promień obramowania

Ikonę obramowania znajdziesz na pasku narzędzi. Umożliwia ona dostosowanie odstępu i promienia obramowania komórki.

8. Niestandardowy CSS

Pójdźmy o krok dalej. Jeśli jesteś projektantem stron internetowych i posiadasz umiejętności edycji CSS, będziesz mógł dodać CSS w Menu Format > Niestandardowy CSS .

Komórki, wiersze i kolumny mają współrzędne, które pozwalają zidentyfikować każdą z nich i zastosować do niej niestandardowy kod CSS. R to wiersz, C to kolumna. Tutaj mamy wiersz 1 (r1), kolumnę 4 (c4) = dtr1 dtc4

Kod CSS jest kolorowany za pomocą funkcji Code Mirror. Kod CSS może zawierać mniej kodu, to też działa!

9. Responsywne tabele Joomla

Czy moje tabele są responsywne i korzystają z przewijania na małych urządzeniach?

Ukrywanie Cols

Droptables obsługują responsywny projekt za pomocą narzędzia priorytetowego, jako opcję. Domyślnie funkcja responsywności jest wyłączona, więc pojawi się przepełnienie (co jednak działa świetnie na urządzeniach mobilnych). Aby skorzystać z ukrywania kolumn , należy przejść do Formatu menu > Opcje responsywne.

Tryb responsywny jest zaawansowany, można zdefiniować priorytet ukrywania kolumn w wersjach mobilnych. Po ukryciu kolumn, na urządzeniu mobilnym pojawi się menu z polem wyboru, które wymusi wyświetlanie/ukrywanie kolumn.
Rozmiar kolumn jest ustalany podczas edycji tabeli. Jeśli rozmiar wszystkich kolumn będzie zbyt duży dla kontenera, pojawi się przepełnienie, a na urządzeniach mobilnych będzie można łatwo przewijać.

Tabela z przewijaniem (lepsza przy małej liczbie kolumn)

Tabela z ukrytą kolumną (lepsza w przypadku dużej liczby kolumn)

Powtarzający się nagłówek

To kolejna opcja, jeśli chcesz wstawić tabelę na małym obszarze witryny. Przejdź do Formatu menu > Opcje responsywne. Następnie wybierz Typ responsywny > Powtarzający się nagłówek.

Dostępne będą opcje dostosowywania do Twoich potrzeb:

• Punkt przerwania responsywnego (px): Wybierz wartość punktu przerwania w pikselach, aby określić, kiedy tabela przełączy się na ten tryb responsywny
• Maksymalna wysokość responsywna (px): Po aktywowaniu trybu responsywnego, w zależności od wartości punktu przerwania, zdefiniuj maksymalną wysokość, aby uniknąć bardzo długiej tabeli
• Stylizacja trybu responsywnego: Zastosuj domyślny styl dla tego trybu responsywnego lub użyj kolorów tabeli

Następnie możesz zobaczyć jak tabela będzie wyglądała w interfejsie użytkownika.

10. Pobierz tabelę

Aby udostępnić tabelę publicznie, przejdź do menu „Tabela” i zaznacz „Eksportuj z Excela” . Po pobraniu przez interfejs użytkownika plik będzie miał format *.xlsx.

11. Paginacja

Tę funkcję znajdziesz w menu Format > Paginacja w każdej edycji tabeli. Użyj przycisku przełączającego, aby włączyć i wybrać liczbę wierszy wyświetlanych na stronie.

12. Format dla pojedynczych komórek 

Możesz ustawić format: Datę i godzinę, Waluty, Liczby dla pojedynczych komórek w Droptables . Najpierw zaznacz jedną/wiele komórek. Następnie przejdź do Menu Format > Data i godzina.

Następnie w ten sam sposób można wprowadzić waluty i liczby

13. Wydrukuj tabelę na front-endzie

Czasami musisz wydrukować swoją tabelę. Aby więc wyświetlić przycisk „Drukuj” w interfejsie, najpierw przejdź do menu „Tabela” i zaznacz „Drukuj” .