Get help Color blind mode Low vision mode

Table Ready

Table is a lightweight and un-opinionated component for enhancing tabular data. It offers features like sticky headers, support for narrow viewport widths, and table styles.

It’s important to pay close attention to semantics when authoring tables with Duet Table component. The markup in the examples below can be used as a starting point for most tables. However, be aware that HTML tables have a large feature set, which cannot be covered exhaustively here.

Examples #

Open in new window 
<duet-table>
  <table>
    <thead>
      <tr>
        <th>Eläkeaika, v</th>
        <th>Tavoite-eläke/kk</th>
        <th>Eläkearvio/kk</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>55–65</td>
        <td>1&nbsp;660,24&nbsp;€</td>
        <td>1&nbsp;433,95&nbsp;€</td>
      </tr>
      <tr>
        <td>65–75</td>
        <td>553,42&nbsp;€</td>
        <td>477,99&nbsp;€</td>
      </tr>
      <tr>
        <td>55–65</td>
        <td>1&nbsp;660,24&nbsp;€</td>
        <td>1&nbsp;433,95&nbsp;€</td>
      </tr>
      <tr>
        <td>65–75</td>
        <td>553,42&nbsp;€</td>
        <td>477,99&nbsp;€</td>
      </tr>
      <tr>
        <td>65–75</td>
        <td>553,42&nbsp;€</td>
        <td>477,99&nbsp;€</td>
      </tr>
    </tbody>
  </table>
</duet-table>
Open in new window 
<duet-table variation="fixed">
  <table >
    <thead>
      <tr>
        <th>Eläkeaika, v</th>
        <th>Tavoite-eläke/kk</th>
        <th>Eläkearvio/kk</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>55–65</td>
        <td>1&nbsp;660,24&nbsp;€</td>
        <td>1&nbsp;433,95&nbsp;€</td>
      </tr>
      <tr>
        <td>65–75</td>
        <td>553,42&nbsp;€</td>
        <td>477,99&nbsp;€</td>
      </tr>
      <tr>
        <td>55–65</td>
        <td>1&nbsp;660,24&nbsp;€</td>
        <td>1&nbsp;433,95&nbsp;€</td>
      </tr>
      <tr>
        <td>65–75</td>
        <td>553,42&nbsp;€</td>
        <td>477,99&nbsp;€</td>
      </tr>
      <tr>
        <td>65–75</td>
        <td>553,42&nbsp;€</td>
        <td>477,99&nbsp;€</td>
      </tr>
    </tbody>
  </table>
</duet-table>
Open in new window 
<duet-table>
  <table>
    <thead>
      <tr>
        <th>Eläkeaika, v</th>
        <th>Tavoite-eläke/kk</th>
        <th class="duet-text-right">Eläkearvio/kk</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>55–65</td>
        <td>1&nbsp;660,24&nbsp;€</td>
        <td class="duet-text-right">1&nbsp;433,95&nbsp;€</td>
      </tr>
      <tr>
        <td>65–75</td>
        <td>553,42&nbsp;€</td>
        <td class="duet-text-right">477,99&nbsp;€</td>
      </tr>
      <tr>
        <td>55–65</td>
        <td>1&nbsp;660,24&nbsp;€</td>
        <td class="duet-text-right">1&nbsp;433,95&nbsp;€</td>
      </tr>
      <tr>
        <td>65–75</td>
        <td>553,42&nbsp;€</td>
        <td class="duet-text-right">477,99&nbsp;€</td>
      </tr>
      <tr>
        <td>65–75</td>
        <td>553,42&nbsp;€</td>
        <td class="duet-text-right">477,99&nbsp;€</td>
      </tr>
    </tbody>
  </table>
</duet-table>
Open in new window 
<duet-table breakpoint="large">
  <table>
    <thead>
      <tr>
        <th>Valtuutettu</th>
        <th>Salkun nimi</th>
        <th></th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>
          Hermanni Mikkola<br />
          10.10.1999
        </td>
        <td class="foo">
          Antin salkku<br />
          <duet-link url="/">Siirry salkkuun ›</duet-link>
        </td>
        <td>
          <duet-button wrapping="none" margin="none" padding="none" icon="action-delete" variation="plain">
            Poista
          </duet-button>
        </td>
      </tr>
      <tr>
        <td>
          Jukka-Pekka Routakorpi-Salomaa<br />
          10.11.1988
        </td>
        <td>
          Justiinan ja Jukka-Pekan yhteinen salkku 1234<br />
          <duet-link url="/">Siirry salkkuun ›</duet-link>
        </td>
        <td>
          <duet-button wrapping="none" margin="none" padding="none" icon="action-delete" variation="plain">
            Poista
          </duet-button>
        </td>
      </tr>
      <tr>
        <td>
          Veera Mikkola<br />
          01.01.2001
        </td>
        <td>
          Vapun rahastot<br />
          <duet-link url="/">Siirry salkkuun ›</duet-link>
        </td>
        <td>
          <duet-button wrapping="none" margin="none" padding="none" icon="action-delete" variation="plain">
            Poista
          </duet-button>
        </td>
      </tr>
    </tbody>
  </table>
