Таблиці в WordPress, річ оманливо проста. Поки вам потрібна одна-дві статичні сітки на весь сайт, вистачає ручного HTML. Але щойно ви стикаєтеся з регулярним оновленням даних, імпортом з Excel чи Google Sheets, сортуванням за стовпцями, вбудовані методи перетворюються на нескінченну метушню з кодом.

Гірше того: ваш сайт адаптивний, а HTML-таблиці, ні. На мобільному екрані вони розповзаються, потребують горизонтального прокручування і ламають увесь макет. Додати інтерактивність (фільтри, пошук, редагування з фронтенду) стандартними засобами WordPress практично неможливо без залучення розробника.

wpDataTables — це плагін, який закриває всі ці проблеми одним встановленням. Жодного коду, повна адаптивність «з коробки», десятки джерел даних і візуалізація через діаграми. Ним користуються понад 80 000 компаній, а безплатну Lite-версію на WordPress.org встановили понад 60 000 разів. Розбираємо, що він уміє і як з ним працювати.

💡 Швидкий огляд:

• Встановіть wpDataTables з CodeCanyon та активуйте на своєму сайті.
• Створіть таблицю з CSV, Excel, Google Sheets, MySQL, JSON, XML або вручну, підходить будь-яке джерело.
• Налаштуйте зовнішній вигляд: кольори, шрифти, вирівнювання, адаптивну поведінку на мобільних.
• Вставте готовий шорткод у пост або сторінку, таблиця з’являється одразу з фільтрацією, сортуванням і пошуком.
• За потреби побудуйте діаграму на основі тієї самої таблиці та додайте її тим самим способом.

Що не так з HTML-таблицями в WordPress

Стандартний спосіб вставки таблиць, теги HTML у вкладці «Текст» редактора. Базова структура має такий вигляд:

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>

Результат, найпростіша таблиця на три колонки. Виглядає пристойно, якщо у вас одна така на сайті і ви не плануєте її оновлювати.

Але підхід має три фундаментальні проблеми. Перша: HTML-таблиці статичні. Дані вбито вручну, і кожна зміна означає повторне редагування коду. Друга: адаптивність. Тема може бути гумовою, а <table>, ні. На телефоні користувач бачить обрізані стовпці або горизонтальне прокручування. Третя: ані фільтрів, ані сортування, ані пошуку, лише мертва сітка.

Ваш сайт адаптивний. Ваші таблиці, ні.

Ручний імпорт даних з Excel або Google Sheets теж не рятує: копіпаст з електронних таблиць у WordPress перетворює форматування на хаос. Якщо таблиць багато і вони часто оновлюються, ви витрачаєте час не на контент, а на боротьбу з версткою.

Створюйте таблиці без коду з wpDataTables

wpDataTables, преміум-плагін, який перетворює WordPress на повноцінний рушій для роботи з таблицями та діаграмами. Жодного рядка коду. Встановили, обрали джерело даних, налаштували зовнішній вигляд, і таблиця готова до вставки шорткодом.

Плагін розповсюджується через CodeCanyon за моделлю «купив раз, користуєшся». Ціни стартують від $49 на рік за ліцензію на один домен (тариф Starter). Є три старші тарифи: Standard, Pro і Developer, вони відрізняються кількістю доменів і набором просунутих функцій, як-от підключення до кількох баз даних та WooCommerce-інтеграції. Безплатна Lite-версія доступна в каталозі WordPress.org з базовим функціоналом.

🔗 Докладніше про wpDataTables | 🔗 Жива демонстрація

Розробники зробили ставку на три речі: гнучкість джерел, глибоке кастомізування та роботу з живими даними. Пройдемося ключовими можливостями.

Множинні джерела даних

Плагін забирає дані звідки завгодно. Excel, CSV, Google Sheets, XML, JSON, серіалізований PHP-масив і прямий MySQL-запит, усе це доступне на етапі створення таблиці. Можна вручну заповнити таблицю з нуля через бекенд-редактор. Або підключитися до джерела в реальному часі, щоб таблиця динамічно оновлювалася під час кожного завантаження сторінки.

Окремої згадки заслуговує MySQL. Ви пишете запит, плагін рендерить результат як сортовану таблицю з пошуком. Підтримуються окремі підключення до MS SQL і PostgreSQL, причому кожна таблиця може тягнути дані зі свого сервера. Для проєктів із розподіленою архітектурою це вирішує проблему консолідації даних без проміжного ETL.

Розширене налаштування та адаптивна верстка

Дизайн таблиці збирається чекбоксами та вибором кольору, жодного CSS. Налаштування охоплюють типографіку, вирівнювання, формат дат і часу, мову інтерфейсу. Є готові скіни таблиць: фіолетовий, темний, блакитний. Для складних випадків, поля під користувацькі JS і CSS.

Адаптивність реалізовано без компромісів. Плагін не просто стискає таблицю під ширину екрана, ви самі вирішуєте, як вона поводитиметься на мобільних. Можна увімкнути гнучке згортання стовпців, додати горизонтальне прокручування або обмежити максимальну ширину. Таблиця залишається читабельною на будь-якому пристрої.

