Tabele w WordPress to rzecz zwodniczo prosta. Dopóki potrzebują Państwo jednej czy dwóch statycznych siatek na całą witrynę, ręczny HTML wystarcza. Jednak gdy tylko stykają się Państwo z regularną aktualizacją danych, importem z Excela lub Arkuszy Google, sortowaniem według kolumn, wbudowane metody zamieniają się w niekończącą się krzątaninę z kodem.

Co gorsza: Państwa witryna jest responsywna, a tabele HTML nie. Na ekranie mobilnym rozjeżdżają się, wymagają przewijania poziomego i psują cały układ. Dodanie interaktywności (filtry, wyszukiwanie, edycja z frontendu) standardowymi środkami WordPress jest praktycznie niemożliwe bez angażowania programisty.

wpDataTables to wtyczka, która zamyka wszystkie te problemy jedną instalacją. Zero kodu, pełna responsywność „od razu po wyjęciu z pudełka", dziesiątki źródeł danych i wizualizacja za pomocą wykresów. Korzysta z niej ponad 80 000 firm, a bezpłatną wersję Lite na WordPress.org zainstalowano ponad 60 000 razy. Sprawdźmy, co potrafi i jak z nią pracować.

💡 Szybki przegląd:

• Proszę zainstalować wpDataTables z CodeCanyon i aktywować na swojej witrynie.
• Proszę utworzyć tabelę z CSV, Excela, Arkuszy Google, MySQL, JSON, XML lub ręcznie, każde źródło jest odpowiednie.
• Proszę skonfigurować wygląd: kolory, czcionki, wyrównanie, zachowanie responsywne na urządzeniach mobilnych.
• Proszę wstawić gotowy shortcode do wpisu lub strony, tabela pojawia się natychmiast z filtrowaniem, sortowaniem i wyszukiwaniem.
• W razie potrzeby proszę zbudować wykres na podstawie tej samej tabeli i dodać go w ten sam sposób.

Co jest nie tak z tabelami HTML w WordPress

Standardowy sposób wstawiania tabel to znaczniki HTML w zakładce „Tekst" edytora. Podstawowa struktura wygląda następująco:

1
<table style="width: 100%;">
2
<tbody>
3
<tr>
4
<th style="width: 33%;">First</th>
5
<th style="width: 34%;">Second</th>
6
<th style="width: 33%;">Third</th>
7
</tr>
8
<tr>
9
<td>Jack</td>
10
<td>Jackson</td>
11
<td>25</td>
12
</tr>
13
<tr>
14
<td>Jane</td>
15
<td>Jenson</td>
16
<td>30</td>
17
</tr>
18
</tbody>
19
</table>

Rezultat to najprostsza tabela z trzema kolumnami. Wygląda przyzwoicie, jeśli mają Państwo jedną taką na witrynie i nie planują jej aktualizować.

Jednak to podejście ma trzy fundamentalne problemy. Po pierwsze: tabele HTML są statyczne. Dane są wprowadzone ręcznie, a każda zmiana oznacza ponowne edytowanie kodu. Po drugie: responsywność. Motyw może być elastyczny, ale <table> nie. Na telefonie użytkownik widzi obcięte kolumny lub poziome przewijanie. Po trzecie: ani filtrów, ani sortowania, ani wyszukiwania, tylko martwa siatka.

Państwa witryna jest responsywna. Państwa tabele nie.

Ręczny import danych z Excela lub Arkuszy Google też nie ratuje sytuacji: kopiuj-wklej z arkuszy kalkulacyjnych do WordPress zamienia formatowanie w chaos. Jeśli tabel jest wiele i są często aktualizowane, tracą Państwo czas nie na treść, a na walkę z układem.

Twórz tabele bez kodu z wpDataTables

wpDataTables to wtyczka premium, która przekształca WordPress w pełnoprawny silnik do pracy z tabelami i wykresami. Ani jednej linii kodu. Instalują Państwo, wybierają źródło danych, konfigurują wygląd i tabela jest gotowa do wstawienia za pomocą shortcode’a.

Wtyczka jest dystrybuowana przez CodeCanyon w modelu „kup raz, korzystasz". Ceny zaczynają się od 49 USD rocznie za licencję na jedną domenę (plan Starter). Dostępne są trzy wyższe plany: Standard, Pro i Developer, różnią się one liczbą domen i zestawem zaawansowanych funkcji, takich jak połączenie z wieloma bazami danych i integracje z WooCommerce. Bezpłatna wersja Lite jest dostępna w katalogu WordPress.org z podstawową funkcjonalnością.

🔗 Więcej o wpDataTables | 🔗 Demo na żywo

