DataTable¶

See: https://material.io/components/data-tables

Data tables display information in a grid-like format of rows and columns. They organize information in a way that’s easy to scan, so that users can look for patterns and insights.

Data tables can contain:

Interactive components (such as chips, buttons, or menus)

Non-interactive elements (such as badges)

Tools to query and manipulate data

class materialweb.tags.data_table.DataTable(*args, **kwargs)¶

Provides template tag: Table.

Example usage:

{% load materialweb %}

{% trans "Dessert calories" as label %}
{% Table label=label %}
  {% Table_Head %}
    {% Table_Head_Row %}
      {% Table_Head_Col %}
        {% trans "Dessert" %}
      {% endTable_Head_Col %}

      {% Table_Head_Col type="num" %}
        {% trans "Carbs (g)" %}
      {% endTable_Head_Col %}

      {% Table_Head_Col type="num" %}
        {% trans "Protein (g)" %}
      {% endTable_Head_Col %}

      {% Table_Head_Col %}
        {% trans "Comments" %}
      {% endTable_Head_Col %}
    {% endTable_Head_Row %}
  {% endTable_Head %}

  {% Table_Body %}
    {% Table_Row %}
      {% Table_ColHeader %}
        {% trans "Frozen yogurt" %}
      {% endTable_ColHeader %}

      {% Table_Col type="num" %}
        24
      {% endTable_Col %}

      {% Table_Col type="num" %}
        4.0
      {% endTable_Col %}

      {% Table_Col %}
        {% trans "Super tasty" %}
      {% endTable_Col %}
    {% endTable_Row %}

    {% Table_Row %}
      {% Table_ColHeader %}
        {% trans "Ice cream sandwich" %}
      {% endTable_ColHeader %}

      {% Table_Col type="num" %}
        37
      {% endTable_Col %}

      {% Table_Col type="num" %}
        4.33333333333
      {% endTable_Col %}

      {% Table_Col %}
        {% trans "I like ice cream more" %}
      {% endTable_Col %}
    {% endTable_Row %}

    {% Table_Row %}
      {% Table_ColHeader %}
        {% trans "Eclair" %}
      {% endTable_ColHeader %}

      {% Table_Col type="num" %}
        24
      {% endTable_Col %}

      {% Table_Col type="num" %}
        6.0
      {% endTable_Col %}

      {% Table_Col %}
        {% trans "New filling flavor" %}
      {% endTable_Col %}
    {% endTable_Row %}
  {% endTable_Body %}
{% endTable %}

Example output:

<div class="mdc-data-table">
  <div class="mdc-data-table__table-container">
    <table class="mdc-data-table__table" aria-label="Dessert calories">
      <thead>
        <tr class="mdc-data-table__header-row">
          <th class="mdc-data-table__header-cell" role="columnheader"
              scope="col">
            Dessert
          </th>
          <th role="columnheader" scope="col"
              class="mdc-data-table__header-cell mdc-data-table__header-cell--numeric">
            Carbs (g)
          </th>
          <th scope="col"
              class="mdc-data-table__header-cell mdc-data-table__header-cell--numeric" role="columnheader">
            Protein (g)
          </th>
          <th class="mdc-data-table__header-cell" role="columnheader"
              scope="col">
            Comments
          </th>
        </tr>
      </thead>
      <tbody class="mdc-data-table__content">
        <tr class="mdc-data-table__row">
          <th class="mdc-data-table__cell" scope="row">
            Frozen yogurt
          </th>
          <td class="mdc-data-table__cell mdc-data-table__cell--numeric">
            24
          </td>
          <td class="mdc-data-table__cell mdc-data-table__cell--numeric">
            4.0
          </td>
          <td class="mdc-data-table__cell">
            Super tasty
          </td>
        </tr>
        <tr class="mdc-data-table__row">
          <th class="mdc-data-table__cell" scope="row">
            Ice cream sandwich
          </th>
          <td class="mdc-data-table__cell mdc-data-table__cell--numeric">
            37
          </td>
          <td class="mdc-data-table__cell mdc-data-table__cell--numeric">
            4.33333333333
          </td>
          <td class="mdc-data-table__cell">
            I like ice cream more
          </td>
        </tr>
        <tr class="mdc-data-table__row">
          <th class="mdc-data-table__cell" scope="row">
            Eclair
          </th>
          <td class="mdc-data-table__cell mdc-data-table__cell--numeric">
            24
          </td>
          <td class="mdc-data-table__cell mdc-data-table__cell--numeric">
            6.0
          </td>
          <td class="mdc-data-table__cell">
            New filing flavor
          </td>
        </tr>
      </tbody>
    </table>
  </div>
