Skip to main content

Overview of the table component

The table component enables creating tables in your applications, from simple data displays to complex tables that manage large datasets with advanced features such as search and filtering. The component implementation is modular, allowing you to select the features needed for your application while excluding unnecessary ones. The component provides a set of core, composable components that can be easily extended or customized. It enables creating simple implementations for basic use cases, but also provides the flexibility required for complex ones.

Jutro Design System provides the different components to handle table structure (headers, rows, columns), pagination and table states. It also facilitates the implementation of additional features that complement the base solution. For example, when implementing sorting, column headers include the sorting indicators, but it is the developer responsibility to implement the data sorting function to connect to the provided callback.

To facilitate implementation and serve as reference, the provided examples include some of these additional features, using custom code or TanStack Table library. The features demonstrated in the provided examples are:

  • Title and subtitle: A heading that describes the content of the table.
  • Table controls: A set of controls for manipulating how data is displayed, such as search and filters.
  • Table actions: A set of buttons that perform an operation on the table's dataset, such as adding a new record or exporting data.
  • Column headers: Labels for each column that identify the type of data. Headers can also include sorting functionality.
  • Data rows: A complete set of cells representing a single item or record. Rows can include selection controls in the form of checkboxes.
  • Row actions: A set of actions in the last column that a user can take on an individual row.
  • Pagination: Controls that allow users to navigate through pages of data and adjust the number of rows displayed per page.
  • Table states: Clear visual feedback that is provided when the table can't display rows of data, because the table is still loading, there is a lack of data, or an error has occurred.

Components​

Part of the table component solution is a set of Jutro components that you can use to build your table implementation. The components are designed to enable implementing additional features not covered by themselves, such as search, filtering, and sorting.

Structure​

The table structure is built using a set of components that define the table layout and content organization. They are responsible for adhering to accessibility requirements and provide a set of properties and callback functions to enable additional features. These components include:

  • Table that is the main container for the table, providing structure and layout.
  • TableHeader that defines the header section of the table.
  • HeaderRow that defines a single row within the table header, containing multiple header cells.
  • HeaderCell that represents a single header cell in a row.
  • TableBody that defines the body section of the table, containing data rows.
  • BodyRow that represents a single row in the table, containing multiple cells.
  • BodyCell that represents a single cell in a row, containing data or interactive elements.

These components need to be nested appropriately to create a valid table structure.

The table structure components fully support colspan and rowspan attributes, allowing you to create cells that span multiple columns or rows. This enables complex table layouts such as grouped headers, merged data cells, and hierarchical data presentation.

For more information about the table structure components, see their component contracts.

Pagination​

The table pagination feature is implemented using the Pagination component, which provides controls for navigating through pages of data and adjusting the number of rows displayed per page. The component includes properties and callback functions that enable you to manage pagination state and handle user interactions.

For more information about the Pagination component, see its component contracts.

States​

The table states feature is implemented using a set of components that provide visual feedback when the table cannot display rows of data, because the table is still loading or there is a lack of data. These components include:

  • TableLoader that displays a loading indicator and message when the table is fetching data.
  • TableEmptyState that displays a configurable message when there are no rows to display in the table. It also supports an optional action button to give users a way to take action such as reloading a table.

For more information about the table states components, see their component contracts.

Extending the table component​

The table component is designed to be extended with additional functionalities, such as search, sorting, row actions, and more. These features are not implemented as part of the Jutro components but can be added through custom React code or external libraries. The table components provide properties and callback functions that enable you to implement these features according to your application's requirements. They also ensure that tables with additional functionalities adhere to accessibility standards.

The table component documentation includes examples that demonstrate how to implement additional functionalities. All examples are developed both with and without TanStack Table integration, so you can better assess the approach that best fits your application's requirements.

For more information about examples, see examples.

Extending with custom React code​

You can extend the table component by writing custom React code that utilizes the properties and callback functions provided by the Jutro components. This approach allows you to implement specific features tailored to your application's needs and having the control over the table's behavior and appearance.

The examples serve as a starting point for developers looking to enhance their table implementations with additional functionalities using custom React code. They reuse Jutro components and icons, so when following the examples, you are sure that the implemented feature is consistent with the Jutro Design System.

Integration with external libraries​

The table component is designed to work seamlessly with or without external libraries, such as TanStack Table. This approach allows developers to enhance table implementations by integrating composable functionalities from popular libraries, or to use the table components without external dependencies. In the examples of the table features implementations, you can see how TanStack Table integrations can be applied. While TanStack Table is used in the examples, you can integrate other libraries that better suit your application's needs.

One of the main advantages of using external libraries is the ability to leverage their built-in functionalities, such as sorting, filtering, or other aspects of data management. This can significantly reduce development time and effort, as well as provide a more robust and feature-rich table implementation.

Examples​

The table component examples are available both on the documentation pages mentioned above and in Jutro Storybook. Visually, they are consistent across both platforms, but there are some differences in code structure and dependencies, based on which you can decide which ones better suit your needs. The main characteristics of the examples are:

  • Code structure - The documentation examples are designed to present a singular feature and the code example uses minimal dependencies and amount of code. The Storybook examples are structured to facilitate easier exploration of multiple features, with shared code and dependencies organized across different files.
  • Tanstack Table - Examples on both platforms have a version that uses Tanstack Table for part of data management logic, to showcase how external libraries can be integrated in table implementation.
  • Asynchronous data fetching simulation - Examples of features that are usually used when the table handles asynchronous data fetching on both platforms have a version that simulates it, to demonstrate how to handle data loading scenarios in table implementations. It applies to pagination, search, and sorting features.
  • Testing examples in your IDE - Examples on the documentation pages are presented as code snippets within the documentation content. To test them in your IDE, copy the code snippets into files in a single directory and use them. Storybook examples can reference files that are not available in the Source Code tab, so using them in your IDE might require additional setup.
  • Live editing - You can experiment with code and see immediate results by using the Controls tab in Storybook's live editing feature. Documentation examples require copying the code into your IDE to make edits and test them.

To explore the table component examples, visit:

Accessibility​

The table component is built with accessibility as a core principle, implementing the grid pattern. The component features full keyboard navigation, proper ARIA semantics, and screen reader compatibility to ensure an inclusive user experience.

The contrast ratio of textual elements against their background is above 4.5:1 as per WCAG 2.1 AA requirements. Non-textual content that needs to convey meaning (such as icons and keyboard focus visibility) has a contrast ratio of at least 3:1 with its adjacent colors. All content is visible and functional up to and including 400% without requiring scrolling in two dimensions.

This component has been validated to meet the WCAG 2.1 AA accessibility guidelines. However, changes made by the content author can affect accessibility conformance.