What’s new Get help Sign in 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="plain">
  <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 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>
  .actions {
    min-width: 80px;
    position: relative;
  }
  .actions duet-icon {
    position: absolute;
    cursor: pointer;
    margin: 0;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
  }
  .actions duet-icon:first-of-type {
    right: 40px;
  }
</style>
<duet-table variation="plain" breakpoint="none">
  <table>
    <thead>
      <tr>
        <th width="90%">Kulu</th>
        <th>
          <duet-visually-hidden>Toiminnot</duet-visually-hidden>
        </th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Lääkärinlausuntopalkkio 50&nbsp;€</td>
        <td class="actions">
          <duet-icon tabindex="0" role="button" aria-label="Muokkaa" margin="none" size="xx-small" responsive="false" outline="primary" name="action-edit-2"></duet-icon>
          <duet-icon tabindex="0" role="button" aria-label="Poista" margin="none" size="xx-small" responsive="false" outline="danger" name="action-delete"></duet-icon>
        </td>
      </tr>
      <tr>
        <td>Lääkärinlausuntopalkkio 123&nbsp;€</td>
        <td class="actions">
          <duet-icon tabindex="0" role="button" aria-label="Muokkaa" margin="none" size="xx-small" responsive="false" outline="primary" name="action-edit-2"></duet-icon>
          <duet-icon tabindex="0" role="button" aria-label="Poista" margin="none" size="xx-small" responsive="false" outline="danger" name="action-delete"></duet-icon>
        </td>
      </tr>
      <tr>
        <td>Lääkärinlausuntopalkkio 89&nbsp;€</td>
        <td class="actions">
          <duet-icon tabindex="0" role="button" aria-label="Muokkaa" margin="none" size="xx-small" responsive="false" outline="primary" name="action-edit-2"></duet-icon>
          <duet-icon tabindex="0" role="button" aria-label="Poista" margin="none" size="xx-small" responsive="false" outline="danger" name="action-delete"></duet-icon>
        </td>
      </tr>
      <tr>
        <td>Lääkärinlausuntopalkkio 120&nbsp;€</td>
        <td class="actions">
          <duet-icon tabindex="0" role="button" aria-label="Muokkaa" margin="none" size="xx-small" responsive="false" outline="primary" name="action-edit-2"></duet-icon>
          <duet-icon tabindex="0" role="button" aria-label="Poista" margin="none" size="xx-small" responsive="false" outline="danger" name="action-delete"></duet-icon>
        </td>
      </tr>
    </tbody>
  </table>
</duet-table>

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" | "xx-large" | "xxx-large" "small"
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. "plain" | "striped" "striped"

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

Abstract

 Tutorials

Creating Custom Patterns

 Tutorials

Server Side Rendering

 Tutorials

VS Code

 Tutorials

Zeplin

 Tutorials

Usage With Markdown

 Tutorials

Building Layouts

 Tutorials

Using CLI Tools

 Tutorials

Sharing Prototypes

Troubleshooting

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