beta This component version is ready to be used but is still in active development.

Table block

Ever useful for presentation of tabular information and data — never to be used for layout.

github location npm version

Usage

The Table component is designed to display tabular data in an organised, accessible manner. It provides styling for features such as selection, sorting, captions and other variants.

The current vf-table is not optimised for mobile or smaller screens.

When to use

  • When displaying structured information in rows and columns for easy comparison across multiple items
  • When handling large volumes of data that require sorting and management.
  • To illustrate relationships and categories within structured data clearly.

When not to use

  • Do not use the vf-table as a visual layout for content on a page
  • Do not use tables to present primarily visual content, such as images or videos, where a visual layout is more appropriate.
  • Avoid tables for multi-level hierarchical information, as they can become cumbersome to navigate.
  • Avoid tables when the context or relationships between data points are not well defined or necessary for understanding the information.

Variants

Default Table:

  • The basic table setup without additional functionalities.

Table with Footer:

  • Includes a footer that can be used for summary information.

Table with Caption:

  • The caption provides a concise summary or overall topic of the table, providing context for users.

Table with Row Headings:

  • Use a different weight to emphasise the identifying information in a row (first column) by adding the class vf-table__heading

Actions:

  • Common actions (e.g., edit, delete) can be shown in rows. Using this styling would allow users to complete tasks directly within a table hence reducing clicks required to perform the action.

Sortable Table:

  • To show tables sorting in a specific order such as alphabetical or numerical, this styling can be used.

Selectable Table:

  • The styling shows row selection for batch actions or further manipulation.

CSS Class Reference

Class Applies To Result
vf-table table Gives initial generic styling to the table element and it's children
vf-table--striped vf-table Adds striped rows to the relevant tr elements.
vf-table--bordered vf-table adds a border around all elements
vf-table--compact vf-table Reduces the padding on the heading and cells
vf-table--loose vf-table Increases the padding on the heading and cells

Accessibility

Accessibility is critical to ensure all users can interact with the Table component effectively.

  • Use semantic HTML elements like <tr>, <th>, and <td>.
  • Ensure keyboard navigability and screen reader compatibility by using appropriate aria attributes.
  • Maintain high contrast ratios for text and background colours.

Best Practices Recommendations

  • Align text to the left for readability, except for numerical data, which should be right-aligned to facilitate comparison.
  • Ensure interactive elements like links are clearly visible and easily accessible, especially on touch devices.

Variants

Default variant

Event Date Type Location
dave Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima accusamus a nostrum odit aliquid repudiandae architecto molestiae, dolores. roger London, U.K.
dave Lorem ipsum dolor sit amet, consectetur adipisicing elit. Distinctio fugit illo officia dignissimos amet. roger London, U.K.
dave Lorem ipsum dolor sit amet, consectetur adipisicing elit. roger London, U.K.
Nunjucks syntax

Depending on your environment you'll want to use render or include. As a rule of thumb: server-side use include, precompiled browser use render. If you're using vf-eleventy you should use include.

Using include

You'll need to pass a context object from your code or Yaml file (example), as well as the path to the Nunjucks template. Nunjucks' include is an abstraction of render and provides some additional portability.


{% set context fromYourYamlFile %}
- or -
{% set context = { 
"component-type" : "block",
"exampleMultiColumns" : "false",
"count" : 0,
"table_headings" : [object Object],[object Object],[object Object],[object Object],
"table_rows" : [object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],
 }
%}
{% include "../path_to/vf-table/vf-table.njk" %}

Using render

This approach is best for bare-bones Nunjucks environments, such as precompiled templates with the Nunjucks slim runtime where include is not be available.


{% render '@vf-table', {
  "component-type" : "block",
  "exampleMultiColumns" : "false",
  "count" : 0,
  "table_headings" : [object Object],[object Object],[object Object],[object Object],
  "table_rows" : [object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],}
%}
HTML 
<svg class="vf-icon-sprite vf-icon-sprite--tables" display="none">
  <defs>
    <g id="vf-table-sortable--up">
      <path xmlns="http://www.w3.org/2000/svg" d="M17.485,5.062,12.707.284a1.031,1.031,0,0,0-1.415,0L6.515,5.062a1,1,0,0,0,.707,1.707H10.25a.25.25,0,0,1,.25.25V22.492a1.5,1.5,0,1,0,3,0V7.019a.249.249,0,0,1,.25-.25h3.028a1,1,0,0,0,.707-1.707Z" />
    </g>
    <g id="vf-table-sortable--down">
      <path xmlns="http://www.w3.org/2000/svg" d="M17.7,17.838a1,1,0,0,0-.924-.617H13.75a.249.249,0,0,1-.25-.25V1.5a1.5,1.5,0,0,0-3,0V16.971a.25.25,0,0,1-.25.25H7.222a1,1,0,0,0-.707,1.707l4.777,4.778a1,1,0,0,0,1.415,0l4.778-4.778A1,1,0,0,0,17.7,17.838Z" />
    </g>
    <g id="vf-table-sortable">
      <path xmlns="http://www.w3.org/2000/svg" d="M9,19a1,1,0,0,0-.707,1.707l3,3a1,1,0,0,0,1.414,0l3-3A1,1,0,0,0,15,19H13.5a.25.25,0,0,1-.25-.25V5.249A.25.25,0,0,1,13.5,5H15a1,1,0,0,0,.707-1.707l-3-3a1,1,0,0,0-1.414,0l-3,3A1,1,0,0,0,9,5h1.5a.25.25,0,0,1,.25.25v13.5a.25.25,0,0,1-.25.25Z" />
    </g>
  </defs>
