OpenGov Visual Interface Documentation

Tables

Semantic markup tables

Currently, table styling is overly nested and specific because we need to override Foundation table styles. Once we have the chance to remove Foundation from Delphius, should refactor tables. Table styles seen here are not used (yet) in report summary tables.

Column 1 Column 2 Column 3 Column with a really long header
Egestas purus 9602 4744 1297 Action
Egestas purus 9602 4744 1297 Action
Total 9602 4744 1297

.layout_scale-cells

Proportionally scale table cells
Column 1 Column 2 Column 3 Column with a really long header
Egestas purus 9602 4744 1297 Action
Egestas purus 9602 4744 1297 Action
Total 9602 4744 1297

.layout_data

Table primarily contains data
Column 1 Column 2 Column 3 Column with a really long header
Egestas purus 9602 4744 1297 Action
Egestas purus 9602 4744 1297 Action
Total 9602 4744 1297 
<div class="ui-table [modifier class]">
  <table>
    <thead>
      <tr>
        <th class="sortable sorting_asc">Column 1</th>
        <th class="sortable">Column 2</th>
        <th class="no-sort">Column 3</th>
        <th class="sortable">Column with a really long header</th>
        <th class="no-sort"></th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <th>Egestas purus</th>
        <td>9602</td>
        <td>4744</td>
        <td>1297</td>
        <td class="ui-table__actions"><a href="#" class="ui-button">Action</a></td>
      </tr>
      <tr>
        <th>Egestas purus</th>
        <td>9602</td>
        <td>4744</td>
        <td>1297</td>
        <td class="ui-table__actions"><a href="#" class="ui-button">Action</a></td>
      </tr>
    </tbody>
    <tfoot>
      <tr>
        <th>Total</th>
        <td>9602</td>
        <td>4744</td>
        <td>1297</td>
        <td></td>
      </tr>
    </tfoot>
  </table>
</div>

Expansion table

Click rows to expand children. <colgroup> and <col> with a defined width are necessary in table layout to prevent the table cells resizing when new rows are added.

Column 1 Column with a really long header Column 2 Column 3
Egestas purus 9602 4744 1297
Phasellus molestie magna non est 9602 4744 1297
Mauris iaculis porttitor posuere praesent id metus massa 9602 4744 1297
Phasellus molestie magna non est 9602 4744 1297
Total 9602 4744 1297 
<div class="ui-table layout_expansion">
  <table>
    <colgroup>
      <col style="width: 40%"></col>
      <col style="width: 20%"></col>
      <col style="width: 20%"></col>
      <col style="width: 20%"></col>
    </colgroup>
    <thead>
      <tr>
        <th class="no-sort">Column 1</th>
        <th class="no-sort">Column with a really long header</th>
        <th class="no-sort">Column 2</th>
        <th class="no-sort">Column 3</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <th class="indented-0">
          <span class="ui-drop-item__icon"></span>
          <a>Egestas purus</a>
        </th>
        <td>9602</td>
        <td>4744</td>
        <td>1297</td>
      </tr>
      <tr style="display: none;">
        <th class="indented-1">
          <span class="ui-drop-item__icon"></span>
          <a>Phasellus molestie magna non est</a>
        </th>
        <td>9602</td>
        <td>4744</td>
        <td>1297</td>
      </tr>
      <tr style="display: none;">
        <th class="indented-2">
          <span class="ui-drop-item__icon"></span>
          <a>Mauris iaculis porttitor posuere praesent id metus massa</a>
        </th>
        <td>9602</td>
        <td>4744</td>
        <td>1297</td>
      </tr>
      <tr style="display: none;">
        <th class="indented-3">
          <span class="ui-drop-item__placeholder"></span>
          <a>Phasellus molestie magna non est</a>
        </th>
        <td>9602</td>
        <td>4744</td>
        <td>1297</td>
      </tr>
    </tbody>
    <tfoot>
      <tr>
        <th>Total</th>
        <td>9602</td>
        <td>4744</td>
        <td>1297</td>
      </tr>
    </tfoot>
  </table>
</div>

Expansion loading

Loading indicator for when data is being fetched for row expansion.

Column 1 Column with a really long header Column 2 Column 3
Egestas purus 9602 4744 1297
Egestas purus 9602 4744 1297
Egestas purus 9602 4744 1297 
<div class="ui-table layout_expansion">
  <table>
    <thead>
      <tr>
        <th class="no-sort">Column 1</th>
        <th class="no-sort">Column with a really long header</th>
        <th class="no-sort">Column 2</th>
        <th class="no-sort">Column 3</th>
      </tr>
    </thead>
    <tbody>
      <tr class="loading">
        <th class="indented-0">
          <span class="ui-drop-item__icon"></span>
          <a>Egestas purus</a>
        </th>
        <td>9602</td>
        <td>4744</td>
        <td>1297</td>
      </tr>
      <tr class="loading">
        <th class="indented-0">
          <span class="ui-drop-item__icon"></span>
          <a>Egestas purus</a>
        </th>
        <td>9602</td>
        <td>4744</td>
        <td>1297</td>
      </tr>
      <tr>
        <th class="indented-0">
          <span class="ui-drop-item__icon"></span>
          <a>Egestas purus</a>
        </th>
        <td>9602</td>
        <td>4744</td>
        <td>1297</td>
      </tr>
    </tbody>
  </table>
</div>

Special table cell formats

Sometimes table cells need a little something special.

Number Percent Percent Currency Uncertain Link
128,342 36% 28% 528 6,642 Click here
128,342 36% 28% 528 6,642 Click here 
<div class="ui-table">
  <table>
    <thead>
      <tr>
        <th class="number">Number</th>
        <th class="number percent">Percent</th>
        <th class="number percent">Percent</th>
        <th class="currency">Currency</th>
        <th class="ui-table__cell_uncertain">Uncertain</th>
        <th>Link</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td class="number">128,342</td>
        <td class="number percent positive">36%</td>
        <td class="number percent negative">28%</td>
        <td class="currency">528</td>
        <td class="uncertain">6,642</td>
        <td><a class="ui-table__cell__link">Click here</a></td>
      </tr>
      <tr>
        <td class="number">128,342</td>
        <td class="number percent positive">36%</td>
        <td class="number percent negative">28%</td>
        <td class="currency">528</td>
        <td class="uncertain">6,642</td>
        <td><a class="ui-table__cell__link">Click here</a></td>
      </tr>
    </tbody>
  </table>
</div>