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 управляет адаптивным дизайном с помощью инструмента приоритета, который является опцией. По умолчанию функция адаптивности отключена, будет наблюдаться переполнение (хотя на мобильных устройствах это работает отлично). Чтобы использовать «Скрытие столбцов» , перейдите в меню «Формат» > «Параметры адаптивного дизайна».

В адаптивном режиме можно задать приоритет скрытия столбцов на мобильных устройствах. При скрытии столбцов отображается мобильное меню с флажком для принудительного отображения/скрытия столбцов.
Размер столбцов фиксируется во время редактирования таблицы. Если размер всех столбцов слишком велик для контейнера, возникнет переполнение, и вы сможете легко прокручивать страницу на мобильных устройствах.

Таблица с возможностью прокрутки (лучше подходит для небольшого количества столбцов)

Таблица со скрытым столбцом (лучше для большого количества столбцов)

Повторяющийся заголовок

Это еще один вариант, если вы хотите вставить таблицу в небольшую область на вашем сайте. Вам следует перейти в раздел «Формат меню» > «Параметры адаптивного дизайна». Затем выберите «Тип адаптивного дизайна» > «Повторяющийся заголовок».

Вам будут доступны опции для индивидуальной настройки в соответствии с вашими пожеланиями:

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

После этого вы сможете увидеть, как будет выглядеть таблица на фронтенде.

10. Скачать таблицу

Чтобы поделиться своей таблицей с другими пользователями, перейдите в меню «Таблица» и выберите «Экспорт в Excel» . При загрузке на сайт тип файла будет *.xlsx.

11. Нумерация страниц

эта функция доступна в меню «Формат» > «Пагинация» . Используйте переключатель, чтобы включить эту функцию и выбрать количество строк для отображения на странице.

12. Формат для отдельных ячеек 

Droptables можно задать формат: дата и время, валюты, число для отдельных ячеек . Сначала выберите одну или несколько ячеек. Затем перейдите в меню «Формат» > «Дата и время».

После этого валюты и числа можно обработать аналогичным образом.

13. Вывести таблицу на фронтенде

Иногда возникает необходимость распечатать таблицу. Для этого, чтобы отобразить кнопку «Печать» на лицевой стороне сайта, сначала перейдите в меню «Таблица» и выберите опцию «Кнопка печати»