Material Design Lite. Таблицы

Компонент data-table создан на основе стандартного элементаtable.

Многие возможности таблицы - подсветка, тени, эффекты - работают из коробки.

Классы для компонента.

• mdl-data-table - Обязательный. Задаёт таблицу.
• mdl-js-data-table - Обязательный. Задаёт поведение компонента. Используется в table
• mdl-data-table--selectable - Необязательный. Создаёт флажки для всех рядов таблицы. Используется в table.
• mdl-data-table__header--sorted-ascending - Необязательный. Создаёт визуальный стиль, показывающий, что колонка отсортирована по увеличению. Используется в th.
• mdl-data-table__header--sorted-descending - Необязательный. Создаёт визуальный стиль, показывающий, что колонка отсортирована по убыванию. Используется в th.
• mdl-data-table__cell--non-numeric - Необязательный. Сообщает, что таблица содержит текстовый формат. Используется в th и в td.
• пустое значение - По умолчанию. Данные форматируются, как числовые значения в th и td.

Создайте обычную таблицы с элементами thead и body для заголовка и данных.

Затем добавьте необходимые классы.

<table class="mdl-data-table mdl-js-data-table">
  <thead>
  </thead>
  <tbody>
  </tbody>
</table>

Внутри thead добавьте только один ряд таблицы tr с ячейками th для каждой колонки. Добавьте класс non-numeric.

  <thead>
    <tr>
      <th class="mdl-data-table__cell--non-numeric">Name</th>
      <th>Age</th>
      <th>ID Number</th>
    </tr>
  </thead>

Внутри tbody используются ряды tr с ячейками td для каждой колонки. Для текста в ячейке используйте класс non-numeric, чтобы выравнивание было корректным.

  <tbody>
    <tr>
      <td class="mdl-data-table__cell--non-numeric">Don Aubrey</td>
      <td>25</td>
      <td>49021</td>
    </tr>
    <tr>
      <td class="mdl-data-table__cell--non-numeric">Sophia Carson</td>
      <td>32</td>
      <td>10258</td>
    </tr>
    <tr>
      <td class="mdl-data-table__cell--non-numeric">Steve Moreno</td>
      <td>29</td>
      <td>12359</td>
    </tr>
  </tbody>

Компонент готов к использованию.

Посмотреть примеры с таблицами

Реклама