Twórcy postawili na trzy rzeczy: elastyczność źródeł, głęboką personalizację i pracę z danymi na żywo. Przejdźmy przez kluczowe możliwości.

Wiele źródeł danych

Wtyczka pobiera dane z dowolnego miejsca. Excel, CSV, Arkusze Google, XML, JSON, zserializowana tablica PHP i bezpośrednie zapytanie MySQL, wszystko to jest dostępne na etapie tworzenia tabeli. Można ręcznie wypełnić tabelę od zera za pomocą edytora backendowego. Lub połączyć się ze źródłem w czasie rzeczywistym, aby tabela dynamicznie aktualizowała się przy każdym ładowaniu strony.

Na osobną wzmiankę zasługuje MySQL. Piszą Państwo zapytanie, wtyczka renderuje wynik jako sortowalną tabelę z wyszukiwaniem. Obsługiwane są osobne połączenia z MS SQL i PostgreSQL, przy czym każda tabela może pobierać dane z własnego serwera. Dla projektów z rozproszoną architekturą rozwiązuje to problem konsolidacji danych bez pośredniego ETL.

Rozszerzona konfiguracja i responsywny układ

Projekt tabeli składa się z checkboxów i wyboru koloru, bez żadnego CSS. Ustawienia obejmują typografię, wyrównanie, format dat i czasu oraz język interfejsu. Dostępne są gotowe skórki tabel: fioletowa, ciemna, niebieska. Dla skomplikowanych przypadków przewidziano pola na własny JS i CSS.

Responsywność zrealizowano bez kompromisów. Wtyczka nie tylko ściska tabelę do szerokości ekranu, to Państwo decydują, jak będzie się ona zachowywać na urządzeniach mobilnych. Można włączyć elastyczne zwijanie kolumn, dodać poziome przewijanie lub ograniczyć maksymalną szerokość. Tabela pozostaje czytelna na każdym urządzeniu.

Filtry do efektywnego wyszukiwania

Podczas tworzenia tabeli włączają Państwo filtry, a użytkownicy zyskują możliwość natychmiastowego zawężania wyników według dowolnej kolumny. W przypadku dużych zbiorów danych radykalnie zmienia to doświadczenie: zamiast przewijania przez trzy ekrany, osoba wpisuje parametr i widzi tylko istotne wiersze.

Filtry działają po stronie serwera. Każda akcja użytkownika zwiększa obciążenie obliczeniowe bazy danych, dlatego wtyczka umożliwia wyłączenie filtrowania tam, gdzie jest ono zbędne. Równowagę między szybkością a wygodą konfiguruje się pod konkretną tabelę.

Edycja MySQL z frontendu

Unikalna funkcja: po włączeniu opcji na karcie „Edycja" pozwalają Państwo użytkownikom edytować dane bezpośrednio z frontendu witryny. To nie tylko kosmetyka, zmiany są zapisywane w bazie danych. Dostęp konfiguruje się według ról: dla wszystkich odwiedzających, tylko dla zalogowanych użytkowników lub dla konkretnych grup.

Scenariuszy jest bez liku: klienci aktualizują swoje wpisy w tabeli CRM, pracownicy oznaczają statusy zadań, subskrybenci uzupełniają wspólny rejestr. Bez osobnego panelu administracyjnego, bez szkolenia użytkowników WordPressa.

Wizualizacja za pomocą wykresów

Człowiek odczytuje wizualizację wielokrotnie szybciej niż liczby w tabeli. wpDataTables buduje dynamiczne wykresy w oparciu o Google Charts, HighCharts lub Chart.js, wystarczy wskazać tabelę źródłową i przyporządkować kolumny do osi wykresu.

Typów wykresów jest kilkanaście: liniowe, kołowe, słupkowe, histogramy, punktowe. Po skonfigurowaniu wykres otrzymuje własny shortcode i jest osadzany we wpisie niezależnie od tabeli. Po zaktualizowaniu danych źródłowych wykres jest automatycznie przerysowywany. Idealne rozwiązanie dla blogerów publikujących miesięczne raporty o dochodach oraz dla korporacyjnych dashboardów.

Jak utworzyć tabelę adaptacyjną: instrukcja krok po kroku

Teoria jest jasna, przechodzimy do praktyki. Trzy kroki dzielą Pana/Panią od działającej tabeli na stronie.

Krok 1: proszę zainstalować wpDataTables

Wtyczkę kupuje się na CodeCanyon. Po dokonaniu płatności proszę wejść do sekcji „Downloads" na swoim koncie, znaleźć wpDataTables i pobrać plik oznaczony jako „Installable WordPress file only". W panelu administracyjnym WordPress proszę przejść do „Wtyczki → Dodaj nową → Wyślij wtyczkę", wybrać pobrany plik ZIP i aktywować.

