Table

How to create a table

Tables should always be created from scratch in Vortex, and not copied from Word, Excel or similar. This is to make sure we comply with the universal brand and design. 

Settings on table

Zebra stripes in the table

If you want a table with grey background on every other row, you can enter "uio-zebra":

<table class="uio-zebra"> 

Sortable columns

1. Open the edit mode of the article and select source code of the field where the table is located.
2. Set the setting class="sortable" after the start of the table code:

   <table class="sortable"> 
   

3. You must specify which columns to sort by using a setting, so-called class, on the table headers (<th>) in source code.
   • Generic: class="sortable-numeric" (numbers only) or class="sortable-text" (text only).
   • Dates: class="sortable-date-dmy" (?sortable-date? sorted by American format: mdy)

4. If you want the table to have automatic sorting when loaded, set the settings ?sortable-onload-<kolonne #0>-...-<kolonne #n>? at the top of the table code (after <table...). The letter ?r? behind the column number gives reverse sorting. Note that you can not use ?sortable-onload? on its own. For example ?sortable-onload-0-1r-4? will sort the first column normally, second to fourth columns reversed and fifth column normally. Be aware that the column index starts at 0 and not 1.

5. If you want the column to be sorted in reverse first, use the setting ?favour-reverse? in the code at the top of the table (after <table...).

Show wide table

Tables that take a lot of space can be stylized with the class "retro" to have a smaller font size and thus take up less space.

Open table properties, go to "advanced" and enter "retro". If there are multiple style classes, separate them with comma and space.

Extra wide table

To prevent tables from going beyond the width of the design, set the class "table-wide-overflow"

How to combine settings on tables

You can combine settings for, say zebra stripes with extra wide table by using this:

<table class="uio-zebra table-wide-overflow"> 

Create mobile-friendly table

Set the minimun width of columns: If you want a minimum width on the columns in responsive design, set the class "responsive-min-width".

Fixed widths on columns

If you want a table with fixed widths on the columns, set the class "fixed-layout" on <table>.

You must also set style="width: <bredde-i-prosent>" on all the <th>s.

<table class="fixed-layout">
  <thead>
    <tr>
      <th style="width: 50%">A</th>
      <th style="width: 50%">B</th>
    </tr>
  </thead>
  <tbody>
    <tr><td></td><td></td></tr>
  </tbody>
</table>

Data table

A more advanced table with search/ filtering, browsing and sorting. Can be combined with most table classes except "sortable".

Note that this requires all rows in the same column to have the same sorting format.

See instructions.

Total sum of numeric values in a column

If you want the total of a column (not the first) to be inserted in the table footer, use the class "table-sum" on the <th> (works only on only column per table).

<table>
    <thead>
        <tr>
            <th scope="col">A</th>
            <th class="table-sum" scope="col">B</th>
        </tr>

There is a space between the 'thousand' placement and/ or with ",-" at the end of the numbers, formatted like this.

If not in thousands and have decimals to be summed up, then use period between whole numbers and the decimals.