</duet-table>
Open in new window 
<duet-table variation="plain">
  <table>
    <thead>
      <tr>
        <th>Nostokohde</th>
        <th>Arvopäivä</th>
        <th>Nosto-%</th>
        <th class="duet-text-right">Nosto</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Name of original asset</td>
        <td>16.04.2019</td>
        <td>5&nbsp;%</td>
        <td class="duet-text-right">-1&nbsp;000,00&nbsp;€</td>
      </tr>
      <tr>
        <td>Name of original asset</td>
        <td>16.04.2019</td>
        <td>12&nbsp;%</td>
        <td class="duet-text-right">-1&nbsp;000,00&nbsp;€</td>
      </tr>
      <tr>
        <td>Name of original asset</td>
        <td>16.04.2019</td>
        <td>32&nbsp;%</td>
        <td class="duet-text-right">-500,00&nbsp;€</td>
      </tr>
    </tbody>
    <tfoot>
      <tr>
        <td colspan="3" class="duet-font-weight-semi-bold">Yhteensä</td>
        <td class="duet-text-right duet-font-weight-semi-bold duet-font-size-large">-2&nbsp;500,00&nbsp;€</td>
      </tr>
    </tfoot>
  </table>
</duet-table>
Open in new window 
<duet-table variation="plain" sticky sticky-distance="none">
  <table>
    <thead>
      <tr>
        <th>Item</th>
        <th>Number</th>
        <th>Price</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Policy name</td>
        <td>1298395893258015</td>
        <td>100,00&nbsp;€</td>
      </tr>
      <tr>
        <td>Policy name</td>
        <td>1298395893258015</td>
        <td>100,00&nbsp;€</td>
      </tr>
      <tr>
        <td>Policy name</td>
        <td>1298395893258015</td>
        <td>100,00&nbsp;€</td>
      </tr>
      <tr>
        <td>Policy name</td>
        <td>1298395893258015</td>
        <td>100,00&nbsp;€</td>
      </tr>
      <tr>
        <td>Policy name</td>
        <td>1298395893258015</td>
        <td>100,00&nbsp;€</td>
      </tr>
      <tr>
        <td>Policy name</td>
        <td>1298395893258015</td>
        <td>100,00&nbsp;€</td>
      </tr>
      <tr>
        <td>Policy name</td>
        <td>1298395893258015</td>
        <td>100,00&nbsp;€</td>
      </tr>
      <tr>
        <td>Policy name</td>
        <td>1298395893258015</td>
        <td>100,00&nbsp;€</td>
      </tr>
      <tr>
        <td>Policy name</td>
        <td>1298395893258015</td>
        <td>100,00&nbsp;€</td>
      </tr>
      <tr>
        <td>Policy name</td>
        <td>1298395893258015</td>
        <td>100,00&nbsp;€</td>
      </tr>
      <tr>
        <td>Policy name</td>
        <td>1298395893258015</td>
        <td>100,00&nbsp;€</td>
      </tr>
      <tr>
        <td>Policy name</td>
        <td>1298395893258015</td>
        <td>100,00&nbsp;€</td>
      </tr>
      <tr>
        <td>Policy name</td>
        <td>1298395893258015</td>
        <td>100,00&nbsp;€</td>
      </tr>
      <tr>
        <td>Policy name</td>
        <td>1298395893258015</td>
        <td>100,00&nbsp;€</td>
      </tr>
      <tr>
        <td>Policy name</td>
        <td>1298395893258015</td>
        <td>100,00&nbsp;€</td>
      </tr>
    </tbody>
  </table>
</duet-table>
Open in new window 
<duet-table variation="plain" hide-head-visually>
  <table>
    <thead>
      <tr>
        <th>Item</th>
        <th>Number</th>
        <th>Price</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Policy name</td>
        <td>1298395893258015</td>
        <td>100,00&nbsp;€</td>
      </tr>
      <tr>
        <td>Policy name</td>
        <td>1298395893258015</td>
        <td>100,00&nbsp;€</td>
      </tr>
      <tr>
        <td>Policy name</td>
        <td>1298395893258015</td>
        <td>100,00&nbsp;€</td>
      </tr>
      <tr>
        <td>Policy name</td>
        <td>1298395893258015</td>
        <td>100,00&nbsp;€</td>
      </tr>
     </tbody>
  </table>
</duet-table>