Фільтри для ефективного пошуку

Під час створення таблиці ви вмикаєте фільтри, і користувачі отримують змогу миттєво звужувати вибірку за будь-яким стовпцем. Для великих наборів даних це радикально змінює досвід: замість скролінгу на три екрани людина вводить параметр і бачить лише релевантні рядки.

Фільтри працюють на стороні сервера. Кожна дія користувача збільшує обчислювальне навантаження на базу, тому плагін дає змогу вимкнути фільтрацію там, де вона надлишкова. Баланс між швидкістю та зручністю налаштовується під конкретну таблицю.

Редагування MySQL із фронтенду

Унікальна фіча: увімкнувши опцію на вкладці «Редагування», ви дозволяєте користувачам правити дані прямо з фронтенду сайту. Це не просто косметика, зміни записуються в базу даних. Доступ налаштовується за ролями: усім відвідувачам, лише зареєстрованим користувачам або конкретним групам.

Сценаріїв безліч: клієнти оновлюють свої записи в CRM-таблиці, співробітники відзначають статуси завдань, підписники доповнюють спільний реєстр. Без окремої адмінки, без навчання користувачів WordPress.

Візуалізація через діаграми

Людина зчитує візуалізацію в рази швидше за табличні цифри. wpDataTables будує динамічні діаграми на базі Google Charts, HighCharts або Chart.js, ви просто вказуєте таблицю-джерело та зіставляєте стовпці з осями графіка.

Типів діаграм понад десяток: лінійні, кругові, стовпчикові, гістограми, точкові. Після налаштування діаграма отримує власний шорткод і вставляється в пост незалежно від таблиці. Оновили вихідні дані, графік перемалювався автоматично. Ідеально для блогерів зі щомісячними звітами про доходи та для корпоративних дашбордів.

Як створити адаптивну таблицю: покрокова інструкція

Теорія зрозуміла, переходимо до практики. Три кроки відділяють вас від робочої таблиці на сайті.

Крок 1: встановіть wpDataTables

Плагін купується на CodeCanyon. Після оплати зайдіть у розділ «Downloads» вашого облікового запису, знайдіть wpDataTables і завантажте файл із позначкою «Installable WordPress file only». В адмінці WordPress перейдіть у «Плагіни → Додати новий → Завантажити плагін», виберіть завантажений ZIP і активуйте.

Для автооновлень потрібно буде ввести Item Purchase Code із CodeCanyon. Він же знадобиться для доступу до преміум-підтримки протягом першого року після покупки.

Крок 2: створіть таблицю

У бічному меню WordPress з’явиться новий пункт «wpDataTables». Натисніть на нього, потім, синю кнопку «Додати». Плагін запропонує вибрати спосіб створення таблиці: імпорт із CSV/Excel, підключення до Google Sheets, створення вручну, SQL-запит або зв’язка із зовнішнім API.

Для демонстрації візьмемо CSV. Завантажуєте файл, плагін сам розпізнає роздільники й показує попередній перегляд. На наступному екрані задаєте ім’я таблиці та, за потреби, редагуєте стовпці: перейменовуєте, видаляєте зайві, додаєте нові.

Останній екран, тонке налаштування. Тут вмикаються інструменти таблиці (друк, копіювання, експорт у PDF/Excel), фільтрація, зовнішнє редагування. Усі зміни відображаються в живому попередньому перегляді праворуч. Натиснули «Зберегти», таблиця готова.

Крок 3: вставте шорткод у пост або сторінку

Після збереження плагін видасть шорткод виду [wpdatatable id=X]. Скопіюйте його та вставте в будь-який пост або сторінку WordPress, на цьому все. Таблиця з’явиться на сайті з усіма увімкненими функціями: сортуванням, пошуком, фільтрами.

Результат на скриншоті вище: фільтрація активна, пошук працює, колонки сортуються за кліком. Жодного рядка коду за межами короткого шорткоду. Таку саму таблицю HTML-методом ви верстали б годину, і все одно без інтерактиву.

Як побудувати діаграму на основі таблиці

Коли таблиця готова, відкрийте її в списку та натисніть «Створити діаграму». Виберіть тип візуалізації: стовпчикову, кругову, лінійну, точкову, загалом доступно понад десяток варіантів.

На наступному кроці вказуєте таблицю-джерело та зіставляєте стовпці з осями. Для стовпчикової діаграми потрібно щонайменше дві колонки: категорії та значення. Числові стовпці можна фільтрувати повзунком діапазону — це зручно, коли в таблиці сотні рядків, а на графік потрібно вивести лише частину.

Третій екран, візуальні налаштування. Ширина, висота, фон, межі, шрифти, кольори серій, підписи, підказки під час наведення. Налаштували, зберігаєте, копіюєте шорткод діаграми та вставляєте його в контент поруч із таблицею або окремо.

