Modo escuro

Table

Utilize o componente Table para organizar e exibir dados estruturados em linhas e colunas. Este componente é essencial para apresentar grandes volumes de informações de forma clara e acessível, facilitando a comparação, análise e gestão dos dados.

Características Principais

Estrutura Clara

Organiza dados em uma matriz de linhas e colunas, proporcionando uma visualização ordenada e fácil de entender.

Flexibilidade de Dados

Pode ser utilizado para diversos tipos de informações, como estatísticas, listas de itens, relatórios financeiros, entre outros.

Interatividade

Pode incluir funcionalidades adicionais como ordenação, filtragem, paginação e edição direta de dados.

Exemplo de Utilização
  • Listagem de produtos com detalhes como preço, quantidade e descrição.
  • Relatórios financeiros ou de desempenho com múltiplos pontos de dados.
  • Gestão de utilizadores ou membros, exibindo informações e status.

Incorpore o componente Tabela sempre que precisar apresentar dados estruturados de maneira organizada e eficiente, melhorando a capacidade dos utilizadores de analisar e interagir com as informações.

As colunas que possuam valores numéricos é alinhada à direita e acrescentamos a classe .numeric ao header da coluna.

As colunas que servirão de ordenação de dados acrescentamos a classe .sortable ao header da coluna. Caso queira por defeito ordenar alguma coluna adicione as classes .asc ou .desc ao header da tabela.

Para adicionar o componente da paginação a uma tabela basta identificar na paginação o ID da tabela com o atributo data-element-id="ID-DA-TABELA".

Exemplo 1

No exemplo abaixo, em modo responsive, a tabela passa para modo vertical. Para isso é acrescentado o atributo data-header="Nome-do-header" em cada célula da tabela para identificar qual a coluna a que se refere, e é acrescentado também a classe .responsive-vertical à tabela.

 Header 2 Header 3 Header 4 Header 5 Header 6 Header 7
Lorem ipsum Lorem ipsum 8.00€ Lorem ipsum Lorem ipsum
Lorem ipsum Lorem ipsum 75.00€ Lorem ipsum Lorem ipsum
Lorem ipsum Lorem ipsum 15.80€ Lorem ipsum Lorem ipsum
Lorem ipsum Lorem ipsum 100.00€ Lorem ipsum Lorem ipsum
Lorem ipsum Lorem ipsum 0.00€ Lorem ipsum Lorem ipsum
Lorem ipsum Lorem ipsum 2.00€ Lorem ipsum Lorem ipsum
1 de 10 dos resultados
1 de 10 dos 
                                            