<duet-table variation="striped" hide-head-visually>
  <table>
    <thead>
    <tr>
      <th>Item</th>
      <th>Number</th>
      <th>Price</th>
    </tr>
    </thead>
    <tbody>
    <tr>
      <td>Policy name</td>
      <td>1298395893258015</td>
      <td>100,00&nbsp;€</td>
    </tr>
    <tr>
      <td>Policy name</td>
      <td>1298395893258015</td>
      <td>100,00&nbsp;€</td>
    </tr>
    <tr>
      <td>Policy name</td>
      <td>1298395893258015</td>
      <td>100,00&nbsp;€</td>
    </tr>
    <tr>
      <td>Policy name</td>
      <td>1298395893258015</td>
      <td>100,00&nbsp;€</td>
    </tr>
    </tbody>
  </table>
</duet-table>
Open in new window 
<duet-table breakpoint="large" sticky sticky-distance="none">
  <table>
    <thead>
      <tr>
        <th>Sijoituskohde</th>
        <th>Arvopäivä</th>
        <th>Osuuden arvo</th>
        <th>Osuuden määrä</th>
        <th class="duet-text-right">Sääston määrä</th>
      </tr>
    </thead>

    <tbody>
      <tr>
        <th colspan="5">Varainhoitosalkut</th>
      </tr>
      <tr>
        <td><duet-link>Varainhoito Tasapainoinen ›</duet-link></td>
        <td>16.04.2018</td>
        <td>10,32&nbsp;€</td>
        <td>147,31&nbsp;kpl</td>
        <td class="duet-text-right">1&nbsp;520,23&nbsp;€</td>
      </tr>
      <tr>
        <td>Varainhoito Nordic Plus</td>
        <td>16.04.2018</td>
        <td>10,32&nbsp;€</td>
        <td>147,31&nbsp;kpl</td>
        <td class="duet-text-right">1&nbsp;520,23&nbsp;€</td>
      </tr>
      <tr>
        <td>Varainhoito Nordic Plus</td>
        <td>16.04.2018</td>
        <td>10,32&nbsp;€</td>
        <td>147,31&nbsp;kpl</td>
        <td class="duet-text-right">1&nbsp;520,23&nbsp;€</td>
      </tr>
    </tbody>

    <tbody>
      <tr>
        <th colspan="5">Sijoitussalkut</th>
      </tr>
      <tr>
        <td>
          <duet-collapsible heading="Varainhoito Nordic Plus" heading-weight="normal" margin="none">
            <duet-link class="duet-font-size-small" url="#" external>Kuukausikatsaus</duet-link><br />
            <duet-link class="duet-font-size-small" url="#" external>Avaintietoesite</duet-link><br />
            <duet-link class="duet-font-size-small" url="#" external>Säännöt</duet-link><br />
            <duet-link class="duet-font-size-small" url="#" external>Vastuullisuusraportti</duet-link>
          </duet-collapsible>
        </td>
        <td>16.04.2018</td>
        <td>10,32&nbsp;€</td>
        <td>147,31&nbsp;kpl</td>
        <td class="duet-text-right">1&nbsp;520,23&nbsp;€</td>
      </tr>
      <tr>
        <td>
          <duet-collapsible heading="Varainhoito Nordic Plus" heading-weight="normal" margin="none">
            <duet-link class="duet-font-size-small" url="#" external>Kuukausikatsaus</duet-link><br />
            <duet-link class="duet-font-size-small" url="#" external>Avaintietoesite</duet-link><br />
            <duet-link class="duet-font-size-small" url="#" external>Säännöt</duet-link><br />
            <duet-link class="duet-font-size-small" url="#" external>Vastuullisuusraportti</duet-link>
          </duet-collapsible>
        </td>
        <td>16.04.2018</td>
        <td>10,32&nbsp;€</td>
        <td>147,31&nbsp;kpl</td>
        <td class="duet-text-right">1&nbsp;520,23&nbsp;€</td>
      </tr>
    </tbody>

    <tbody>
      <tr>
        <th colspan="5">Eläkesuunnitelma</th>
      </tr>
      <tr>
        <td><duet-link>Varainhoito Nordic Plus</duet-link></td>
        <td>16.04.2018</td>
        <td>10,32&nbsp;€</td>
        <td>147,31&nbsp;kpl</td>
        <td class="duet-text-right">1&nbsp;520,23&nbsp;€</td>
      </tr>
      <tr>
        <td><duet-link>Varainhoito Nordic Plus</duet-link></td>
        <td>16.04.2018</td>
        <td>10,32&nbsp;€</td>
        <td>147,31&nbsp;kpl</td>
        <td class="duet-text-right">1&nbsp;520,23&nbsp;€</td>
      </tr>
      <tr>
        <td><duet-link>Varainhoito Nordic Plus</duet-link></td>
        <td>16.04.2018</td>
        <td>10,32&nbsp;€</td>
        <td>147,31&nbsp;kpl</td>
        <td class="duet-text-right">1&nbsp;520,23&nbsp;€</td>
      </tr>
      <tr>
        <td><duet-link>Varainhoito Nordic Plus</duet-link></td>
        <td>16.04.2018</td>
        <td>10,32&nbsp;€</td>
        <td>147,31&nbsp;kpl</td>
        <td class="duet-text-right">1&nbsp;520,23&nbsp;€</td>
      </tr>
      <tr>
        <td>Varainhoito Nordic Plus</td>
        <td>16.04.2018</td>
        <td>10,32&nbsp;€</td>
        <td>147,31&nbsp;kpl</td>
        <td class="duet-text-right">1&nbsp;520,23&nbsp;€</td>
      </tr>
      <tr>
        <td>Varainhoito Nordic Plus</td>
        <td>16.04.2018</td>
        <td>10,32&nbsp;€</td>
        <td>147,31&nbsp;kpl</td>
        <td class="duet-text-right">1&nbsp;520,23&nbsp;€</td>
      </tr>
    </tbody>
    <tfoot>
      <tr>
        <td colspan="4" class="duet-font-weight-semi-bold">Total</td>
        <td class="duet-text-right duet-font-weight-semi-bold duet-font-size-large">16&nbsp;721,76&nbsp;€</td>
      </tr>
    </tfoot>
  </table>
