Semantic UI: Table
3 of 14
1. Button 2. Form 3. Table 4. Columns 5. Elements 6. Tags 7. Items 8. Panels
Theme
Flat
Shaded
Classic
Menu

Tables

Tables are useful for displaying collections of tuples.

Tables consist of an optional table header, content, and table footer. They may be formatted to show numeric content or for rows of text.

Although no plugin has been created using the semantic module spec for sorting tables, other plugins such as kylefox's tablesort may be useful.

  • Standard
  • States
  • Variations

    • Standard

    Table

    A standard table

    Name Status Notes
    John Approved None
    Jamie Approved Requires call
    Jill Denied None
    Add User

    States

    Positive / Negative

    A cell may let a user know whether a value is good or bad:

    Name Status Notes
    No Name Specified Approved None
    Jimmy Approved None
    Jamie Approved Requires call
    Jill Approved None

    Cells

    Error

    A cell or row may alert the user to an error or a negative value:

    Name Status Notes
    No Name Specified Approved None
    Jimmy Approved None
    Jamie Approved Requires call
    Jill Approved None

    Warning

    A cell or row may warn a user:

    Name Status Notes
    No Name Specified Approved None
    Jimmy Approved None
    Jamie Approved Requires call
    Jill Approved None

    Active

    A cell or row can be active:

    Name Status Notes
    Jamie Approved Requires call
    John Approved None
    Jamie Approved Requires call
    Jill Approved None

    Variations

    Collapsing

    By default tables take the size of their container. A collapsing takes up only as much space as its rows.

    Name Status Notes
    John Approved None
    Jamie Approved Requires call
    Jill Denied None
    3 People 2 Approved

    Grid

    A table may have a grid to help differentiate cells

    Name Status Notes
    John Approved None
    Jamie Approved Requires call
    Jill Denied None
    3 People 2 Approved

    Sortable

    A table may allow a user to sort contents by clicking on a table header.

    Adding a classname of ascending or descending, will show the user the direction of sort. This example uses a modified version of the kylefox's tablesort plugin to provide the proper class names.

    Name Status Notes
    John No Action None
    Jamie Approved Requires call
    Jill Denied None
    3 People 2 Approved

    Padded

    A table may sometimes need to be more padded for legibility

    Name Status Notes
    John Approved He is a very nice guy and I enjoyed talking to him on the telephone. I hope we get to talk again.
    Jamie Approved Jamie was not interested in purchasing our product.

    Compact

    A table may sometimes need to be more compact to make more rows visible at a time

    Name Status Notes
    John Approved None
    Jamie Approved Requires call
    John Approved None
    Jamie Approved Requires call
    John Approved None
    Jamie Approved Requires call
    John Approved None
    Jamie Approved Requires call

    Size

    A table can also be small or large

    Name Status Notes
    John Approved None
    Jamie Approved Requires call
    Jill Denied None
    3 People 2 Approved


    Name Status Notes
    John Approved None
    Jamie Approved Requires call
    Jill Denied None
    3 People 2 Approved