Active theme set to Nord LightNord DarkVet LightVet DarkHealth LightHealth Dark and saved in preferences.
Copied to clipboard.

Table draft

Table is used to organize and display information from a data set. Provides table styles in addition to features like sticky headers and support for narrow viewports.

Edit in CodePen Open in new window
Edit in CodePen Open in new window
Edit in CodePen Open in new window
<nord-table>
<table>
<thead>
<tr>
<th class="n-table-align-right">Amount</th>
<th>Description</th>
<th>Method</th>
<th class="n-table-align-right">Date</th>
</tr>
</thead>
<tbody>
<tr>
<td class="n-table-align-right">350,00&thinsp;</td>
<td class="n-table-ellipsis">
Suspendisse blandit sodales eros, quis aliquet leo aliquet ultrices lorem ipsum dolor sit amet consectetuer
adipiscing suspendisse blandit sodales eros, quis aliquet leo aliquet ultrices lorem ipsum dolor sit amet
consectetuer adipiscing
</td>
<td>Card</td>
<td class="n-table-align-right">20.3.2021</td>
</tr>
<tr>
<td class="n-table-align-right">29,90&thinsp;</td>
<td class="n-table-ellipsis">
Suspendisse blandit sodales eros, quis aliquet leo aliquet ultrices lorem ipsum dolor sit amet consectetuer
adipiscing suspendisse blandit sodales eros, quis aliquet leo aliquet ultrices lorem ipsum dolor sit amet
consectetuer adipiscing
</td>
<td>Card</td>
<td class="n-table-align-right">19.3.2021</td>
</tr>
<tr>
<td class="n-table-align-right">50,00&thinsp;</td>
<td class="n-table-ellipsis">
Suspendisse blandit sodales eros, quis aliquet leo aliquet ultrices lorem ipsum dolor sit amet consectetuer
adipiscing suspendisse blandit sodales eros, quis aliquet leo aliquet ultrices lorem ipsum dolor sit amet
consectetuer adipiscing
</td>
<td>Card</td>
<td class="n-table-align-right">18.3.2021</td>
</tr>
<tr>
<td class="n-table-align-right">290,00&thinsp;</td>
<td class="n-table-ellipsis">
Suspendisse blandit sodales eros, quis aliquet leo aliquet ultrices lorem ipsum dolor sit amet consectetuer
adipiscing suspendisse blandit sodales eros, quis aliquet leo aliquet ultrices lorem ipsum dolor sit amet
consectetuer adipiscing
</td>
<td>Card</td>
<td class="n-table-align-right">17.3.2021</td>
</tr>
<tr>
<td class="n-table-align-right">49,90&thinsp;</td>
<td class="n-table-ellipsis">
Suspendisse blandit sodales eros, quis aliquet leo aliquet ultrices lorem ipsum dolor sit amet consectetuer
adipiscing suspendisse blandit sodales eros, quis aliquet leo aliquet ultrices lorem ipsum dolor sit amet
consectetuer adipiscing
</td>
<td>Card</td>
<td class="n-table-align-right">16.3.2021</td>
</tr>
<tr>
<td class="n-table-align-right">25,00&thinsp;</td>
<td class="n-table-ellipsis">
Suspendisse blandit sodales eros, quis aliquet leo aliquet ultrices lorem ipsum dolor sit amet consectetuer
adipiscing suspendisse blandit sodales eros, quis aliquet leo aliquet ultrices lorem ipsum dolor sit amet
consectetuer adipiscing
</td>
<td>Card</td>
<td class="n-table-align-right">15.3.2021</td>
</tr>
</tbody>
</table>
</nord-table>

Properties

PropertyAttributeDescriptionTypeDefault
densitydensityControls the density of the table's rows and headers. Relaxed increases space, condensed reduces space."condensed" | "default" | "relaxed""default"

Slots

Slot nameDescription
Default slotThe table.