</div>

WANT_CHILDREN = True¶: Template Tag needs closing end tag.

NODE_PROPS = ('name', 'pager', 'page_name', 'row_selectable', 'row_movable')¶: Extended Template Tag arguments.

DEFAULT_TAG = 'table'¶: Rendered HTML tag.

class materialweb.tags.data_table.Head(*args, **kwargs)¶

Provides template tag: Table_Head.

Example usage:

{% load materialweb %}

{% Table_Head class="simple-table-header" %}
  <tr></tr>
{% endTable_Head %}

Example output:

<thead class="simple-table-header">
  <tr></tr>
</thead>

WANT_CHILDREN = True¶: Template Tag needs closing end tag.

DEFAULT_TAG = 'thead'¶: Rendered HTML tag.

class materialweb.tags.data_table.HeadRow(*args, **kwargs)¶

Provides template tag: Table.

Example usage:

{% load materialweb %}

{% Table_Head_Row selectable=True %}
  {% Table_Head_Col %}
    Signal name
  {% endTable_Head_Col %}

  {% Table_Head_Col %}
    Status
  {% endTable_Head_Col %}

  {% Table_Head_Col %}
    Severity
  {% endTable_Head_Col %}

  {% Table_Head_Col %}
    Stage
  {% endTable_Head_Col %}

  {% Table_Head_Col type="num" %}
    Time
  {% endTable_Head_Col %}

  {% Table_Head_Col %}
    Roles
  {% endTable_Head_Col %}
{% endTable_Head_Row %}

<tr class="mdc-data-table__header-row">
  <th role="columnheader" scope="col"
      class="mdc-data-table__header-cell mdc-data-table__header-cell--checkbox">
    <div class="mdc-checkbox mdc-data-table__header-row-checkbox mdc-checkbox--selected">
      <input type="checkbox" aria-label="Toggle all rows"
          class="mdc-checkbox__native-control"/>
      <div class="mdc-checkbox__background">
        <svg class="mdc-checkbox__checkmark" viewBox="0 0 24 24">
          <path fill="none" d="M1.73,12.91 8.1,19.28 22.79,4.59"
              class="mdc-checkbox__checkmark-path" />
        </svg>
        <div class="mdc-checkbox__mixedmark"></div>
      </div>
      <div class="mdc-checkbox__ripple"></div>
    </div>
  </th>
  <th role="columnheader" scope="col"
      class="mdc-data-table__header-cell">
    Signal name
  </th>
  <th role="columnheader" scope="col"
      class="mdc-data-table__header-cell">
    Status
  </th>
  <th role="columnheader" scope="col"
      class="mdc-data-table__header-cell">
    Severity
  </th>
  <th role="columnheader" scope="col"
      class="mdc-data-table__header-cell">
    Stage
  </th>
  <th role="columnheader" scope="col"
      class="mdc-data-table__header-cell mdc-data-table__header-cell--numeric">
    Time
  </th>
  <th role="columnheader" scope="col"
      class="mdc-data-table__header-cell">
    Roles
  </th>
</tr>

WANT_CHILDREN = True¶: Template Tag needs closing end tag.

DEFAULT_TAG = 'tr'¶: Rendered HTML tag.

class materialweb.tags.data_table.HeadColumn(*args, **kwargs)¶

Provides template tag: Table_Head_Col.

Example usage:

{% load materialweb %}

