Preview
Anatomy
Cells
The data table has 4 types of cells:
- Header cell which is a dynamic element and can be used to sort columns
- Text cell and Number cell that display information, are static, and can be used as needed.
- Custom cell that can be filled with other types of content, such as buttons, icons, and status dots.
Rows
The data table has 3 types of rows:
- Default row with a white background
- Striped row with a light gray background
- Row with divider line
- Highlighted row with a light purple background, used to summarize search results, and to highlight relevant events.
The rows also have two variants regarding the height:
- 48px
- 64px
Header cell
There are different variants and states for the header cell, according to the usage of the sorting interaction.
Code
<usln-table theme="light" styling-option="striped" rows-clickable="fasle" is-loading="false">
<div slot="table-rows">
<usln-table-row theme="light" is-header-row="true" custom-header-background-color="white">
<div slot="table-cells">
<usln-table-header-cell theme="light" type="custom" width="64px" min-width="64px">
</usln-table-header-cell>
<usln-table-header-cell theme="light" type="status" width="40px" label-text="Status">
</usln-table-header-cell>
<usln-table-header-cell theme="light" type="number" width="150px" min-width="115px" label-text="Guides" has-sorting="true" sorting-active="true" sort-direction="desc">
</usln-table-header-cell>
<usln-table-header-cell theme="light" type="text" width="1fr" min-width="350px" label-text="Description" has-sorting="true" sort-direction="asc">
</usln-table-header-cell>
<usln-table-header-cell theme="light" type="icon" width="52px" min-width="52px" icon="link">
</usln-table-header-cell>
</div>
</usln-table-row>
<usln-table-row theme="light" is-highlighted="true">
<div slot="table-cells">
<usln-table-cell theme="light"></usln-table-cell>
<usln-table-cell theme="light" data=""></usln-table-cell>
<usln-table-cell theme="light" data="TOTAL"></usln-table-cell>
<usln-table-cell theme="light" data="4711"></usln-table-cell>
<usln-table-cell theme="light" data=""></usln-table-cell>
</div>
</usln-table-row>
<usln-table-row theme="light">
<div slot="table-cells">
<usln-table-cell theme="light">
<usln-list-thumbnail type="icon_guide" slot="table-cell-content"></usln-list-thumbnail>
</usln-table-cell>
<usln-table-cell theme="light" data="published">
</usln-table-cell>
<usln-table-cell theme="light" data="42">
</usln-table-cell>
<usln-table-cell theme="light" data="This is a very successful Guide">
</usln-table-cell>
<usln-table-cell theme="light" data="chevron_right">
</usln-table-cell>
</div>
</usln-table-row>
</div>
</usln-table>
Example table with one highlighted and one data row
Guidelines
Data tables are used to display complex information in a grid format. The structure allow users to easily scan and compare data. At Userlane, data tables are mostly used in the Analytics section.
Behaviour
Sorting
A table can be sorted by a specific column if needed. The header cell will then include an arrow icon, which shows the possibility to sort, and also the direction of sorting (up or down) when active.
Use a sorting interaction when it's relevant for users to filter results.
Sticky header
When a table doesn't fit in the viewport, the header should be sticky while vertically scrolling through it.
Horizontal scrolling
When the width of a table doesn't fit in the viewport, the content becomes horizontally scrollable with the first column sticky.
Loading
A skeleton loading state with an animated gradient is used for the tables. The skeleton loading doesn't apply to the header, since it's static and doesn't change.
The loading state is shown in different scenarios:
- When the page is loaded for the first time or reloaded.
- When the search results are being loaded.
- When switching between pages.
- When sorting.
Empty
When no content is available for a table, the empty state is displayed.
Do's and dont's
- Use the tertiary button variant when adding it to a table cell.
- Use the 48px as standard row height. The 64px should only be used in cases where less elements are expected in the row and more space is required due to bigger elements (e.g. avatar thumbnails), to avoid that it looks too "packed".
- Use the alternate/striped rows whenever possible. Use the variant with divider lines only in cases where the backgroud could interfere on content.
- Add any element to a data table that could have a accordion behaviour or trigger dropdowns.
- Use primary or secondary buttons inside table cells. That would create a lot of visual noise and no clear hierarchy.
Content guidelines
Header cells
- Keep header labels as short as possible to avoid line-breaks.
Numbers
- Thousands and decimals separators should adjust according to the browser settings (e.g. for browsers using U.S. English settings, use a comma for thousands and dot for decimals).
Text
- If text exceeds the column width, it should truncate in the end and the whole content will be displayed on a tooltip.
- For long URLs, the text cell should allow multiple lines and wrapping.
Variants
Pagination
It's recommended to use pagination to avoid long tables, and help users to navigate through content.
When using pagination, always use 20 rows per page. The numbers below will indicate which page is currently active, and how many items are being displayed.
Search
The table component includes a search functionality, which allows users to filter and find relevant results.
Search field
When the search is enabled, the search field component will be displayed on the top area of the card.
Search results
When displaying the search results, a highlight row can also be displayed to summarize the numbers, if relevant to the specific use case.
The search term is always highlighted in all search results.