Діаграми пов’язані з таблицею динамічно. Змінилися вихідні дані, графік перебудувався сам. Жодного експорту в Excel, ручного оновлення скриншотів та іншої рутини.

Розширення для додаткових можливостей

Базового функціоналу вистачає для більшості завдань. Але якщо потрібна специфіка, екосистема доповнень закриває нішеві сценарії.

Потужні фільтри. Каскадна фільтрація (зліва направо: вибрали категорію, фільтр підкатегорій оновився), фасетний пошук, приховування таблиці до вибору параметрів і живий пошук по мірі введення. Вмикається однією галочкою в налаштуваннях.

Конструктор звітів формує документи Word або Excel прямо з табличних даних. Сценарій: співробітники заповнили таблицю через фронтенд, ви натиснули кнопку, готовий місячний звіт для друку. Корисно для табелів, рахунків і регулярної аналітики.

Formidable Forms. Форми збирають дані від користувачів, плагін автоматично перетворює кожне надсилання на рядок таблиці. Поле форми, колонка таблиці. Жодного проміжного експорту.

Gravity Forms. Та сама механіка, але для найпопулярнішого конструктора форм WordPress. Після інтеграції Gravity Forms стає додатковим джерелом даних під час створення таблиці. Підтримується зовнішнє редагування записів, створених через форми.

План підписки та ціни

У wpDataTables проста цінова сітка з чотирьох рівнів:

Усі тарифи включають рік преміум-підтримки та щомісячні оновлення. Ліцензія довічна: якщо не продовжувати, плагін продовжує працювати, але ви втрачаєте доступ до оновлень і сапорту. Діє 15-денна гарантія повернення коштів.

Найкращий спосіб оцінити плагін до покупки, жива пісочниця на сайті wpDataTables. Вам дають повноцінний доступ до бекенду: створюйте таблиці, будуйте діаграми, експериментуйте з налаштуваннями. Жодних відео-демо та скриншотів, реальний тест-драйв у браузері.

Для швидкого старту є безкоштовна Lite-версія на WordPress.org (60 000+ активних установок). Функціонал обмежений, але достатній, щоб зрозуміти, чи підходить плагін під ваше завдання.

⁉️🤔 Часті запитання

Чи обов’язково вміти програмувати для роботи з wpDataTables?

Ні, усі таблиці та діаграми створюються через візуальний інтерфейс, майстер проведе від вибору джерела до вставки шорткоду. Поля для користувацького JS і CSS є, але вони опціональні. Розробники оцінять можливість писати свої SQL-запити, підключатися до зовнішніх баз даних і використовувати REST API для отримання даних зі сторонніх сервісів.

Що відбувається з таблицями після видалення плагіна?

За замовчуванням таблиці зберігаються в базі даних, навіть якщо ви деактивуєте або видалите wpDataTables. При повторній установці вони відновляться. Це налаштовується: в опціях можна вибрати повне видалення даних разом із плагіном. Таблиці не прив’язані до плагіна намертво, ви завжди можете експортувати дані в CSV і перенести їх в інший інструмент.

Чим платна версія відрізняється від Lite?

Lite-версія дозволяє створювати таблиці з CSV, Excel, Google Sheets, JSON і XML, а також вручну. Доступне базове сортування та пошук. Але відсутні: MySQL-запити, підключення до кількох баз даних, діаграми, зовнішнє редагування, фільтрація, WooCommerce-інтеграція та всі доповнення. Якщо ви керуєте даними зі зовнішніх джерел і хочете будувати діаграми, потрібна платна версія. Для статичних таблиць Lite, скоріш за все, вистачить.

Чи підтримує плагін WooCommerce?

Так, починаючи з тарифу Standard. Можна створювати динамічні таблиці товарів, які автоматично оновлюються при зміні каталогу WooCommerce. Покупці отримують сортований, фільтрований список продуктів з актуальними цінами та залишками. Для магазинів із великим асортиментом це замінює окремий плагін каталогу.

Скільки таблиць можна створити?

Стільки, скільки потрібно. Жоден тариф не обмежує кількість таблиць і діаграм. Єдине ліцензійне обмеження, кількість доменів, на яких активовано плагін.

Що ставити під вашу задачу

wpDataTables закриває весь спектр роботи з таблицями у WordPress, від простого виведення CSV-файлу до розподілених запитів до баз даних із візуалізацією на графіках. І він робить це без вимоги писати код, що для WordPress-екосистеми є рідкістю.

Механіка проста: обрали джерело, налаштували дизайн, вставили шорткод. Далі таблиця живе своїм життям: оновлюється зі зміною джерела, фільтрується за кліком користувача, сортується за будь-яким стовпцем і залишається читабельною на мобільному. Жодного рядка HTML, жодного окремого верстання під смартфони.

Плагін платний, але з безплатним тест-драйвом у пісочниці та Lite-версією для базових сценаріїв. Стартовий тариф у $49 на рік можна порівняти з годиною-двома роботи верстальника і дає інструмент на рік уперед.

🔗 Завантажити Lite-версію з WordPress.org