Your Name

Account

This could be a follow up or longer description of the update. This could be a follow up or longer description of the update. This could be a follow up or longer description of the update. This could be a follow up or longer description of the update.

My Applications

UC San Diego
9500 Gilman Dr. La Jolla, CA 92093 | (858) 534-2230
© Regents of the University of California. All rights reserved.
Terms
Skip to main content

Tables

Tables are commonly used to present data that is returned after some sort of query or search. While useful for large data sets, try to default to using at ATS List whenever possible due to Tables' inflexibility to smaller screen sizes.

In many situations though, Tables are still the best element to present data. Due to the large size of examples and code, the Tables section is presented here on its own page.

Static vs Sortable Tables

The main characteristic that should determine when you should implement a Sortable Table versus a Static Table is if the user will need to interact with the contained data. Many times, that threshold is reached just by virtue of the table being very large - thus creating the need for sorting or filtering. Other times, the data may contain dates or numerical data that the user will want to sort in order to cross reference another column.

Static Tables

USAGE

If you determine that a Static Table will suffice for the presentation of the data, notice the implementation below.

The classes table and table-bordered should be included in all instances. The table-hover and table-striped classes are optional, depending on preference for that particular instance.

Also, notice the presence of the thead and th elements. This is a must for accessibility and sematic code.

to be added: adding color to rows/cells for context

EXAMPLE

Name Major GPA
Student01 Biology 4.0
Student02 Engineering 4.0

CODE

<table class="table table-bordered table-hover table-striped">
    <thead>
        <th>Name</th>
        <th>Major</th>
        <th>GPA</th>
    </thead>
    <tr>
        <td>Student01</td>
        <td>Biology</td>
        <td>4.0</td>
    </tr>
    <tr>
        <td>Student02</td>
        <td>Engineering</td>
        <td>4.0</td>
    </tr>
</table>

Sortable Tables

USAGE

The Sortable Table includes click/touch activated sort column headers, column-based data filters, and a footer. Sorting and filtering can be disabled on a column bassis; both are showing in the Geometry column.

The table is implemented by simply using the table-sortable class on the table tag. In order to implement a table without the filter row and only sortable columns, use the class table-sortable-no-filter

When in use, filters can be turned into dropdowns that will be auto-populated by the data in that column (shown in the Major column). By default, case sensitive filtering is turned off. An external button can be used to clear/reset the filters. Here, it is shown just under the example table.

An optional table footer can be included in the markup if you anticipate that the table will be remarkably long.

This is an updated them for Bootstrap 4 which has a different themed style sheet than current implementations. The implementation method and table generation, however, remain all the same.

EXAMPLE

Name Major English Japanese Calculus Geometry
Name Major English Japanese Calculus Geometry
Student01 Languages 80 70 75 80
Student02 Mathematics 90 88 100 90
Student03 Languages 85 95 80 85
Student04 Languages 60 55 100 100
Student05 Languages 68 80 95 80
Student06 Mathematics 100 99 100 90
Student07 Mathematics 85 68 90 90
Student08 Languages 100 90 90 85
Student09 Mathematics 80 50 65 75
Student10 Languages 85 100 100 90
Student11 Languages 86 85 100 100
Student12 Mathematics 100 75 70 85
Student13 Languages 100 80 100 90
Student14 Languages 50 45 55 90
Student15 Languages 95 35 100 90

CODE

<table class="table-sortable">
    <!-- styling classes added by table widget -->
    <thead>
        <tr>
            <th>Name</th>
            <th class="filter-select filter-exact" data-placeholder="select">Major</th> <!-- turn Filter into select -->
            <th>English</th>
            <th>Japanese</th>
            <th>Calculus</th>
            <th data-sorter="false" class="filter-false">Geometry</th>
            <!-- data-sorter controls sorting, filter-false class disables filter -->
        </tr>
    </thead>
    <tfoot>
        <tr>
            <th>Name</th>
            <th>Major</th>
            <th>English</th>
            <th>Japanese</th>
            <th>Calculus</th>
            <th>Geometry</th>
        </tr>
    </tfoot>
    <tbody>
        <tr>
            <td>Student01</td>
            <td>Languages</td>
            <td>80</td>
            <td>70</td>
            <td>75</td>
            <td>80</td>
        </tr>
        ...
    </tbody>
</table>

    <!-- a button with class reset can be added for additional filter controls -->
    <button class="btn btn-default reset">Reset filters</button>