<div class="gra-table-wrapper">
    <table class="gra-table responsive-vertical" id="graTable">
        <thead>
            <tr>
                <th class="sortable">
                    <div class="form-check">
                        <input class="form-check-input" type="checkbox" value="" id="flexCheckDefault">
                        <label class="form-check-label" for="flexCheckDefault">
                            Header 1
                        </label>
                    </div>
                </th>
                <th>Header 2</th>
                <th>Header 3</th>
                <th class="sortable numeric asc">Header 4</th>
                <th>Header 5</th>
                <th>Header 6</th>
                <th>Header 7</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td data-header="Header 1">
                    <div class="form-check">
                        <input class="form-check-input" type="checkbox" value="" id="flexCheckDefault">
                        <label class="form-check-label" for="flexCheckDefault">
                            Lorem ipsum a
                        </label>
                    </div>
                </td>
                <td data-header="Header 2">Lorem ipsum</td>
                <td data-header="Header 3"><span class="withIcon">Lorem ipsum <i class="icon-message"></i></span></td>
                <td data-header="Header 4" class="numericValue">8.00€</td>
                <td data-header="Header 5"><a href="#" class="gra-link">Lorem ipsum</a></td>
                <td data-header="Header 6"><span class="gra-tag primary danger">Lorem ipsum</span></td>
                <td data-header="Header 7" class="options"><a class="gra-link" href="#"><i class="icon-eye"></i></a><a class="gra-link" href="#"><i class="icon-edit"></i></a><a class="gra-link" href="#"><i class="icon-trash"></i></a></td>
            </tr>
            <tr>
                <td data-header="Header 1">
                    <div class="form-check">
                        <input class="form-check-input" type="checkbox" value="" id="flexCheckDefault">
                        <label class="form-check-label" for="flexCheckDefault">
                            Lorem ipsum
                        </label>
                    </div>
                </td>
                <td data-header="Header 2">Lorem ipsum</td>
                <td data-header="Header 3"><span class="withIcon">Lorem ipsum <i class="icon-phone"></i></span></td>
                <td data-header="Header 4" class="numericValue">75.00€</td>
                <td data-header="Header 5"><a href="#" class="gra-link">Lorem ipsum</a></td>
                <td data-header="Header 6"><span class="gra-tag primary success">Lorem ipsum</span></td>
                <td data-header="Header 7" class="options"><a class="gra-link" href="#"><i class="icon-eye"></i></a><a class="gra-link" href="#"><i class="icon-edit"></i></a><a class="gra-link" href="#"><i class="icon-trash"></i></a></td>
            </tr>
            <tr>
                <td data-header="Header 1">
                    <div class="form-check">
                        <input class="form-check-input" type="checkbox" value="" id="flexCheckDefault">
                        <label class="form-check-label" for="flexCheckDefault">
                            Lorem ipsum b
                        </label>
                    </div>
                </td>
                <td data-header="Header 2">Lorem ipsum</td>
                <td data-header="Header 3"><span class="withIcon">Lorem ipsum <i class="icon-file"></i></span></td>
                <td data-header="Header 4" class="numericValue">15.80€</td>
                <td data-header="Header 5"><a href="#" class="gra-link">Lorem ipsum</a></td>
                <td data-header="Header 6"><span class="gra-tag primary alert">Lorem ipsum</span></td>
                <td data-header="Header 7" class="options"><a class="gra-link" href="#"><i class="icon-eye"></i></a><a class="gra-link" href="#"><i class="icon-edit"></i></a><a class="gra-link" href="#"><i class="icon-trash"></i></a></td>
            </tr>
            <tr>
                <td data-header="Header 1">
                    <div class="form-check">
                        <input class="form-check-input" type="checkbox" value="" id="flexCheckDefault">
                        <label class="form-check-label" for="flexCheckDefault">
                            Lorem ipsum
                        </label>
                    </div>
                </td>
                <td data-header="Header 2">Lorem ipsum</td>
                <td data-header="Header 3"><span class="withIcon">Lorem ipsum <i class="icon-pin"></i></span></td>
                <td data-header="Header 4" class="numericValue">100.00€</td>
                <td data-header="Header 5"><a href="#" class="gra-link">Lorem ipsum</a></td>
                <td data-header="Header 6"><span class="gra-tag primary info">Lorem ipsum</span></td>
                <td data-header="Header 7" class="options"><a class="gra-link" href="#"><i class="icon-eye"></i></a><a class="gra-link" href="#"><i class="icon-edit"></i></a><a class="gra-link" href="#"><i class="icon-trash"></i></a></td>
            </tr>
            <tr>
                <td data-header="Header 1">
                    <div class="form-check">
                        <input class="form-check-input" type="checkbox" value="" id="flexCheckDefault">
                        <label class="form-check-label" for="flexCheckDefault">
                            Lorem ipsum
                        </label>
                    </div>
                </td>
                <td data-header="Header 2">Lorem ipsum</td>
                <td data-header="Header 3"><span class="withIcon">Lorem ipsum <i class="icon-facebook"></i></span></td>
                <td data-header="Header 4" class="numericValue">0.00€</td>
                <td data-header="Header 5"><a href="#" class="gra-link">Lorem ipsum</a></td>
                <td data-header="Header 6"><span class="gra-tag primary danger">Lorem ipsum</span></td>
                <td data-header="Header 7" class="options"><a class="gra-link" href="#"><i class="icon-eye"></i></a><a class="gra-link" href="#"><i class="icon-edit"></i></a><a class="gra-link" href="#"><i class="icon-trash"></i></a></td>
            </tr>
            <tr>
                <td data-header="Header 1">
                    <div class="form-check">
                        <input class="form-check-input" type="checkbox" value="" id="flexCheckDefault">
                        <label class="form-check-label" for="flexCheckDefault">
                            Lorem ipsum
                        </label>
                    </div>
                </td>
                <td data-header="Header 2">Lorem ipsum</td>
                <td data-header="Header 3"><span class="withIcon">Lorem ipsum <i class="icon-files"></i></span></td>
                <td data-header="Header 4" class="numericValue">2.00€</td>
                <td data-header="Header 5"><a href="#" class="gra-link">Lorem ipsum</a></td>
                <td data-header="Header 6"><span class="gra-tag primary success">Lorem ipsum</span></td>
                <td data-header="Header 7" class="options"><a class="gra-link" href="#"><i class="icon-eye"></i></a><a class="gra-link" href="#"><i class="icon-edit"></i></a><a class="gra-link" href="#"><i class="icon-trash"></i></a></td>
            </tr>
        </tbody>
    </table>
