Droptables: Таблиця стилізації

1. Форматування в таблиці

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

Висоту рядка та ширину стовпця можна визначити в пікселях. Будь ласка, перейдіть до Меню Формат > Застосувати розмір стовпця/рядка , потім виберіть Змінити розмір стовпця / Змінити розмір рядка . У спливаючому вікні ви можете вибрати діапазон і встановити пікселі для стовпців або рядків. Натисніть «Готово» , щоб завершити.

2. Тема та параметри сортування

У кожній таблиці ви можете знайти вибору теми в Меню Тема . Просто натисніть на тему, щоб застосувати її.

У тому ж меню Тема > Альтернативні кольори функція «Автоматичне стилізування» допомагає вам розфарбувати лінію таблиці за допомогою заголовка та нижнього колонтитула . Ви можете вибрати стилі шаблону або створити власні в налаштуваннях плагіна.

Параметр sortable дозволяє виконувати сортування даних AJAX на фронтенді. Це можна побачити в меню Формат > Сортування .

Вирівнювання таблиці стосується вирівнювання div, який містить усю таблицю, наприклад, по центру всієї таблиці. Це можна зробити в Меню Формат > Вирівнювання таблиці .

Підсвічування комірок також доступне як опція. Ви можете ввімкнути опції «Рядок», «Стовпець» або «Обидва» в конфігурації . За замовчуванням ця опція вимкнена. Ви можете налаштувати колір і непрозорість підсвічування.

3. Додати підказку до клітинок

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

Ви можете встановити ширину підказки в пікселях. Це перенаправить вас до підказки з редактором для редагування.

Додайте контент і збережіть зміни, все готово, підказка відображатиметься у публічному доступі при наведенні курсора миші.

4. Адміністрування ACL та фронтенду

Ви можете керувати таблицями з інтерфейсу Joomla. У менеджері меню Joomla додайте пункт «Нове меню» та виберіть тип «Керування таблицями», а потім виберіть Droptables – За замовчуванням» як шаблон.

Ось що ви можете побачити в Droptables Manager з фронтенду.

Ви можете використовувати ACL групи користувачів Joomla для керування діями редагування таблиць. Спочатку, щоб налаштувати, хто може переглядати таблиці, вам слід перейти на «Ролі користувачів» у Droptables .

Ви можете встановити власника для таблиці з меню Таблиця > Доступ до таблиці.

5. Заморожування рядків і стовпців

Заморожування колонки

Закріплення стовпців доступне в меню Формат > Адаптивні параметри . Ви можете закріпити до 5 стовпців. Рахується від першого стовпця.

Щоб заморозити колір/рядок, є додаткова опція, яка дозволяє фіксувати висоту таблиці (оскільки ваш контейнер таблиці може мати нескінченну висоту).

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

Заморожування рядків

Ви можете знайти його в Меню Формат > Заголовок таблиці , звідси ви можете увімкнути опцію та встановити закріплення рядків (до 5 рядків).

Якщо ви хочете налаштувати висоту таблиці, поверніться до розділу "Адаптивні параметри".

Тоді перший рядок буде заморожений на фронтенді після налаштування.

6. Фільтрація даних стовпців

Опція фільтрації доступна в меню Формат > Фільтри . Ви можете активувати її, натиснувши , щоб увімкнути фільтрацію загальнодоступних полів даних.

Приклад фільтрів:

7. Відступи комірок та радіус межі

Ви можете знайти значок межі на панелі інструментів, який допомагає налаштувати відступи та радіус межі комірки.

8. Власний CSS

Давайте зробимо ще один крок. Якщо ви веб-дизайнер з навичками роботи з CSS, ви зможете додати CSS у меню Формат > Користувацький CSS .

Комірки, рядки, стовпці мають координати для ідентифікації кожної з них та застосування до неї власного CSS. R – це рядок, C – стовпець. Тут це рядок 1 (r1), стовпець 4 (c4) = dtr1 dtc4

CSS-код розфарбовано за допомогою дзеркала коду. CSS-код може бути менш кодовим, це теж працює!

9. Адаптивні таблиці Joomla

Мої таблиці адаптивні чи використовують прокрутку на невеликих пристроях?

Приховування стовпців

Droptables обробляють адаптивний дизайн за допомогою інструмента пріоритету, як опції. За замовчуванням функція адаптивного дизайну вимкнена, виникатиме переповнення (що чудово працює на мобільних пристроях). Щоб скористатися приховування стовпців , вам слід перейти до Меню Формат > Адаптивні параметри.

Адаптивний режим є розширеним, ви можете визначити пріоритет для приховування стовпців на мобільних пристроях. Коли стовпці приховані, відображатиметься мобільне меню з прапорцем для примусового відображення/приховування стовпців.
Розмір стовпця фіксується під час редагування таблиці. Якщо розмір усіх стовпців занадто великий для контейнера, виникне переповнення, і ви зможете легко прокручувати на мобільних пристроях.

Таблиця з прокруткою (краще для невеликої кількості колонок)

Таблиця з прихованою колонкою (краще для великої кількості колонок)

Повторюваний заголовок

Це ще один варіант, якщо ви хочете вставити таблицю в невелику область на вашому сайті. Вам слід перейти до Меню Формат > Адаптивні параметри. Потім виберіть Адаптивний тип > Повторюваний заголовок.

Будуть опції для налаштування відповідно до ваших потреб:

• Адаптивна точка зупинки (px): Виберіть значення точки зупинки в пікселях, щоб визначити, коли таблиця перемикатиметься в цей адаптивний режим.
• Адаптивний режим максимальної висоти (px): Коли активовано адаптивний режим, залежно від значення точки зупинки, визначте максимальну висоту, щоб уникнути дуже довгої таблиці.
• Стиль адаптивного режиму: Застосуйте стиль за замовчуванням для цього адаптивного режиму або використовуйте кольори таблиці

Після цього ви можете побачити, як виглядатиме таблиця на фронтенді.

10. Завантажити таблицю

Щоб поділитися таблицею з публікою, перейдіть до Меню Таблиця та поставте позначку навпроти Експортувати Excel . Тип файлу під час завантаження на фронтенд буде *.xlsx.

11. Пагінація

Ви можете знайти цю функцію в меню "Формат" > "Номер сторінки" в кожній версії таблиці. Використовуйте кнопку-перемикач, щоб увімкнути та вибрати кількість рядків для відображення на сторінці.

12. Форматування окремих комірок 

Ви можете встановити формат: Дата та час, Валюти, Число для окремих комірок у Droptables . Спочатку слід вибрати одну/кілька комірок. Потім перейдіть до Меню Формат > Дата та час.

Після цього, валюти та номер можна виконати таким самим чином.

13. Друк таблиці на фронтенді

Іноді вам потрібно роздрукувати таблицю. Тому, щоб відобразити кнопку «Друк» на інтерфейсі, спочатку вам слід перейти до меню «Таблиця» та поставити галочку навпроти «Кнопка друку» .