</duet-table>
Open in new window 
<duet-table margin="none" breakpoint="none-scrollable">
  <table>
    <colgroup>
      <col />
      <col />
      <col class="duet-table-selected-column" />
      <col />
      <col />
    </colgroup>
    <thead>
      <tr>
        <th width="45%" style="min-width: 180px">Vakuutus</th>
        <th class="duet-text-center">Loisto&shy;kasko</th>
        <th class="duet-text-center duet-color-secondary">Laaja kasko</th>
        <th class="duet-text-center">Perus&shy;kasko</th>
        <th class="duet-text-center">Osa&shy;kasko</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>
          <duet-collapsible heading="Eläintörmäys" margin="none">
            Eläintörmäysvakuutus korvaa, jos ajoneuvo törmää muuhun eläimeen kun hirvieläimeen. Väistämisestä
            aiheutuneet vahingot korvataan kolarointi&shy;vakuutuksesta.
          </duet-collapsible>
        </td>
        <td class="duet-text-center">
          <duet-icon margin="none" size="x-small" name="messaging-checked-small" color="success"></duet-icon>
          <duet-visually-hidden>Eläintörmäysvakuutus sisältyy.</duet-visually-hidden>
        </td>
        <td class="duet-text-center">
          <duet-icon margin="none" size="x-small" name="messaging-checked-small" color="success"></duet-icon>
          <duet-visually-hidden>Eläintörmäysvakuutus sisältyy.</duet-visually-hidden>
        </td>
        <td class="duet-text-center">
          <duet-icon margin="none" size="x-small" name="messaging-checked-small" color="success"></duet-icon>
          <duet-visually-hidden>Eläintörmäysvakuutus sisältyy.</duet-visually-hidden>
        </td>
        <td class="duet-text-center">
          <duet-icon margin="none" size="x-small" name="messaging-checked-small" color="success"></duet-icon>
          <duet-visually-hidden>Eläintörmäysvakuutus sisältyy.</duet-visually-hidden>
        </td>
      </tr>
      <tr>
        <td>
          <duet-collapsible heading="Hirvivahinko" margin="none">
            Hirvivahinkovakuutus korvaa, jos ajoneuvo törmää hirven, poron, kauriin tai peuran kanssa. Väistämisestä
            aiheutuneet vahingot korvataan kolarointi&shy;vakuutuksesta.
          </duet-collapsible>
        </td>
        <td class="duet-text-center">
          <duet-icon margin="none" size="x-small" name="messaging-checked-small" color="success"></duet-icon>
          <duet-visually-hidden>Hirvivahinkovakuutus sisältyy.</duet-visually-hidden>
        </td>
        <td class="duet-text-center">
          <duet-icon margin="none" size="x-small" name="messaging-checked-small" color="success"></duet-icon>
          <duet-visually-hidden>Hirvivahinkovakuutus sisältyy.</duet-visually-hidden>
        </td>
        <td class="duet-text-center">
          <duet-icon margin="none" size="x-small" name="messaging-checked-small" color="success"></duet-icon>
          <duet-visually-hidden>Hirvivahinkovakuutus sisältyy.</duet-visually-hidden>
        </td>
        <td class="duet-text-center">
          <duet-icon margin="none" size="x-small" name="messaging-checked-small" color="success"></duet-icon>
          <duet-visually-hidden>Hirvivahinkovakuutus sisältyy.</duet-visually-hidden>
        </td>
      </tr>
      <tr>
        <td>
          <duet-collapsible heading="Palo" margin="none">
            Palovakuutus korvaa irtipäässeen tulen tai ajoneuvon suoraan osuneen salamaniskun aiheuttamat vahingot.
          </duet-collapsible>
        </td>
        <td class="duet-text-center">
          <duet-icon margin="none" size="x-small" name="messaging-checked-small" color="success"></duet-icon>
          <duet-visually-hidden>Palovakuutus sisältyy.</duet-visually-hidden>
        </td>
        <td class="duet-text-center">
          <duet-icon margin="none" size="x-small" name="messaging-checked-small" color="success"></duet-icon>
          <duet-visually-hidden>Palovakuutus sisältyy.</duet-visually-hidden>
        </td>
        <td class="duet-text-center">
          <duet-icon margin="none" size="x-small" name="messaging-checked-small" color="success"></duet-icon>
          <duet-visually-hidden>Palovakuutus sisältyy.</duet-visually-hidden>
        </td>
        <td class="duet-text-center">
          <duet-icon margin="none" size="x-small" name="messaging-checked-small" color="success"></duet-icon>
          <duet-visually-hidden>Palovakuutus sisältyy</duet-visually-hidden>
        </td>
      </tr>
      <tr>
        <td>
          <duet-collapsible heading="Varkaus" margin="none">
            Varkausvakuutus korvaa ajoneuvon, jos se varastetaan. Vakuutus korvaa myös ajoneuvon vauriot, jos se
            vahingoittuu varkauden, luvattoman käytön tai näiden yrityksen yhteydessä. Korvaus maksetaan, jos ajoneuvo
            on ollut lukittuna tai lukitussa tilassa. Varkaus pitää aina ilmoittaa poliisille.
          </duet-collapsible>
        </td>
        <td class="duet-text-center">
          <duet-icon margin="none" size="x-small" name="messaging-checked-small" color="success"></duet-icon>
          <duet-visually-hidden>Varkausvakuutus sisältyy.</duet-visually-hidden>
        </td>
        <td class="duet-text-center">
          <duet-icon margin="none" size="x-small" name="messaging-checked-small" color="success"></duet-icon>
          <duet-visually-hidden>Varkausvakuutus sisältyy.</duet-visually-hidden>
        </td>
        <td class="duet-text-center">
          <duet-icon margin="none" size="x-small" name="messaging-checked-small" color="success"></duet-icon>
          <duet-visually-hidden>Varkausvakuutus sisältyy.</duet-visually-hidden>
        </td>
        <td class="duet-text-center">
          <duet-icon margin="none" size="x-small" name="messaging-checked-small" color="success"></duet-icon>
          <duet-visually-hidden>Varkausvakuutus sisältyy.</duet-visually-hidden>
        </td>
      </tr>
      <tr>
        <td>
          <duet-collapsible heading="Ilkivalta" margin="none">
            Ilkivaltavakuutus korvaa tahallisesta vahingonteosta aiheutuneita vahinkoja. Ilkivallasta on tehtävä
            rikosilmoitus. Toisella ajoneuvolla aiheutettua vahinkoa ei korvata ilkivalta&shy;vakuutuk&shy;sesta.
          </duet-collapsible>
        </td>
        <td class="duet-text-center">
          <duet-icon margin="none" size="x-small" name="messaging-checked-small" color="success"></duet-icon>
          <duet-visually-hidden>Ilkivaltavakuutus sisältyy.</duet-visually-hidden>
        </td>
        <td class="duet-text-center">
          <duet-icon margin="none" size="x-small" name="messaging-checked-small" color="success"></duet-icon>
          <duet-visually-hidden>Ilkivaltavakuutus sisältyy.</duet-visually-hidden>
        </td>
        <td class="duet-text-center">
          <duet-icon margin="none" size="x-small" name="messaging-checked-small" color="success"></duet-icon>
          <duet-visually-hidden>Ilkivaltavakuutus sisältyy.</duet-visually-hidden>
        </td>
        <td class="duet-text-center">
          <duet-icon margin="none" size="x-small" name="messaging-checked-small" color="success"></duet-icon>
          <duet-visually-hidden>Ilkivaltavakuutus sisältyy.</duet-visually-hidden>
        </td>
      </tr>
      <tr>
        <td>
          <duet-collapsible heading="Rahoitus" margin="none">
            Rahoitusvakuutus liitetään kaskoon, jos ajoneuvon omistajana on rahoitusyhtiö tai autoliike tai ajoneuvo on
            leasingvuokrattu. Rahoitusvakuutuksesta voidaan korvata ajoneuvon menettäminen tai vaurioituminen ajoneuvon
            omistajalle, jos korvaus muuten evättäisiin tai sitä kohtuul&shy;listet&shy;taisiin.
          </duet-collapsible>
        </td>
        <td class="duet-text-center">
          <duet-icon margin="none" size="x-small" name="messaging-checked-small" color="success"></duet-icon>
          <duet-visually-hidden>Rahoitusvakuutus sisältyy.</duet-visually-hidden>
        </td>
        <td class="duet-text-center">
          <duet-icon margin="none" size="x-small" name="messaging-checked-small" color="success"></duet-icon>
          <duet-visually-hidden>Rahoitusvakuutus sisältyy.</duet-visually-hidden>
        </td>
        <td class="duet-text-center">
          <duet-icon margin="none" size="x-small" name="messaging-checked-small" color="success"></duet-icon>
          <duet-visually-hidden>Rahoitusvakuutus sisältyy.</duet-visually-hidden>
        </td>
        <td>
          <duet-visually-hidden>Rahoitusvakuutus ei sisälly.</duet-visually-hidden>
        </td>
      </tr>
      <tr>
        <td>
          <duet-collapsible heading="Luonnonilmiö" margin="none">
            Luonnonilmiövakuutus korvaa, jos myrsky kaataa puun ajoneuvon päälle, raesade vahingoittaa ajoneuvon
            ulkopintoja tai kun tulvaveden nousu tai myrskyn irrottama esine aiheuttaa vahinkoa pysähtyneelle
            ajoneuvolle.
          </duet-collapsible>
        </td>
        <td class="duet-text-center">
          <duet-icon margin="none" size="x-small" name="messaging-checked-small" color="success"></duet-icon>
          <duet-visually-hidden>Luonnonilmiövakuutus sisältyy.</duet-visually-hidden>
        </td>
        <td class="duet-text-center">
          <duet-icon margin="none" size="x-small" name="messaging-checked-small" color="success"></duet-icon>
          <duet-visually-hidden>Luonnonilmiövakuutus sisältyy.</duet-visually-hidden>
        </td>
        <td class="duet-text-center">
          <duet-icon margin="none" size="x-small" name="messaging-checked-small" color="success"></duet-icon>
          <duet-visually-hidden>Luonnonilmiövakuutus sisältyy.</duet-visually-hidden>
        </td>
        <td>
          <duet-visually-hidden>Rahoitusvakuutus ei sisälly.</duet-visually-hidden>
        </td>
      </tr>
      <tr>
        <td>
          <duet-collapsible heading="Kolarointi" margin="none">
            Kolarointivakuutus eli törmäysvakuutus korvaa vahingot, jos ajoneuvo törmää, suistuu tieltä, kaatuu tai
            putoaa.
          </duet-collapsible>
        </td>
        <td class="duet-text-center">
          <duet-icon margin="none" size="x-small" name="messaging-checked-small" color="success"></duet-icon>
          <duet-visually-hidden>Kolarointivakuutus sisältyy.</duet-visually-hidden>
        </td>
        <td class="duet-text-center">
          <duet-icon margin="none" size="x-small" name="messaging-checked-small" color="success"></duet-icon>
          <duet-visually-hidden>Kolarointivakuutus sisältyy.</duet-visually-hidden>
        </td>
        <td class="duet-text-center">
          <duet-icon margin="none" size="x-small" name="messaging-checked-small" color="success"></duet-icon>
          <duet-visually-hidden>Kolarointivakuutus sisältyy.</duet-visually-hidden>
        </td>
        <td>
          <duet-visually-hidden>Kolarointivakuutus ei sisälly.</duet-visually-hidden>
        </td>
      </tr>
      <tr>
        <td>
          <duet-collapsible heading="Bonusturva" margin="none">
            Bonusturva varmistaa, että bonukset eivät laske, vaikka kolari sattuisi. Ansaitset bonusturvan
            vahingottomalla ajolla.
          </duet-collapsible>
        </td>
        <td class="duet-text-center">
          <duet-icon margin="none" size="x-small" name="messaging-checked-small" color="success"></duet-icon>
          <duet-visually-hidden>Bonusturva sisältyy.</duet-visually-hidden>
        </td>
        <td class="duet-text-center">
          <duet-icon margin="none" size="x-small" name="messaging-checked-small" color="success"></duet-icon>
          <duet-visually-hidden>Bonusturva sisältyy.</duet-visually-hidden>
        </td>
        <td>
          <duet-visually-hidden>Bonusturva ei sisälly.</duet-visually-hidden>
        </td>
        <td>
          <duet-visually-hidden>Bonusturva ei sisälly.</duet-visually-hidden>
        </td>
      </tr>
      <tr>
        <td>
          <duet-collapsible heading="Lasi" margin="none">
            Lasivakuutus korvaa vauriot, jotka aiheutuvat suoraan ulkoapäin ikkunalasiin osuneesta iskusta. Esimerkiksi
            kivi sinkoutuu tuulilasiin ja rikkoo sen.
          </duet-collapsible>
        </td>
        <td class="duet-text-center">
          <duet-icon margin="none" size="x-small" name="messaging-checked-small" color="success"></duet-icon>
          <duet-visually-hidden>Lasivakuutus sisältyy.</duet-visually-hidden>
        </td>
        <td class="duet-text-center">
          <duet-icon margin="none" size="x-small" name="messaging-checked-small" color="success"></duet-icon>
          <duet-visually-hidden>Lasivakuutus sisältyy.</duet-visually-hidden>
        </td>
        <td>
          <duet-visually-hidden>Lasivakuutus ei sisälly.</duet-visually-hidden>
        </td>
        <td>
          <duet-visually-hidden>Lasivakuutus ei sisälly.</duet-visually-hidden>
        </td>
      </tr>
      <tr>
        <td>
          <duet-collapsible heading="Laaja sijaisauto" margin="none">
            Laajan sijaisautovakuutuksen turvin saat käyttöön sijaisauton, kun oma auto on korjattavana matkan
            keskeyttävän teknisen vian tai vakuutuksesta korvattavan kaskovahingon takia. Sijaisautona korvataan
            vastaava, enintään C-kokoluokan henkilöauto tai enintään 9m3 pakettiauto.
          </duet-collapsible>
        </td>
        <td class="duet-text-center">
          <duet-icon margin="none" size="x-small" name="messaging-checked-small" color="success"></duet-icon>
          <duet-visually-hidden>Laaja sijaisautovakuutus sisältyy.</duet-visually-hidden>
        </td>
        <td>
          <duet-visually-hidden>Laaja sijaisautovakuutus ei sisälly.</duet-visually-hidden>
        </td>
        <td>
          <duet-visually-hidden>Laaja sijaisautovakuutus ei sisälly.</duet-visually-hidden>
        </td>
        <td>
          <duet-visually-hidden>Laaja sijaisautovakuutus ei sisälly.</duet-visually-hidden>
        </td>
      </tr>
    </tbody>
  </table>