</div>
<div class="gra-pagination" data-items-per-page="4" data-total-items="" data-element-id="graTable" data-is-external-content="false">
    <div class="results">
        <span class="fromIndex">1</span> de <span class="showRows">10</span> dos <span class="totalRows"></span> resultados
    </div>
    <div class="resultsMobile">
        <span class="fromIndex">1</span> de <span class="showRows">10</span> dos <span class="totalRows"></span>
    </div>
    <div class="navigation">
        <button class="prev icon icon-secondary"><i class="icon-chevron-left iconLeft"></i></button>
        <div class="page-numbers"></div>
        <button class="next icon icon-secondary"><i class="icon-chevron-right iconRight"></i></button>
    </div>
</div>

Exemplo 2

No exemplo abaixo, em modo responsive, a tabela mantém-se igual, mas com scroll horizontal.

 Header 2 Header 3 Header 4 Header 5 Header 6 Header 7
Lorem ipsum Lorem ipsum 8.00€ Lorem ipsum Lorem ipsum
Lorem ipsum Lorem ipsum 75.00€ Lorem ipsum Lorem ipsum
Lorem ipsum Lorem ipsum 15.80€ Lorem ipsum Lorem ipsum
Lorem ipsum Lorem ipsum 100.00€ Lorem ipsum Lorem ipsum
Lorem ipsum Lorem ipsum 0.00€ Lorem ipsum Lorem ipsum
Lorem ipsum Lorem ipsum 2.00€ Lorem ipsum Lorem ipsum
1 de 10 dos resultados
1 de 10 dos 
                                            