{% Table_Head_Col type="num" %}
  Time
{% endTable_Head_Col %}

Example output:

<th role="columnheader" scope="col"
    class="mdc-data-table__header-cell mdc-data-table__header-cell--numeric">
  Time
</th>

WANT_CHILDREN = True¶: Template Tag needs closing end tag.

NODE_PROPS = ('type',)¶: Extended Template Tag arguments.

DEFAULT_TAG = 'th'¶: Rendered HTML tag.

class materialweb.tags.data_table.Body(*args, **kwargs)¶

Provides template tag: Table_Body.

Example usage:

{% load materialweb %}

{% Table_Body %}
  {% Table_Row %}
    {% Table_ColHeader %}
      {% trans "Frozen yogurt" %}
    {% endTable_ColHeader %}

    {% Table_Col type="num" %}
      24
    {% endTable_Col %}

    {% Table_Col type="num" %}
      4.0
    {% endTable_Col %}

    {% Table_Col %}
      {% trans "Super tasty" %}
    {% endTable_Col %}
  {% endTable_Row %}
{% endTable_Body %}

Example output:

<tbody class="mdc-data-table__content">
  <tr class="mdc-data-table__row">
    <th class="mdc-data-table__cell" scope="row">
      Frozen yogurt
    </th>
    <td class="mdc-data-table__cell mdc-data-table__cell--numeric">
      24
    </td>
    <td class="mdc-data-table__cell mdc-data-table__cell--numeric">
      4.0
    </td>
    <td class="mdc-data-table__cell">
      Super tasty
    </td>
  </tr>
</tbody>

WANT_CHILDREN = True¶: Template Tag needs closing end tag.

DEFAULT_TAG = 'tbody'¶: Rendered HTML tag.

class materialweb.tags.data_table.BodyRow(*args, **kwargs)¶

Provides template tag: Table_Row.

Example usage:

{% load materialweb %}

{% Table_Row %}
    {% Table_ColHeader %}
      {% trans "Frozen yogurt" %}
    {% endTable_ColHeader %}

    {% Table_Col type="num" %}24{% endTable_Col %}
    {% Table_Col type="num" %}4.0{% endTable_Col %}

    {% Table_Col %}
      {% trans "Super tasty" %}
    {% endTable_Col %}
{% endTable_Row %}

<tr class="mdc-data-table__row">
  <th class="mdc-data-table__cell" scope="row">Frozen yogurt</th>
  <td class="mdc-data-table__cell mdc-data-table__cell--numeric">24</td>
  <td class="mdc-data-table__cell mdc-data-table__cell--numeric">4.0</td>
  <td class="mdc-data-table__cell">Super tasty</td>
</tr>

WANT_CHILDREN = True¶: Template Tag needs closing end tag.

NODE_PROPS = ('value',)¶: Extended Template Tag arguments.

DEFAULT_TAG = 'tr'¶: Rendered HTML tag.

class materialweb.tags.data_table.BodyColumn(*args, **kwargs)¶

Provides template tag: Table_Col.

Example usage:

{% load materialweb %}

{% Table_Col type="num" %}6.0{% endTable_Col %}

<td class="mdc-data-table__cell mdc-data-table__cell--numeric">6.0</td>

WANT_CHILDREN = True¶: Template Tag needs closing end tag.

NODE_PROPS = ('type',)¶: Extended Template Tag arguments.

DEFAULT_TAG = 'td'¶: Rendered HTML tag.

class materialweb.tags.data_table.BodyColumnHeader(*args, **kwargs)¶

Provides template tag: Table_ColHeader.

Example usage:

{% load materialweb %}

{% Table_ColHeader %}{% trans "Eclair" %}{% endTable_ColHeader %}

<th class="mdc-data-table__cell" scope="row">Eclair</th>

WANT_CHILDREN = True¶: Template Tag needs closing end tag.

NODE_PROPS = ('type',)¶: Extended Template Tag arguments.

DEFAULT_TAG = 'th'¶: Rendered HTML tag.