TableReady

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
Edit in CodePen
Open in new window
Edit in CodePen
Open in new window
Edit in CodePen
Open in new window
Edit in CodePen
Open in new window
Edit in CodePen Open in new window
Edit in CodePen Open in new window
Edit in CodePen Open in new window
Edit in CodePen Open in new window
View RTL
<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
densitydensity

Controls the density of the table's rows and headers. Relaxed increases space, condensed reduces space.

"condensed" | "default" | "relaxed""default"
scrollSnapscroll-snap

Enables scroll-snapping, meaning the scroll position is always column-aligned.

booleanfalse
stripedstriped

Controls whether to use zebra striping on tables, which can improve readability.

booleanfalse

Slots

Slot nameDescription
Default slot

Default slot which holds the HTML <table> element.

CSS Properties

CSS Custom Properties provide more fine grain control over component presentation. We advise utilizing existing properties on the component before using these.

PropertyDescriptionDefault
--n-table-td-padding

Controls the padding around the table cells.

calc(var(--n-space-m) * 0.95)
--n-table-border-radius

Controls how rounded the corners are, using border radius tokens.

var(--n-border-radius-s)

Usage

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

Do

  • Use when you need to display tabular data in a view.
  • Use a <table> element directly within the component.
  • Use inside a Card, and give the card a header.

Don’t

  • Don’t use to display list data.
  • Don’t use to display basic key and value pairs, consider a description list instead.
  • Don’t use tables for layout.
  • Don't use a primary button in every row of a table.

Content guidelines

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:

30.00
25.00
30.000
25.0

Additional considerations

  • Nord’s table component acts as a lightweight and un-opinionated wrapper 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.
  • Despite the name the Nord table component does not supplement the HTML <table> element. Please ensure that a <table> element is a direct descendant of the table component.
  • 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.
  • When making adjustments to table columns such as width, color, alignment and other styles please consider using the HTML <col> and <colgroup> elements for applying them. Further information on the <col> and <colgroup> elements can be found in the MDN docs.

Advanced use-cases

The table component itself does not provide any functionality, only styles. This works well for simple or static tables, but there are instances where functionality such as sorting, resizing, or column dragging are required. This kind of functionality is out of scope for the table component, as the spectrum of possible use-cases is too broad for a single component to cover effectively. Whilst the table component is limited out of the box, these same limitations make it easy to integrate with third-party libraries which offer advanced functionality.

Broadly speaking, there are two categories of library for building advanced tables: headless and component-based.

Which kind of table library should I use?

Each approach has subtle tradeoffs. Understanding these subtleties will help you make the right decision for your application and team.

Component-based Table Libraries

Component-based table libraries will typically supply you with a feature-rich drop-in solution, and ready-to-use components/markup complete with styles/theming.

Pros:

  • Ship with ready-to-use markup/styles.
  • Little setup required.
  • Turn-key experience.

Cons:

  • Less control over markup.
  • Custom styles are typically theme-based.
  • Larger bundle-sizes.

If you want a ready-to-use table and design/bundle-size are not hard requirements, then you should consider using a component-based table library.

Headless Table Libraries

Headless table libraries will typically supply you with functions, state, utilities and event listeners to build your own table markup or attach to existing table markups.

Pros:

  • Full control over markup and styles.
  • Supports all styling patterns (CSS, CSS-in-JS, UI libraries, etc).
  • Smaller bundle-sizes.

Cons:

  • More setup and effort required.
  • No markup, styles or themes provided.

If you want a lighter-weight table or full control over the design, then you should consider using a headless table library.

Recommendation for headless libraries

In the headless category, we recommend Tanstack Table. Tanstack table offers integrations for many UI frameworks, such as Vue and React. It is easy to work with, and because it does not bring any HTML or styles itself, you can use it to render a plain, semantic <table> wrapped in a <nord-table>, and you will get all the necessary styles.

We have created examples in both Vue and React, showing how to combine Tanstack table with Nord's table component, in order to build a table with both sorting and resizable columns. Check out the React example and likewise the Vue example.

React / Tanstack table sourceVue / Tanstack table source

Recommendation for component-based libraries

In the component-based category, we recommend AG Grid, specifically the community edition. AG Grid is feature-rich, has extensive documentation, and offers integrations for many UI frameworks, such as Vue and React. AG Grid takes control of all rendering and output, but offers extension points for taking control of some aspects. It does not output a <table> element, so it cannot be used with Nord's own table component.

However it can be styled via themes, and we have created a Nord theme using our design tokens. The theme is published on npm as @nordhealth/ag-theme-nord. To use the theme, include the CSS in your project and add the class ag-theme-nord to the element wrapping AG Grid. You have to configure legacy themes if you are using v33 or higher.

We have created examples in both Vue and React showing how to combine AG Grid with Nord's theme, in order to build a table with sorting, resizable columns, draggable and re-orderable columns, plus sticky/pinned columns. Check out the React example and likewise the Vue example.

React / AG Grid table sourceVue / AG Grid table source

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

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.

Was this page helpful?

YesNoSend feedback

We use this feedback to improve our documentation.

Choose therapy brandChoose veterinary brandAbout Nord Design SystemGet support