Таблицы

Использование

Таблицы инициализируются автоматически после загрузки страницы. Для динамически созданных таблиц необходимо вызвать mdui.mutation() для инициализации.

Связанное чтение

Стиль

Базовая таблица

Добавьте класс .mdui-table к тегу table, чтобы придать таблице базовые стили.

Пример

<div class="mdui-table-fluid">
  <table class="mdui-table">
    <thead>
      <tr>
        <th>#</th>
        <th>First Name</th>
        <th>Last Name</th>
        <th>Username</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>1</td>
        <td>Mark</td>
        <td>Otto</td>
        <td>@mdo</td>
      </tr>
      <tr>
        <td>2</td>
        <td>Jacob</td>
        <td>Thornton</td>
        <td>@fat</td>
      </tr>
      <tr>
        <td>3</td>
        <td>Larry the Bird</td>
        <td></td>
        <td>@twitter</td>
      </tr>
    </tbody>
  </table>
</div>

Адаптивность

Если таблица слишком широкая, это может привести к появлению горизонтальной полосы прокрутки на странице. Оберните элемент .mdui-table в элемент с классом .mdui-table-fluid, чтобы таблица поддерживала горизонтальную прокрутку, если её ширина превышает ширину страницы.

<div class="mdui-table-fluid">
  <table class="mdui-table">
    ...
  </table>
</div>

Наведение курсора

Добавление класса .mdui-table-hoverable к элементу .mdui-table позволяет каждой строке в tbody реагировать на наведение курсора мыши.

Пример

<div class="mdui-table-fluid">
  <table class="mdui-table mdui-table-hoverable">
    <thead>
      <tr>
        <th>#</th>
        <th>First Name</th>
        <th>Last Name</th>
        <th>Username</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>1</td>
        <td>Mark</td>
        <td>Otto</td>
        <td>@mdo</td>
      </tr>
      <tr>
        <td>2</td>
        <td>Jacob</td>
        <td>Thornton</td>
        <td>@fat</td>
      </tr>
      <tr>
        <td>3</td>
        <td>Larry the Bird</td>
        <td></td>
        <td>@twitter</td>
      </tr>
    </tbody>
  </table>
</div>

Выравнивание столбцов

Согласно спецификациям Material Design, текстовые столбцы должны быть выровнены по левому краю, а числовые — по правому.

В mdui столбцы таблицы по умолчанию выровнены по левому краю. Добавьте класс .mdui-table-col-numeric к тегу <th> числового столбца, чтобы выровнять его по правому краю.

Пример

<div class="mdui-table-fluid">
  <table class="mdui-table">
    <thead>
      <tr>
        <th>#</th>
        <th>First Name</th>
        <th>Last Name</th>
        <th class="mdui-table-col-numeric">age</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>1</td>
        <td>Mark</td>
        <td>Otto</td>
        <td>18</td>
      </tr>
      <tr>
        <td>2</td>
        <td>Jacob</td>
        <td>Thornton</td>
        <td>21</td>
      </tr>
      <tr>
        <td>3</td>
        <td>Larry the Bird</td>
        <td></td>
        <td>9</td>
      </tr>
    </tbody>
  </table>
</div>

Выбор строк

Добавьте класс .mdui-table-selectable к элементу .mdui-table, чтобы добавить чекбокс перед каждой строкой.

После установки чекбокса к элементу <tr> этой строки будет добавлен класс .mdui-table-row-selected.

Вы также можете заранее добавить класс .mdui-table-row-selected к элементу <tr>, чтобы эта строка была выбрана по умолчанию.

Пример

<div class="mdui-table-fluid">
  <table class="mdui-table mdui-table-selectable">
    <thead>
      <tr>
        <th>Dessert (100g serving)</th>
        <th
          class="mdui-table-col-numeric"
          mdui-tooltip="{content: 'The total amount of food energy in the given serving size.'}"
        >
          Calories
        </th>
        <th class="mdui-table-col-numeric">Fat (g)</th>
        <th class="mdui-table-col-numeric">Carbs (g)</th>
        <th class="mdui-table-col-numeric">Protein (g)</th>
        <th class="mdui-table-col-numeric">Sodium (mg)</th>
        <th
          class="mdui-table-col-numeric"
          mdui-tooltip="{content: 'The amount of calcium as a percentage of the recommended daily amount.'}"
        >
          Calcium (%)
        </th>
        <th class="mdui-table-col-numeric">Iron (%)</th>
      </tr>
    </thead>
    <tbody>
      <tr class="mdui-table-row-selected">
        <td>Frozen yogurt</td>
        <td>159</td>
        <td>6.0</td>
        <td>24</td>
        <td>4.0</td>
        <td>87</td>
        <td>14%</td>
        <td>1%</td>
      </tr>
      <tr>
        <td>Ice cream sandwich</td>
        <td>237</td>
        <td>9.0</td>
        <td>37</td>
        <td>4.3</td>
        <td>129</td>
        <td>8%</td>
        <td>1%</td>
      </tr>
      <tr>
        <td>Eclair</td>
        <td>262</td>
        <td>16.0</td>
        <td>24</td>
        <td>6.0</td>
        <td>337</td>
        <td>6%</td>
        <td>7%</td>
      </tr>
    </tbody>
  </table>
</div>

Динамически создаваемые таблицы

Если ваша таблица создается динамически, необходимо вызвать mdui.mutation() для её инициализации.

Если вы динамически изменили атрибуты таблицы, необходимо вызвать метод mdui.updateTables() для повторной инициализации. Метод может принимать в качестве параметра CSS-селектор (для выбора элементов <table class="mdui-table">), DOM-элемент или массив DOM-элементов для повторной инициализации только указанных таблиц. Если параметры не переданы, будут повторно инициализированы все таблицы на странице.

Список CSS-классов

Имя класса	Описание
`.mdui-table`	Определяет компонент таблицы.
`.mdui-table-fluid`	Определяет адаптивную таблицу.
`.mdui-table-hoverable`	Заставляет строки таблицы реагировать на наведение курсора.
`.mdui-table-col-numeric`	Выравнивает столбец по правому краю.
`.mdui-table-selectable`	Добавляет чекбокс перед каждой строкой.
`.mdui-table-row-selected`	Выбранные строки будут иметь этот класс.

Снэкбары

Диалоги