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.
Open in new window
Open in new window
Open in new window
View RTL
<nord-table> <table> <thead> <tr> <thclass="n-table-align-right">Amount</th> <th>Description</th> <th>Method</th> <thclass="n-table-align-right">Date</th> </tr> </thead> <tbody> <tr> <tdclass="n-table-align-right">350,00 €</td> <tdclass="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> <tdclass="n-table-align-right">20.3.2021</td> </tr> <tr> <tdclass="n-table-align-right">29,90 €</td> <tdclass="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> <tdclass="n-table-align-right">19.3.2021</td> </tr> <tr> <tdclass="n-table-align-right">50,00 €</td> <tdclass="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> <tdclass="n-table-align-right">18.3.2021</td> </tr> <tr> <tdclass="n-table-align-right">290,00 €</td> <tdclass="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> <tdclass="n-table-align-right">17.3.2021</td> </tr> <tr> <tdclass="n-table-align-right">49,90 €</td> <tdclass="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> <tdclass="n-table-align-right">16.3.2021</td> </tr> <tr> <tdclass="n-table-align-right">25,00 €</td> <tdclass="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> <tdclass="n-table-align-right">15.3.2021</td> </tr> </tbody> </table> </nord-table>
<nord-table> <table> <thead> <tr> <thclass="n-table-align-right">Amount</th> <th>Status</th> <th>Description</th> <th>Method</th> <thclass="n-table-align-right">Date</th> <thclass="n-table-align-right">Actions</th> </tr> </thead> <tbody> <tr> <tdclass="n-table-align-right">350,00 €</td> <td><nord-badgetype="success">Success</nord-badge></td> <tdclass="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> <tdclass="n-caption">Card</td> <tdclass="n-caption n-table-align-right">20.3.2021</td> <td> <divclass="n-table-actions"> <nord-buttonsize="s"> <nord-visually-hidden>Actions</nord-visually-hidden> <nord-iconsize="s"name="interface-menu-small"style="color:var(--n-color-icon)"></nord-icon> </nord-button> </div> </td> </tr> <tr> <tdclass="n-table-align-right">29,90 €</td> <td><nord-badgetype="warning">Warning</nord-badge></td> <tdclass="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> <tdclass="n-caption">Card</td> <tdclass="n-caption n-table-align-right">20.3.2021</td> <td> <divclass="n-table-actions"> <nord-buttonsize="s"> <nord-visually-hidden>Actions</nord-visually-hidden> <nord-iconsize="s"name="interface-menu-small"style="color:var(--n-color-icon)"></nord-icon> </nord-button> </div> </td> </tr> <tr> <tdclass="n-table-align-right">50,00 €</td> <td><nord-badgetype="success">Success</nord-badge></td> <tdclass="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> <tdclass="n-caption">Card</td> <tdclass="n-caption n-table-align-right">19.3.2021</td> <td> <divclass="n-table-actions"> <nord-buttonsize="s"> <nord-visually-hidden>Actions</nord-visually-hidden> <nord-iconsize="s"name="interface-menu-small"style="color:var(--n-color-icon)"></nord-icon> </nord-button> </div> </td> </tr> <tr> <tdclass="n-table-align-right">49,00 €</td> <td><nord-badgetype="success">Success</nord-badge></td> <tdclass="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> <tdclass="n-caption">Card</td> <tdclass="n-caption n-table-align-right">17.3.2021</td> <td> <divclass="n-table-actions"> <nord-buttonsize="s"> <nord-visually-hidden>Actions</nord-visually-hidden> <nord-iconsize="s"name="interface-menu-small"style="color:var(--n-color-icon)"></nord-icon> </nord-button> </div> </td> </tr> <tr> <tdclass="n-table-align-right">1023,00 €</td> <td><nord-badgetype="danger">Alert</nord-badge></td> <tdclass="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> <tdclass="n-caption">Card</td> <tdclass="n-caption n-table-align-right">12.3.2021</td> <td> <divclass="n-table-actions"> <nord-buttonsize="s"> <nord-visually-hidden>Actions</nord-visually-hidden> <nord-iconsize="s"name="interface-menu-small"style="color:var(--n-color-icon)"></nord-icon> </nord-button> </div> </td> </tr> <tr> <tdclass="n-table-align-right">32,00 €</td> <td><nord-badgetype="success">Success</nord-badge></td> <tdclass="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> <tdclass="n-caption">Card</td> <tdclass="n-caption n-table-align-right">10.3.2021</td> <td> <divclass="n-table-actions"> <nord-buttonsize="s"> <nord-visually-hidden>Actions</nord-visually-hidden> <nord-iconsize="s"name="interface-menu-small"style="color:var(--n-color-icon)"></nord-icon> </nord-button> </div> </td> </tr> <tr> <tdclass="n-table-align-right">40,00 €</td> <td><nord-badgetype="warning">Warning</nord-badge></td> <tdclass="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> <tdclass="n-caption">Card</td> <tdclass="n-caption n-table-align-right">9.3.2021</td> <td> <divclass="n-table-actions"> <nord-buttonsize="s"> <nord-visually-hidden>Actions</nord-visually-hidden> <nord-iconsize="s"name="interface-menu-small"style="color:var(--n-color-icon)"></nord-icon> </nord-button> </div> </td> </tr> <tr> <tdclass="n-table-align-right">28,52 €</td> <td><nord-badgetype="warning">Warning</nord-badge></td> <tdclass="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> <tdclass="n-caption">Card</td> <tdclass="n-caption n-table-align-right">4.3.2021</td> <td> <divclass="n-table-actions"> <nord-buttonsize="s"> <nord-visually-hidden>Actions</nord-visually-hidden> <nord-iconsize="s"name="interface-menu-small"style="color:var(--n-color-icon)"></nord-icon> </nord-button> </div> </td> </tr> <tr> <tdclass="n-table-align-right">350,00 €</td> <td><nord-badgetype="success">Success</nord-badge></td> <tdclass="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> <tdclass="n-caption">Card</td> <tdclass="n-caption n-table-align-right">4.3.2021</td> <td> <divclass="n-table-actions"> <nord-buttonsize="s"> <nord-visually-hidden>Actions</nord-visually-hidden> <nord-iconsize="s"name="interface-menu-small"style="color:var(--n-color-icon)"></nord-icon> </nord-button> </div> </td> </tr> <tr> <tdclass="n-table-align-right">220,00 €</td> <td><nord-badgetype="success">Success</nord-badge></td> <tdclass="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> <tdclass="n-caption">Card</td> <tdclass="n-caption n-table-align-right">3.3.2021</td> <td> <divclass="n-table-actions"> <nord-buttonsize="s"> <nord-visually-hidden>Actions</nord-visually-hidden> <nord-iconsize="s"name="interface-menu-small"style="color:var(--n-color-icon)"></nord-icon> </nord-button> </div> </td> </tr> <tr> <tdclass="n-table-align-right">50,00 €</td> <td><nord-badgetype="success">Success</nord-badge></td> <tdclass="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> <tdclass="n-caption">Card</td> <tdclass="n-caption n-table-align-right">1.3.2021</td> <td> <divclass="n-table-actions"> <nord-buttonsize="s"> <nord-visually-hidden>Actions</nord-visually-hidden> <nord-iconsize="s"name="interface-menu-small"style="color:var(--n-color-icon)"></nord-icon> </nord-button> </div> </td> </tr> <tr> <tdclass="n-table-align-right">350,00 €</td> <td><nord-badgetype="success">Success</nord-badge></td> <tdclass="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> <tdclass="n-caption">Card</td> <tdclass="n-caption n-table-align-right">30.2.2021</td> <td> <divclass="n-table-actions"> <nord-buttonsize="s"> <nord-visually-hidden>Actions</nord-visually-hidden> <nord-iconsize="s"name="interface-menu-small"style="color:var(--n-color-icon)"></nord-icon> </nord-button> </div> </td> </tr> <tr> <tdclass="n-table-align-right">350,00 €</td> <td><nord-badgetype="success">Success</nord-badge></td> <tdclass="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> <tdclass="n-caption">Card</td> <tdclass="n-caption n-table-align-right">30.2.2021</td> <td> <divclass="n-table-actions"> <nord-buttonsize="s"> <nord-visually-hidden>Actions</nord-visually-hidden> <nord-iconsize="s"name="interface-menu-small"style="color:var(--n-color-icon)"></nord-icon> </nord-button> </div> </td> </tr> <tr> <tdclass="n-table-align-right">350,00 €</td> <td><nord-badgetype="success">Success</nord-badge></td> <tdclass="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> <tdclass="n-caption">Card</td> <tdclass="n-caption n-table-align-right">30.2.2021</td> <td> <divclass="n-table-actions"> <nord-buttonsize="s"> <nord-visually-hidden>Actions</nord-visually-hidden> <nord-iconsize="s"name="interface-menu-small"style="color:var(--n-color-icon)"></nord-icon> </nord-button> </div> </td> </tr> <tr> <tdclass="n-table-align-right">29,90 €</td> <td><nord-badgetype="warning">Warning</nord-badge></td> <tdclass="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> <tdclass="n-caption">Card</td> <tdclass="n-caption n-table-align-right">28.2.2021</td> <td> <divclass="n-table-actions"> <nord-buttonsize="s"> <nord-visually-hidden>Actions</nord-visually-hidden> <nord-iconsize="s"name="interface-menu-small"style="color:var(--n-color-icon)"></nord-icon> </nord-button> </div> </td> </tr> <tr> <tdclass="n-table-align-right">50,00 €</td> <td><nord-badgetype="success">Success</nord-badge></td> <tdclass="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> <tdclass="n-caption">Card</td> <tdclass="n-caption n-table-align-right">28.2.2021</td> <td> <divclass="n-table-actions"> <nord-buttonsize="s"> <nord-visually-hidden>Actions</nord-visually-hidden> <nord-iconsize="s"name="interface-menu-small"style="color:var(--n-color-icon)"></nord-icon> </nord-button> </div> </td> </tr> <tr> <tdclass="n-table-align-right">49,00 €</td> <td><nord-badgetype="success">Success</nord-badge></td> <tdclass="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> <tdclass="n-caption">Card</td> <tdclass="n-caption n-table-align-right">26.2.2021</td> <td> <divclass="n-table-actions"> <nord-buttonsize="s"> <nord-visually-hidden>Actions</nord-visually-hidden> <nord-iconsize="s"name="interface-menu-small"style="color:var(--n-color-icon)"></nord-icon> </nord-button> </div> </td> </tr> <tr> <tdclass="n-table-align-right">1023,00 €</td> <td><nord-badgetype="danger">Alert</nord-badge></td> <tdclass="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> <tdclass="n-caption">Card</td> <tdclass="n-caption n-table-align-right">24.2.2021</td> <td> <divclass="n-table-actions"> <nord-buttonsize="s"> <nord-visually-hidden>Actions</nord-visually-hidden> <nord-iconsize="s"name="interface-menu-small"style="color:var(--n-color-icon)"></nord-icon> </nord-button> </div> </td> </tr> <tr> <tdclass="n-table-align-right">32,00 €</td> <td><nord-badgetype="success">Success</nord-badge></td> <tdclass="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> <tdclass="n-caption">Card</td> <tdclass="n-caption n-table-align-right">23.2.2021</td> <td> <divclass="n-table-actions"> <nord-buttonsize="s"> <nord-visually-hidden>Actions</nord-visually-hidden> <nord-iconsize="s"name="interface-menu-small"style="color:var(--n-color-icon)"></nord-icon> </nord-button> </div> </td> </tr> <tr> <tdclass="n-table-align-right">40,00 €</td> <td><nord-badgetype="warning">Warning</nord-badge></td> <tdclass="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> <tdclass="n-caption">Card</td> <tdclass="n-caption n-table-align-right">22.2.2021</td> <td> <divclass="n-table-actions"> <nord-buttonsize="s"> <nord-visually-hidden>Actions</nord-visually-hidden> <nord-iconsize="s"name="interface-menu-small"style="color:var(--n-color-icon)"></nord-icon> </nord-button> </div> </td> </tr> <tr> <tdclass="n-table-align-right">28,52 €</td> <td><nord-badgetype="warning">Warning</nord-badge></td> <tdclass="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> <tdclass="n-caption">Card</td> <tdclass="n-caption n-table-align-right">21.2.2021</td> <td> <divclass="n-table-actions"> <nord-buttonsize="s"> <nord-visually-hidden>Actions</nord-visually-hidden> <nord-iconsize="s"name="interface-menu-small"style="color:var(--n-color-icon)"></nord-icon> </nord-button> </div> </td> </tr> <tr> <tdclass="n-table-align-right">350,00 €</td> <td><nord-badgetype="success">Success</nord-badge></td> <tdclass="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> <tdclass="n-caption">Card</td> <tdclass="n-caption n-table-align-right">20.2.2021</td> <td> <divclass="n-table-actions"> <nord-buttonsize="s"> <nord-visually-hidden>Actions</nord-visually-hidden> <nord-iconsize="s"name="interface-menu-small"style="color:var(--n-color-icon)"></nord-icon> </nord-button> </div> </td> </tr> <tr> <tdclass="n-table-align-right">220,00 €</td> <td><nord-badgetype="success">Success</nord-badge></td> <tdclass="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> <tdclass="n-caption">Card</td> <tdclass="n-caption n-table-align-right">18.2.2021</td> <td> <divclass="n-table-actions"> <nord-buttonsize="s"> <nord-visually-hidden>Actions</nord-visually-hidden> <nord-iconsize="s"name="interface-menu-small"style="color:var(--n-color-icon)"></nord-icon> </nord-button> </div> </td> </tr> </tbody> </table> </nord-table>
<nord-stack> <nord-cardpadding="none"> <h2slot="header">Condensed</h2> <nord-tabledensity="condensed"> <table> <thead> <tr> <th>Amount</th> <th>Description</th> <th>Method</th> <th>Date</th> </tr> </thead> <tbody> <tr> <td>350,00 €</td> <tdclass="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>20.3.2021</td> </tr> <tr> <td>350,00 €</td> <tdclass="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>20.3.2021</td> </tr> <tr> <td>350,00 €</td> <tdclass="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>20.3.2021</td> </tr> </tbody> </table> </nord-table> </nord-card>
<nord-cardpadding="none"> <h2slot="header">Default</h2> <nord-table> <table> <thead> <tr> <th>Amount</th> <th>Description</th> <th>Method</th> <th>Date</th> </tr> </thead> <tbody> <tr> <td>350,00 €</td> <tdclass="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>20.3.2021</td> </tr> <tr> <td>350,00 €</td> <tdclass="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>20.3.2021</td> </tr> <tr> <td>350,00 €</td> <tdclass="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>20.3.2021</td> </tr> </tbody> </table> </nord-table> </nord-card> <nord-cardpadding="none"> <h2slot="header">Relaxed</h2> <nord-tabledensity="relaxed"> <table> <thead> <tr> <th>Amount</th> <th>Description</th> <th>Method</th> <th>Date</th> </tr> </thead> <tbody> <tr> <td>350,00 €</td> <tdclass="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>20.3.2021</td> </tr> <tr> <td>350,00 €</td> <tdclass="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>20.3.2021</td> </tr> <tr> <td>350,00 €</td> <tdclass="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>20.3.2021</td> </tr> </tbody> </table> </nord-table> </nord-card> </nord-stack>
Properties
Property
Attribute
Description
Type
Default
density
density
Controls the density of the table's rows and headers. Relaxed increases space, condensed reduces space.
Headers in a table should be clear, accurate and predictable. When writing headers, always write them in sentence case, not title case. The first word should be capitalized and the rest lowercase (unless a proper noun):
User account
User Account
Include units of measurement symbols in the table header so they aren’t repeated throughout every single column:
Temperature °C
Temperature
Avoid unnecessary words and articles in table headers, such as “the”, “an” or “a”:
Description
A description
Keep decimals consistent. For example, don’t use 3 decimals in one row and 2 in others:
Nord’s table component acts as a lightweight and un-opinionated component for enhancing tabular data. It is up to the user of this component to make sure that the table markup they use is accessible.
It’s important to pay close attention to semantics when authoring tables. The markup in the examples can be used as a starting point. However, be aware that HTML tables have a large feature set which cannot be fully covered in this documentation.
Integration
For integration guidelines, please see Web Components documentation. This documentation explains how to implement and use Nord Web Components across different technologies such as Vue.js, React, or Vanilla JavaScript.
Integration Guidelines
Localization
Nord provides a lightweight solution for localizing its components. Not all components need localizing, as for the most part snippets of text are set per instance. For full localization guidelines, please see Localization documentation.
Localization Guidelines
Troubleshooting
If you experience any issues while using Nord Web Components, please head over to the Support page for more guidelines and ways to contact us.