</svg>

<table class="vf-table">


  <thead class="vf-table__header">
    <tr class="vf-table__row">
      <th class="vf-table__heading" scope="col"> Event
      </th>
      <th class="vf-table__heading" scope="col"> Date
      </th>
      <th class="vf-table__heading" scope="col"> Type
      </th>
      <th class="vf-table__heading" scope="col"> Location
      </th>
    </tr>
  </thead>

  <tbody class="vf-table__body">
    <tr class="vf-table__row
">
      <td class="vf-table__cell">dave</td>
      <td class="vf-table__cell">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima accusamus a nostrum odit aliquid repudiandae architecto molestiae, dolores.</td>
      <td class="vf-table__cell">roger</td>
      <td class="vf-table__cell">London, U.K.</td>
    </tr>
    <tr class="vf-table__row
">
      <td class="vf-table__cell">dave</td>
      <td class="vf-table__cell">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Distinctio fugit illo officia dignissimos amet.</td>
      <td class="vf-table__cell">roger</td>
      <td class="vf-table__cell">London, U.K.</td>
    </tr>
    <tr class="vf-table__row
">
      <td class="vf-table__cell">dave</td>
      <td class="vf-table__cell">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</td>
      <td class="vf-table__cell">roger</td>
      <td class="vf-table__cell">London, U.K.</td>
    </tr>
  </tbody>
</table>

Examples

Has Footer

Event Date Type Location
dave Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima accusamus a nostrum odit aliquid repudiandae architecto molestiae, dolores. roger London, U.K.
dave Lorem ipsum dolor sit amet, consectetur adipisicing elit. Distinctio fugit illo officia dignissimos amet. roger London, U.K.
dave Lorem ipsum dolor sit amet, consectetur adipisicing elit. roger London, U.K.
Hello world

Has Caption

Hello Caption
Event Date Type Location
dave Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima accusamus a nostrum odit aliquid repudiandae architecto molestiae, dolores. roger London, U.K.
dave Lorem ipsum dolor sit amet, consectetur adipisicing elit. Distinctio fugit illo officia dignissimos amet. roger London, U.K.
dave Lorem ipsum dolor sit amet, consectetur adipisicing elit. roger London, U.K.

Has Row Heading

Event Date Type Location
dave Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima accusamus a nostrum odit aliquid repudiandae architecto molestiae, dolores. roger London, U.K.
daveLorem ipsum dolor sit amet, consectetur adipisicing elit. Distinctio fugit illo officia dignissimos amet. roger London, U.K.
daveLorem ipsum dolor sit amet, consectetur adipisicing elit. roger London, U.K.

Actions

Event Date Type Location Actions
dave Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima accusamus a nostrum odit aliquid repudiandae architecto molestiae, dolores. roger London, U.K.
dave Lorem ipsum dolor sit amet, consectetur adipisicing elit. Distinctio fugit illo officia dignissimos amet. roger London, U.K.
dave Lorem ipsum dolor sit amet, consectetur adipisicing elit. roger London, U.K.

Sortable
dave Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima accusamus a nostrum odit aliquid repudiandae architecto molestiae, dolores. roger London, U.K.
dave Lorem ipsum dolor sit amet, consectetur adipisicing elit. Distinctio fugit illo officia dignissimos amet. roger London, U.K.
dave Lorem ipsum dolor sit amet, consectetur adipisicing elit. roger London, U.K.

Selectable

Event Date Type Location
dave Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima accusamus a nostrum odit aliquid repudiandae architecto molestiae, dolores. roger London, U.K.
dave Lorem ipsum dolor sit amet, consectetur adipisicing elit. Distinctio fugit illo officia dignissimos amet. roger London, U.K.
dave Lorem ipsum dolor sit amet, consectetur adipisicing elit. roger London, U.K.

Selectable Selected

Event Date Type Location
dave Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima accusamus a nostrum odit aliquid repudiandae architecto molestiae, dolores. roger London, U.K.
dave Lorem ipsum dolor sit amet, consectetur adipisicing elit. Distinctio fugit illo officia dignissimos amet. roger London, U.K.
dave Lorem ipsum dolor sit amet, consectetur adipisicing elit. roger London, U.K.
Installation info

This repository is distributed with npm. After installing npm, you can install vf-table with this command.

$ yarn add --dev @visual-framework/vf-table

Sass/CSS

The style files included are written in Sass. If you're using a VF-core project, you can import it like this:

@import "@visual-framework/vf-table/index.scss";

Make sure you import Sass requirements along with the modules. You can use a project boilerplate or the vf-sass-starter

Changelog

Changelog

1.2.1

1.2.0-rc.3

  • Use new interactive colour token.
  • https://github.com/visual-framework/vf-core/issues/1688

1.2.0-rc.2

  • restyles the arrows on sortable tables

1.2.0-rc.1

  • makes the --striped variant the default styling.
  • deprecates --striped, --bordered, --tight, --loose variants.
  • tidies up CSS ordering of rulesets to match more the component.
  • makes the --sortable icons on by default before a bigger refactor.

1.1.2

  • changes any set- style functions to cleaner version

1.1.1

  • Fixes hover issue that was making all buttons have blue text

1.1.0

  • Adds more table examples to the component

1.0.0

  • Initial stable release

Assets


File system location: components/vf-table

Find an issue on this page? Propose a change or discuss it.