O novo mdui 2, baseado em Material Design 3 e Web Components, já foi lançado, veja a documentação do mdui 2.

Tabela

Como usar

As tabelas serão inicializadas automaticamente após o carregamento da página. Para tabelas geradas dinamicamente, é necessário chamar mdui.mutation() para inicialização.

Leitura relacionada

Diretrizes de design do Material Design: Componentes - Tabelas de dados

Estilo

Tabela básica

Adicione a classe .mdui-table à tag table para atribuir estilos básicos à tabela.

Exemplo

<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>

Responsiva

Se a largura da tabela for muito grande, podem surgir barras de rolagem horizontais na página. Envolva o elemento .mdui-table em um elemento .mdui-table-fluid para suportar rolagem horizontal quando a largura da tabela exceder a largura da página.

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

Hover do mouse

Adicione a classe .mdui-table-hoverable ao elemento .mdui-table para fazer com que cada linha no tbody responda ao passar o mouse.

Exemplo

<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>

Alinhamento de coluna

De acordo com as especificações do Material Design, as colunas de texto devem ser alinhadas à esquerda e as colunas numéricas à direita.

No mdui, as colunas da tabela são alinhadas à esquerda por padrão. Adicione a classe .mdui-table-col-numeric à tag <th> da coluna numérica para alinhá-la à direita.

Exemplo

<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>

Seleção de linha

Adicione a classe .mdui-table-selectable ao elemento .mdui-table para adicionar uma checkbox na frente de cada linha.

Após selecionar a checkbox, a classe .mdui-table-row-selected será adicionada ao elemento <tr> daquela linha.

Você também pode adicionar previamente a classe .mdui-table-row-selected ao elemento <tr> para selecionar a linha por padrão.

Exemplo

<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>

Tabelas geradas dinamicamente

Se a sua tabela for gerada dinamicamente, é necessário chamar mdui.mutation() para inicialização.

Se você modificar dinamicamente os atributos da tabela, precisará chamar o método mdui.updateTables() para reinicializá-la. Este método aceita um seletor CSS (para selecionar o elemento <table class="mdui-table">), um elemento DOM ou um array de elementos DOM como parâmetro, indicando que apenas as tabelas especificadas serão reinicializadas. Se nenhum parâmetro for passado, todas as tabelas na página serão reinicializadas.

Lista de classes CSS

Nome da classe	Descrição
`.mdui-table`	Define o componente de tabela.
`.mdui-table-fluid`	Define uma tabela responsiva.
`.mdui-table-hoverable`	Faz com que as linhas da tabela respondam ao passar o mouse.
`.mdui-table-col-numeric`	Alinha as colunas à direita.
`.mdui-table-selectable`	Adiciona uma checkbox na frente de cada linha.
`.mdui-table-row-selected`	As linhas selecionadas terão esta classe.

Snackbar

Diálogo