El nuevo mdui 2 basado en Material Design 3 y Web Components ya está disponible. Consulta la documentación de mdui 2 ahora.

Tablas

Modo de uso

La tabla se inicializa automáticamente cuando se carga la página. Para las tablas generadas dinámicamente, es necesario llamar a mdui.mutation() para inicializarla.

Lectura relacionada

Pautas de diseño de Material Design: componentes - Tabla de datos

Estilo

Tabla base

Añade la clase .mdui-table a la etiqueta table para dar a la tabla un estilo básico.

Ejemplo

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

Responsive

Si la tabla es demasiado ancha, puede hacer que la página tenga desplazamiento horizontal. Envuelve el elemento .mdui-table dentro de un contenedor .mdui-table-fluid para que la tabla permita desplazamiento horizontal cuando supere el ancho de la página.

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

Al pasar el cursor

Añade la clase .mdui-table-hoverable al elemento .mdui-table para que cada fila del tbody responda al estado de pasar el cursor.

Ejemplo

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

Alineación de columnas

Según la especificación de Material Design, las columnas de texto deben alinearse a la izquierda y las numéricas a la derecha.

En mdui, las columnas de la tabla se alinean por defecto a la izquierda. Añade la clase .mdui-table-col-numeric a la etiqueta <th> de una columna numérica para alinearla a la derecha.

Ejemplo

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

Selección de columnas

Añade la clase .mdui-table-selectable al elemento .mdui-table para añadir un checkbox delante de cada fila.

Después de marcar la casilla, se añadirá la clase .mdui-table-row-selected al elemento <tr> de esa fila.

También puedes añadir previamente la clase .mdui-table-row-selected al elemento <tr> para dejar esa fila seleccionada por defecto.

Ejemplo

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

Tabla generada dinámicamente

Si tu tabla se genera dinámicamente, necesitas llamar a mdui.mutation() para inicializarla.

Si cambias dinámicamente los atributos de la tabla, debes llamar al método mdui.updateTables() para reinicializarla. Este método puede aceptar un selector CSS (para seleccionar elementos <table class="mdui-table">), un elemento DOM o un array de elementos DOM como parámetro para reinicializar solo las tablas especificadas. Si no se pasa ningún parámetro, se reinicializarán todas las tablas de la página.

Lista de clases CSS

Nombre de clase	Descripción
`.mdui-table`	Definir un componente de tabla.
`.mdui-table-fluid`	Definir una tabla responsive.
`.mdui-table-hoverable`	Hacer que las filas de la tabla respondan al pasar el cursor.
`.mdui-table-col-numeric`	Alinear la columna a la derecha.
`.mdui-table-selectable`	Añadir un checkbox delante de cada fila.
`.mdui-table-row-selected`	La fila seleccionada tendrá esta clase.

Snackbar

Diálogos