Do automatycznych aktualizacji konieczne będzie wprowadzenie kodu Item Purchase Code z CodeCanyon. Przyda się on również do uzyskania dostępu do wsparcia premium w pierwszym roku po zakupie.

Krok 2: proszę utworzyć tabelę

W bocznym menu WordPress pojawi się nowa pozycja „wpDataTables". Proszę ją kliknąć, a następnie niebieski przycisk „Dodaj". Wtyczka zaproponuje wybór sposobu utworzenia tabeli: import z CSV/Excela, połączenie z Google Sheets, utworzenie ręczne, zapytanie SQL lub integracja z zewnętrznym API.

Dla demonstracji weźmiemy CSV. Proszę przesłać plik, wtyczka sama rozpozna separatory i pokaże podgląd. Na następnym ekranie podaje Pan/Pani nazwę tabeli i, w razie potrzeby, edytuje kolumny: zmienia nazwy, usuwa zbędne, dodaje nowe.

Ostatni ekran to dostrajanie. Tutaj włącza się narzędzia tabeli (druk, kopiowanie, eksport do PDF/Excela), filtrowanie, edycję zewnętrzną. Wszystkie zmiany są widoczne na żywo w podglądzie po prawej stronie. Po kliknięciu „Zapisz" tabela jest gotowa.

Krok 3: proszę wstawić shortcode do posta lub strony

Po zapisaniu wtyczka wygeneruje shortcode w postaci [wpdatatable id=X]. Proszę go skopiować i wkleić do dowolnego posta lub strony WordPress, to wszystko. Tabela pojawi się na stronie ze wszystkimi włączonymi funkcjami: sortowaniem, wyszukiwaniem, filtrami.

Rezultat na zrzucie ekranu powyżej: filtrowanie jest aktywne, wyszukiwanie działa, kolumny sortują się po kliknięciu. Ani jednej linii kodu poza krótkim shortcodem. Taką samą tabelę metodą HTML-ową tworzyłoby się godzinę, i tak bez interaktywności.

Jak zbudować wykres na podstawie tabeli

Gdy tabela jest gotowa, proszę otworzyć ją na liście i kliknąć „Utwórz wykres". Proszę wybrać typ wizualizacji: kolumnowy, kołowy, liniowy, punktowy, łącznie dostępnych jest kilkanaście wariantów.

W następnym kroku wskazuje Pan/Pani tabelę źródłową i przyporządkowuje kolumny do osi. Dla wykresu kolumnowego potrzebne są co najmniej dwie kolumny: kategorie i wartości. Kolumny liczbowe można filtrować suwakiem zakresu, co jest wygodne, gdy tabela ma setki wierszy, a na wykresie trzeba pokazać tylko część.

Trzeci ekran to ustawienia wizualne. Szerokość, wysokość, tło, obramowanie, czcionki, kolory serii, etykiety, podpowiedzi przy najechaniu. Po skonfigurowaniu zapisuje Pan/Pani, kopiuje shortcode wykresu i wkleja go do treści obok tabeli lub osobno.

Wykresy są dynamicznie powiązane z tabelą. Zmieniły się dane źródłowe, wykres przebudował się sam. Bez eksportu do Excela, ręcznej aktualizacji zrzutów ekranu i innej rutyny.

Rozszerzenia dla dodatkowych możliwości

Podstawowa funkcjonalność wystarcza do większości zadań. Jeśli jednak potrzebna jest specyfika, ekosystem dodatków pokrywa niszowe scenariusze.

Zaawansowane filtry. Filtrowanie kaskadowe (od lewej do prawej: wybrano kategorię, filtr podkategorii się zaktualizował), wyszukiwanie fasetowe, ukrywanie tabeli do momentu wyboru parametrów oraz wyszukiwanie na żywo w trakcie wpisywania. Włącza się jednym kliknięciem w ustawieniach.

Kreator raportów generuje dokumenty Word lub Excel bezpośrednio z danych tabelarycznych. Scenariusz: pracownicy wypełnili tabelę przez frontend, Pan/Pani klika przycisk i gotowy jest miesięczny raport do druku. Przydatne przy kartach czasu pracy, fakturach i cyklicznej analityce.

Formidable Forms. Formularze zbierają dane od użytkowników, a wtyczka automatycznie przekształca każde przesłanie w wiersz tabeli. Pole formularza to kolumna tabeli. Bez żadnego pośredniego eksportu.

Gravity Forms. Ta sama mechanika, ale dla najpopularniejszego kreatora formularzy WordPress. Po integracji Gravity Forms staje się dodatkowym źródłem danych podczas tworzenia tabeli. Obsługiwana jest zewnętrzna edycja rekordów utworzonych przez formularze.