</duet-table>
Open in new window 
<style>
  .duet-table-action-row.content-editable td:not(:last-child) {
    border: 1px solid red;
  }

  duet-table thead tr {
    position: absolute !important;
    top: 0;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    overflow: hidden !important;
    clip: rect(1px, 1px, 1px, 1px) !important;
    border: 0 !important;
  }

  duet-table tbody td {
    white-space: nowrap;
  }
</style>

<duet-layout center>
  <div slot="main">
    <duet-card padding="large">
      <duet-heading level="h1" visual-level="h3">Duet-table with groups</duet-heading>

      <duet-heading level="h5" border="solid">Inprogress</duet-heading>
      <duet-table variation="plain" id="inprogress" sticky sticky-distance="none" margin="auto"> </duet-table>

      <duet-heading level="h5" border="solid">Success</duet-heading>
      <duet-table variation="plain" id="success" sticky sticky-distance="none" margin="auto"> </duet-table>

      <duet-heading level="h5" border="solid">Failed</duet-heading>
      <duet-table variation="plain" id="failure" sticky sticky-distance="none" margin="auto"> </duet-table>
    </duet-card>
  </div>
</duet-layout>

<script>
  (function(){
    const tableInprogress = document.querySelector('duet-table#inprogress');
    const tableSuccess = document.querySelector('duet-table#success');
    const tableFailure = document.querySelector('duet-table#failure');
    const form = document.querySelectorAll('duet-checkbox');

    // defined actions - if this is not defined, the table will not have any actions
    tableSuccess.actions=[
      {
        "icon": "action-delete",
        "color": "danger",
        "color_hover": "primary-dark",
        "id": "delete",
        "label": {
          "fi": "Poista",
          "en": "Delete",
          "sv": "Radera"
        }
      }
    ]

    // defined actions - if this is not defined, the table will not have any actions
    tableInprogress.actions=[
      {
        "icon": "navigation-close-small",
        "color": "secondary",
        "color_hover": "primary-dark",
        "id": "cancel",
        "label": {
          "fi": "Kiinni",
          "en": "Close",
          "sv": "Lukk",
        },
      }
    ]

    //defined columns, if this is set, rows must also be defined for this to have an affect
    tableInprogress.columns=[
      {sort_order: 1, direction: 1, index: 0, key:"name",
        label: {
          "fi": "Name",
          "en": "Name",
          "sv": "Name"
        }},
      {sort_order: 2, direction: -1, index: 1, key:"Status",
        label: {
          "fi": "Status",
          "en": "Status",
          "sv": "Status"
        }}
    ];

    //defined columns, if this is set, rows must also be defined for this to have an affect
    tableSuccess.columns=[
      {sort_order: 1, direction: 1, index: 0, key:"name",
        label: {
          "fi": "Name",
          "en": "Name",
          "sv": "Name"
        }},
      {sort_order: 2, direction: -1, index: 1, key:"Status",
        label:  {
          "fi": "Status",
          "en": "Status",
          "sv": "Status"
        }}
    ];

    //defined columns, if this is set, rows must also be defined for this to have an affect
    tableFailure.columns=[
      {sort_order: 1, direction: 1, index: 0, key:"name",
        label: {
          "fi": "Name",
          "en": "Name",
          "sv": "Name"
        }},
      {sort_order: 2, direction: -1, index: 1, key:"Status",
        label:  {
          "fi": "Status",
          "en": "Status",
          "sv": "Status"
        }}
    ];

    //defined rows, if this is set, columns must also be defined for this to have an affect
    tableInprogress.rows= [{
      "name": "<duet-icon margin=\"none\" size=\"xx-small\" name=\"messaging-attachment\"></duet-icon> Filename.png",
      "Status": "----------",
      "meta": {
        "id": "1"
      }
    }
    ]

    //defined rows, if this is set, columns must also be defined for this to have an affect
    tableSuccess.rows= [{
      "name": " <duet-icon margin=\"none\" size=\"xx-small\" name=\"messaging-attachment\"></duet-icon> Filename.png",
      "Status": "Uploaded",
      "meta": {
        "id": "1"
      }
    }, {
      "name": " <duet-icon margin=\"none\" size=\"xx-small\" name=\"messaging-attachment\"></duet-icon> Filename2.png",
      "Status": "Uploaded",
      "meta": {
        "id": "2"
      }
    }
    ]

    //defined rows, if this is set, columns must also be defined for this to have an affect
    tableFailure.rows= [{
      "name": " <duet-icon margin=\"none\" size=\"xx-small\" name=\"messaging-attachment\"></duet-icon> Filename.png",
      "Status": "Upload failed",
      "meta": {
        "id": "1"
      }
    }, {
      "name": " <duet-icon margin=\"none\" size=\"xx-small\" name=\"messaging-attachment\"></duet-icon> Filename2.png",
      "Status": "Upload failed",
      "meta": {
        "id": "2"
      }
    }
    ]

    tableSuccess.addEventListener("duetTableItemAction", function (e) {

      //quick demonstration of how to delete items from the rows array
      console.log("Event received from duet-table: ", e.detail)
      if(e.detail.action === "delete") {
        tableSuccess.rows = tableSuccess.rows.map(item=>item.meta.id!==e.detail.meta.id?item:null).filter(item=>item)
      }
    })
  }())
