Таблица виджет

Адаптивные таблицы

Одна из самых больших задач в адаптивном веб-дизайне (RWD) — это представление табличных данных. Крупные таблицы с множеством столбцов не помещаются на экранах меньшего размера, и нет простого способа переформатировать содержимое таблицы с помощью CSS и медиа-запросов для приемлемого отображения. Для решения этой проблемы фреймворк предлагает два различных варианта представления адаптивных таблиц. Каждый из них имеет преимущества и недостатки, правильный выбор будет зависеть от представляемых данных.

Режим переформатирования — переформатирует столбцы таблицы при узких ширинах, поэтому каждая строка данных представляется как отформатированный блок пар «метка/данные». Это идеально подходит для таблиц с информацией о продуктах или контактах с более сложной или длинной форматировкой данных, не требующей сравнения строк данных.

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

Функция адаптивной таблицы построена с помощью основного плагина таблиц (table.js) который инициализируется при добавлении атрибута data-role="table" в разметку. Этот плагин очень лёгкий и добавляет класс ui-table, анализирует заголовки таблицы и генерирует информацию о столбцах данных, а также запускает событие tablecreate. Оба режима таблиц, переформатирование и переключение столбцов, написаны как расширения виджета таблицы, которые подключаются через событие create для добавления дополнительных возможностей, делающих таблицы адаптивными. Переформатирование является режимом по умолчанию, поэтому, если расширение присутствует, оно будет применено автоматически, если атрибут data-role="table" присутствует в таблице.

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

Общие рекомендации по разметке таблиц

Вот базовая разметка таблицы, которую вы должны использовать для обоих режимов таблиц:

<table data-role="table" id="my-table" data-mode="reflow">
  <thead>
    <tr>
      <th>Rank</th>
      <th>Movie Title</th>
      <th>Year</th>
      <th><abbr title="Rotten Tomato Rating">Rating</abbr></th>
      <th>Reviews</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th>1</th>
      <td><a href="foo.com" data-rel="external">Citizen Kane</a></td>
      <td>1941</td>
      <td>100%</td>
      <td>74</td>
    </tr>
    </tbody>
</table>

Оба режима таблиц начинаются со стандартной разметки HTML-таблиц, но для корректной работы адаптивной таблицы необходимо соблюдать некоторые конкретные рекомендации:

• Следуйте стандартным рекомендациям по разметке HTML-таблиц для правильной семантики
• Не используйте rowspan или colspan в таблицах, они не поддерживаются, за исключением групповых заголовков (см. ниже)
• Добавление элементов thead и tbody необязательно, но обеспечивает улучшенную семантику
• Присвойте уникальное значение ID таблице (необходимо для режима переключения столбцов)
• Добавьте data-role="table" для применения плагина адаптивной таблицы
• Режим таблицы по умолчанию — reflow, добавьте data-mode="columntoggle" для изменения режима
• Первая строка таблицы должна содержать заголовки таблицы, обязательно используйте TH вместо тегов TD
• Для отображения более длинного текста заголовка столбца в выборе столбцов или меток переформатирования оберните текст в TH с элементом abbr и установите title. Эта строка будет использоваться вместо него.

Стиль и оформление таблиц

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

Таблица будет адаптироваться к любому блоку содержимого, в котором она находится, но явного атрибута оформления для этого виджета нет. Мы сделали это, потому что достаточно просто добавить классы темы, такие как ui-body-a к отдельным ячейкам, если нужно более сложное оформление.

Штрихи и полосы строк

CSS темы содержит предварительно заданные стили штрихов строк и чередующихся полос, которые можно применить, добавив класс table-stroke или table-stripe к элементу table.