Plan subskrypcji i ceny

wpDataTables ma prostą siatkę cenową z czterema poziomami:

Wszystkie taryfy obejmują rok wsparcia premium i comiesięczne aktualizacje. Licencja jest dożywotnia: jeśli jej Pan/Pani nie przedłuży, wtyczka nadal działa, ale traci się dostęp do aktualizacji i wsparcia. Obowiązuje 15-dniowa gwarancja zwrotu pieniędzy.

Najlepszym sposobem na ocenę wtyczki przed zakupem jest żywa piaskownica na stronie wpDataTables. Otrzymuje Pan/Pani pełny dostęp do backendu: może tworzyć tabele, budować wykresy, eksperymentować z ustawieniami. Żadnych demonstracji wideo i zrzutów ekranu, tylko prawdziwa jazda próbna w przeglądarce.

Na szybki start dostępna jest darmowa wersja Lite na WordPress.org (ponad 60 000 aktywnych instalacji). Funkcjonalność jest ograniczona, ale wystarczająca, by zrozumieć, czy wtyczka pasuje do Państwa zadania.

⁉️🤔 Często zadawane pytania

Czy do pracy z wpDataTables trzeba umieć programować?

Nie, wszystkie tabele i wykresy tworzy się przez interfejs wizualny, kreator przeprowadzi od wyboru źródła do wstawienia shortcode’a. Pola na własny JS i CSS są dostępne, ale są opcjonalne. Deweloperzy docenią możliwość pisania własnych zapytań SQL, łączenia się z zewnętrznymi bazami danych i korzystania z REST API do pobierania danych z serwisów zewnętrznych.

Co dzieje się z tabelami po usunięciu wtyczki?

Domyślnie tabele są przechowywane w bazie danych, nawet jeśli dezaktywuje Pan/Pani lub usunie wpDataTables. Po ponownej instalacji zostaną przywrócone. Jest to konfigurowalne: w opcjach można wybrać całkowite usunięcie danych razem z wtyczką. Tabele nie są na stałe związane z wtyczką, zawsze można wyeksportować dane do CSV i przenieść je do innego narzędzia.

Czym wersja płatna różni się od Lite?

Wersja Lite pozwala tworzyć tabele z CSV, Excela, Google Sheets, JSON i XML, a także ręcznie. Dostępne jest podstawowe sortowanie i wyszukiwanie. Brakuje jednak: zapytań MySQL, połączeń z wieloma bazami danych, wykresów, edycji zewnętrznej, filtrowania, integracji z WooCommerce i wszystkich dodatków. Jeśli zarządza Pan/Pani danymi ze źródeł zewnętrznych i chce budować wykresy, potrzebna jest wersja płatna. Do statycznych tabel wersja Lite najprawdopodobniej wystarczy.

Czy wtyczka obsługuje WooCommerce?

Tak, począwszy od taryfy Standard. Można tworzyć dynamiczne tabele produktów, które automatycznie aktualizują się przy zmianie katalogu WooCommerce. Kupujący otrzymują posortowaną, przefiltrowaną listę produktów z aktualnymi cenami i stanami magazynowymi. Dla sklepów z dużym asortymentem zastępuje to osobną wtyczkę katalogową.

Ile tabel można utworzyć?

Tyle, ile potrzeba. Żadna taryfa nie ogranicza liczby tabel i wykresów. Jedynym ograniczeniem licencyjnym jest liczba domen, na których aktywowano wtyczkę.

Co wybrać do swojego zadania

wpDataTables pokrywa całe spektrum pracy z tabelami w WordPressie, od prostego wyświetlania pliku CSV po rozproszone zapytania do baz danych z wizualizacją na wykresach. I robi to bez konieczności pisania kodu, co w ekosystemie WordPressa jest rzadkością.

Mechanika jest prosta: wybiera Pan/Pani źródło, konfiguruje wygląd, wstawia shortcode. Potem tabela żyje własnym życiem: aktualizuje się przy zmianie źródła, filtruje po kliknięciu użytkownika, sortuje według dowolnej kolumny i pozostaje czytelna na urządzeniach mobilnych. Ani jednej linii HTML, ani osobnego kodowania pod smartfony.

Wtyczka jest płatna, ale z darmową jazdą próbną w piaskownicy i wersją Lite do podstawowych scenariuszy. Cena startowa 49 USD rocznie jest porównywalna z godziną lub dwiema pracy osoby zajmującej się kodowaniem front-endu i daje narzędzie na cały rok.

🔗 Pobierz wersję Lite z WordPress.org