@govbr-ds/core/dist/components/table/examples/table.html

Padrão Digital de Governo

<div class="br-table" data-search="data-search" data-selection="data-selection" data-collapse="data-collapse" data-random="data-random">
  <div class="table-header">
    <div class="top-bar">
      <div class="table-title">Título da Tabela</div>
      <div class="actions-trigger text-nowrap">
        <button class="br-button circle" type="button" id="button-dropdown-density" title="Ver mais opções" data-toggle="dropdown" data-target="target01-5398" aria-label="Definir densidade da tabela" aria-haspopup="true" aria-live="polite"><i class="fas fa-ellipsis-v" aria-hidden="true"></i>
        </button>
        <div class="br-list" id="target01-5398" role="menu" aria-labelledby="button-dropdown-density" hidden="hidden">
          <button class="br-item" type="button" data-density="small" role="menuitem">Densidade alta
          </button><span class="br-divider"></span>
          <button class="br-item" type="button" data-density="medium" role="menuitem">Densidade média
          </button><span class="br-divider"></span>
          <button class="br-item" type="button" data-density="large" role="menuitem">Densidade baixa
          </button>
        </div>
      </div>
      <div class="search-trigger">
        <button class="br-button circle" type="button" id="button-input-search" data-toggle="search" aria-label="Abrir busca" aria-controls="table-searchbox-5398"><i class="fas fa-search" aria-hidden="true"></i>
        </button>
      </div>
    </div>
    <div class="search-bar">
      <div class="br-input">
        <label for="table-searchbox-5398">Buscar na tabela</label>
        <input id="table-searchbox-5398" type="search" placeholder="Buscar na tabela" aria-labelledby="button-input-search" aria-label="Buscar na tabela"/>
        <button class="br-button" type="button" aria-label="Buscar"><i class="fas fa-search" aria-hidden="true"></i>
        </button>
      </div>
      <button class="br-button circle" type="button" data-dismiss="search" aria-label="Fechar busca"><i class="fas fa-times" aria-hidden="true"></i>
      </button>
    </div>
    <div class="selected-bar">
      <div class="info"><span class="count">0</span><span class="text">item selecionado</span></div>
      <div class="actions-trigger text-nowrap">
        <button class="br-button circle inverted" type="button" id="button-dropdown-selection" data-toggle="dropdown" data-target="target02-5398" aria-controls="target02-5398" aria-label="Ver mais opções de ação" aria-haspopup="true"><i class="fas fa-ellipsis-v" aria-hidden="true"></i>
        </button>
        <div class="br-list" id="target02-5398" role="menu" aria-labelledby="button-dropdown-selection" hidden="hidden">
          <button class="br-item" type="button" data-toggle="" role="menuitem">Ação 1
          </button><span class="br-divider"></span>
          <button class="br-item" type="button" role="menuitem">Ação 2
          </button>
        </div>
      </div>
    </div>
  </div>
  <table>
    <caption>Título da Tabela</caption>
    <thead>
      <tr>
        <td class="column-collapse" scope="col" aria-hidden="true"></td>
        <th class="column-checkbox" scope="col">
          <div class="br-checkbox hidden-label">
            <input id="check-all-5398" name="check-all-5398" type="checkbox" aria-label="Selecionar tudo" data-parent="check-01-5398"/>
            <label for="check-all-5398">Selecionar todas as linhas</label>
          </div>
        </th>
        <th scope="col">Título coluna 1</th>
        <th scope="col">Título coluna 2</th>
        <th scope="col">Título coluna 3</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>
          <button class="br-button circle small" type="button" id="button-line-1-5398" aria-label="Expandir/Retrair Rótulo 01" data-toggle="collapse" data-target="collapse-1-4-5398" aria-describedby="collapse-1-4-5398"><i class="fas fa-chevron-down" aria-hidden="true"></i>
          </button>
        </td>
        <td>
          <div class="br-checkbox hidden-label">
            <input id="check-line-1-5398" name="check-line-1-5398" type="checkbox" aria-label="Selecionar linha 1" data-child="check-01-5398"/>
            <label for="check-line-1-5398">Selecionar linha 1</label>
          </div>
        </td>
        <td data-th="Título coluna 1">Linha 1 coluna 1</td>
        <td data-th="Título coluna 2">Linha 1 coluna 2</td>
        <td data-th="Título coluna 3">Linha 1 coluna 3</td>
      </tr>
      <tr class="collapse">
        <td id="collapse-1-4-5398" aria-hidden="true" hidden="hidden" colspan="6">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ultricies aliquet lacinia. Vestibulum in interdum eros. Donec vel tempus diam. Aenean pulvinar mattis nisi in laoreet. Integer felis mi, vehicula sed pretium sit amet, pellentesque vel nisl. Curabitur metus ante, pellentesque in lectus a, sagittis imperdiet mi.</td>
      </tr>
      <tr>
        <td>
          <button class="br-button circle small" type="button" id="button-line-2-5398" aria-label="Expandir/Retrair Rótulo 01" data-toggle="collapse" data-target="collapse-2-4-5398" aria-describedby="collapse-2-4-5398"><i class="fas fa-chevron-down" aria-hidden="true"></i>
          </button>
        </td>
        <td>
          <div class="br-checkbox hidden-label">
            <input id="check-line-2-5398" name="check-line-2-5398" type="checkbox" aria-label="Selecionar linha 2" data-child="check-01-5398"/>
            <label for="check-line-2-5398">Selecionar linha 2</label>
          </div>
        </td>
        <td data-th="Título coluna 1">Linha 2 coluna 1</td>
        <td data-th="Título coluna 2">Linha 2 coluna 2</td>
        <td data-th="Título coluna 3">Linha 2 coluna 3</td>
      </tr>
      <tr class="collapse">
        <td id="collapse-2-4-5398" aria-hidden="true" hidden="hidden" colspan="6">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ultricies aliquet lacinia. Vestibulum in interdum eros. Donec vel tempus diam. Aenean pulvinar mattis nisi in laoreet. Integer felis mi, vehicula sed pretium sit amet, pellentesque vel nisl. Curabitur metus ante, pellentesque in lectus a, sagittis imperdiet mi.</td>
      </tr>
      <tr>
        <td>
          <button class="br-button circle small" type="button" id="button-line-3-5398" aria-label="Expandir/Retrair Rótulo 01" data-toggle="collapse" data-target="collapse-3-4-5398" aria-describedby="collapse-3-4-5398"><i class="fas fa-chevron-down" aria-hidden="true"></i>
          </button>
        </td>
        <td>
          <div class="br-checkbox hidden-label">
            <input id="check-line-3-5398" name="check-line-3-5398" type="checkbox" aria-label="Selecionar linha 3" data-child="check-01-5398"/>
            <label for="check-line-3-5398">Selecionar linha 3</label>
          </div>
        </td>
        <td data-th="Título coluna 1">Linha 3 coluna 1</td>
        <td data-th="Título coluna 2">Linha 3 coluna 2</td>
        <td data-th="Título coluna 3">Linha 3 coluna 3</td>
      </tr>
      <tr class="collapse">
        <td id="collapse-3-4-5398" aria-hidden="true" hidden="hidden" colspan="6">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ultricies aliquet lacinia. Vestibulum in interdum eros. Donec vel tempus diam. Aenean pulvinar mattis nisi in laoreet. Integer felis mi, vehicula sed pretium sit amet, pellentesque vel nisl. Curabitur metus ante, pellentesque in lectus a, sagittis imperdiet mi.</td>
      </tr>
    </tbody>
  </table>
  <div class="table-footer">
    <nav class="br-pagination" aria-label="paginação" data-total="50" data-current="1" data-per-page="20">
      <div class="pagination-per-page">
        <div class="br-select">
          <div class="br-input">
            <label for="per-page-selection-random-12162">Exibir</label>
            <input id="per-page-selection-random-12162" type="text" placeholder=" "/>
            <button class="br-button" type="button" aria-label="Exibir lista" tabindex="-1" data-trigger="data-trigger"><i class="fas fa-angle-down" aria-hidden="true"></i>
            </button>
          </div>
          <div class="br-list" tabindex="0">
            <div class="br-item" tabindex="-1">
              <div class="br-radio">
                <input id="per-page-10-random-12162" type="radio" name="per-page-random-12162" value="per-page-10-random-12162" checked="checked"/>
                <label for="per-page-10-random-12162">10</label>
              </div>
            </div>
            <div class="br-item" tabindex="-1">
              <div class="br-radio">
                <input id="per-page-20-random-12162" type="radio" name="per-page-random-12162" value="per-page-20-random-12162"/>
                <label for="per-page-20-random-12162">20</label>
              </div>
            </div>
            <div class="br-item" tabindex="-1">
              <div class="br-radio">
                <input id="per-page-30-random-12162" type="radio" name="per-page-random-12162" value="per-page-30-random-12162"/>
                <label for="per-page-30-random-12162">30</label>
              </div>
            </div>
          </div>
        </div>
      </div><span class="br-divider d-none d-sm-block mx-3"></span>
      <div class="pagination-information d-none d-sm-flex"><span class="current">1</span>&ndash;<span class="per-page">20</span>&nbsp;de&nbsp;<span class="total">50</span>&nbsp;itens</div>
      <div class="pagination-go-to-page d-none d-sm-flex ml-auto">
        <div class="br-select">
          <div class="br-input">
            <label for="go-to-selection-random-83077">Página</label>
            <input id="go-to-selection-random-83077" type="text" placeholder=" "/>
            <button class="br-button" type="button" aria-label="Exibir lista" tabindex="-1" data-trigger="data-trigger"><i class="fas fa-angle-down" aria-hidden="true"></i>
            </button>
          </div>
          <div class="br-list" tabindex="0">
            <div class="br-item" tabindex="-1">
              <div class="br-radio">
                <input id="go-to-1-random-83077" type="radio" name="go-to-random-83077" value="go-to-1-random-83077" checked="checked"/>
                <label for="go-to-1-random-83077">1</label>
              </div>
            </div>
            <div class="br-item" tabindex="-1">
              <div class="br-radio">
                <input id="go-to-2-random-83077" type="radio" name="go-to-random-83077" value="go-to-2-random-83077"/>
                <label for="go-to-2-random-83077">2</label>
              </div>
            </div>
            <div class="br-item" tabindex="-1">
              <div class="br-radio">
                <input id="go-to-3-random-83077" type="radio" name="go-to-random-83077" value="go-to-3-random-83077"/>
                <label for="go-to-3-random-83077">3</label>
              </div>
            </div>
          </div>
        </div>
      </div><span class="br-divider d-none d-sm-block mx-3"></span>
      <div class="pagination-arrows ml-auto ml-sm-0">
        <button class="br-button circle" type="button" aria-label="Voltar página"><i class="fas fa-angle-left" aria-hidden="true"></i>
        </button>
        <button class="br-button circle" type="button" aria-label="Página seguinte"><i class="fas fa-angle-right" aria-hidden="true"></i>
        </button>
      </div>
    </nav>
  </div>
</div>