<div class="gra-table-wrapper">
    <table class="gra-table" id="graTable2">
        <thead>
            <tr>
                <th class="sortable">
                    <div class="form-check">
                        <input class="form-check-input" type="checkbox" value="" id="flexCheckDefault">
                        <label class="form-check-label" for="flexCheckDefault">
                            Header 1
                        </label>
                    </div>
                </th>
                <th>Header 2</th>
                <th>Header 3</th>
                <th class="sortable numeric">Header 4</th>
                <th>Header 5</th>
                <th>Header 6</th>
                <th>Header 7</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>
                    <div class="form-check">
                        <input class="form-check-input" type="checkbox" value="" id="flexCheckDefault">
                        <label class="form-check-label" for="flexCheckDefault">
                            Lorem ipsum a
                        </label>
                    </div>
                </td>
                <td>Lorem ipsum</td>
                <td><span class="withIcon">Lorem ipsum <i class="icon-message"></i></span></td>
                <td class="numericValue">8.00€</td>
                <td><a href="#" class="gra-link">Lorem ipsum</a></td>
                <td><span class="gra-tag primary danger">Lorem ipsum</span></td>
                <td class="options"><a class="gra-link" href="#"><i class="icon-eye"></i></a><a class="gra-link" href="#"><i class="icon-edit"></i></a><a class="gra-link" href="#"><i class="icon-trash"></i></a></td>
            </tr>
            <tr>
                <td>
                    <div class="form-check">
                        <input class="form-check-input" type="checkbox" value="" id="flexCheckDefault">
                        <label class="form-check-label" for="flexCheckDefault">
                            Lorem ipsum
                        </label>
                    </div>
                </td>
                <td>Lorem ipsum</td>
                <td><span class="withIcon">Lorem ipsum <i class="icon-phone"></i></span></td>
                <td class="numericValue">75.00€</td>
                <td><a href="#" class="gra-link">Lorem ipsum</a></td>
                <td><span class="gra-tag primary success">Lorem ipsum</span></td>
                <td class="options"><a class="gra-link" href="#"><i class="icon-eye"></i></a><a class="gra-link" href="#"><i class="icon-edit"></i></a><a class="gra-link" href="#"><i class="icon-trash"></i></a></td>
            </tr>
            <tr>
                <td>
                    <div class="form-check">
                        <input class="form-check-input" type="checkbox" value="" id="flexCheckDefault">
                        <label class="form-check-label" for="flexCheckDefault">
                            Lorem ipsum b
                        </label>
                    </div>
                </td>
                <td>Lorem ipsum</td>
                <td><span class="withIcon">Lorem ipsum <i class="icon-file"></i></span></td>
                <td class="numericValue">15.80€</td>
                <td><a href="#" class="gra-link">Lorem ipsum</a></td>
                <td><span class="gra-tag primary alert">Lorem ipsum</span></td>
                <td class="options"><a class="gra-link" href="#"><i class="icon-eye"></i></a><a class="gra-link" href="#"><i class="icon-edit"></i></a><a class="gra-link" href="#"><i class="icon-trash"></i></a></td>
            </tr>
            <tr>
                <td>
                    <div class="form-check">
                        <input class="form-check-input" type="checkbox" value="" id="flexCheckDefault">
                        <label class="form-check-label" for="flexCheckDefault">
                            Lorem ipsum
                        </label>
                    </div>
                </td>
                <td>Lorem ipsum</td>
                <td><span class="withIcon">Lorem ipsum <i class="icon-pin"></i></span></td>
                <td class="numericValue">100.00€</td>
                <td><a href="#" class="gra-link">Lorem ipsum</a></td>
                <td><span class="gra-tag primary info">Lorem ipsum</span></td>
                <td class="options"><a class="gra-link" href="#"><i class="icon-eye"></i></a><a class="gra-link" href="#"><i class="icon-edit"></i></a><a class="gra-link" href="#"><i class="icon-trash"></i></a></td>
            </tr>
            <tr>
                <td>
                    <div class="form-check">
                        <input class="form-check-input" type="checkbox" value="" id="flexCheckDefault">
                        <label class="form-check-label" for="flexCheckDefault">
                            Lorem ipsum
                        </label>
                    </div>
                </td>
                <td>Lorem ipsum</td>
                <td><span class="withIcon">Lorem ipsum <i class="icon-facebook"></i></span></td>
                <td class="numericValue">0.00€</td>
                <td><a href="#" class="gra-link">Lorem ipsum</a></td>
                <td><span class="gra-tag primary danger">Lorem ipsum</span></td>
                <td class="options"><a class="gra-link" href="#"><i class="icon-eye"></i></a><a class="gra-link" href="#"><i class="icon-edit"></i></a><a class="gra-link" href="#"><i class="icon-trash"></i></a></td>
            </tr>
            <tr>
                <td>
                    <div class="form-check">
                        <input class="form-check-input" type="checkbox" value="" id="flexCheckDefault">
                        <label class="form-check-label" for="flexCheckDefault">
                            Lorem ipsum
                        </label>
                    </div>
                </td>
                <td>Lorem ipsum</td>
                <td><span class="withIcon">Lorem ipsum <i class="icon-files"></i></span></td>
                <td class="numericValue">2.00€</td>
                <td><a href="#" class="gra-link">Lorem ipsum</a></td>
                <td><span class="gra-tag primary success">Lorem ipsum</span></td>
                <td class="options"><a class="gra-link" href="#"><i class="icon-eye"></i></a><a class="gra-link" href="#"><i class="icon-edit"></i></a><a class="gra-link" href="#"><i class="icon-trash"></i></a></td>
            </tr>
        </tbody>
    </table>
</div>
<div class="gra-pagination" data-items-per-page="4" data-total-items="" data-element-id="graTable2" data-is-external-content="false">
    <div class="results">
        <span class="fromIndex">1</span> de <span class="showRows">10</span> dos <span class="totalRows"></span> resultados
    </div>
    <div class="resultsMobile">
        <span class="fromIndex">1</span> de <span class="showRows">10</span> dos <span class="totalRows"></span>
    </div>
    <div class="navigation">
        <button class="prev icon icon-secondary"><i class="icon-chevron-left iconLeft"></i></button>
        <div class="page-numbers"></div>
        <button class="next icon icon-secondary"><i class="icon-chevron-right iconRight"></i></button>
    </div>
</div>