</script>

Properties #

Property Attribute Description Type Default
breakpoint breakpoint By default the table is responsive - it will be flattened at narrow viewport widths. This prop controls the breakpoint at which the table should be rendered as a regular table. Set to "none" to disable the responsive functionality. Set to "none-scrollable" to disable responsive functionality and allow horizontal scrolling - this is useful for comparison tables where it's important to maintain column and row layout. "large" | "medium" | "none" | "none-scrollable" | "small" | "x-large" | "x-small" | "xx-large" | "xx-small" | "xxx-large" | "xxx-small" "small"
hideHeadVisually hide-head-visually Hide a thead section visually. The content is still available to screen readers. boolean false
margin margin Controls the margin of the component. "auto" | "none" "auto"
sticky sticky Controls whether the table has a sticky header. Sticky headers are not compatible with breakpoint="none-scrollable". boolean false
stickyDistance sticky-distance Adjust the distance from top of the viewport (in pixels) when the table header becomes sticky. "none" | "with-links" | "without-links" "with-links"
theme theme Theme of the table. "" | "default" | "turva" undefined
variation variation Style variation of the table. "fixed" | "plain" | "striped" "striped"

Slots #

Slot Description
"dot-menu- If this slot is populated" the content will be displayed together with a ... type menu to the far right in the tsble header
"footer" Footer slot for the table
"header" Header slot for the table

Usage #

This section includes guidelines for designers and developers about the usage of this component in different contexts.

When to use #

  • When you need to display tabular data.
  • When you want the user to be able to compare features of different insurance plans.

When not to use #

  • To display name/value pairs such as terms and definitions. Use list component instead.
  • To display a glossary list. Use list component instead.

Accessibility #

This component has been validated to meet the WCAG 2.1 AA accessibility guidelines. You can find additional information regarding accessibility of this component below.

Integration

For integration, event and theming guidelines, please see Using Components. This documentation explains how to implement and use Duet’s components across different technologies like Angular, React or Vanilla JavaScript.

Integration guidelines

Tutorials

Follow these practical tutorials to learn how to build simple page layouts using Duet’s CSS Framework, Web Components and other features:

Tutorials

Building Layouts

 Tutorials

Using CLI Tools

 Tutorials

Creating Custom Patterns

 Tutorials

Server Side Rendering

 Tutorials

Sharing Prototypes

 Tutorials

Usage With Markdown

Troubleshooting

If you experience any issues while using a component, please head over to the Support page for more guidelines and help.