Skip to main content

Data table

Data table in Storybook
Warning: This is an experimental component

This experimental component might not yet be fully accessible, fully documented, or fully covered by design tokens, and its API and behavior might change more frequently than stable components.

For more information, see Introduction to experimental components and properties.

Usage​

Overview​

The data table is a pre-composed experience that packages the most common table patterns into a single component. While the stable table is a composable system for designing custom layouts from low-level building blocks, the data table is designed for configuring a standardized experience with common patterns already built-in.

The component enables designers and developers to quickly implement complex data views, including pagination, sorting, search, and filtering, by configuring properties rather than building the table structure from scratch.

FeatureTable (stable)Data table (experimental)
ApproachComposable: Design custom layouts using low-level building blocks.Pre-composed: Configure a standardized experience with built-in patterns.
ConfigurationManual: You must manually wire behaviors like filtering or search.Built-in: Common behaviors are pre-wired and managed using component props.
Best forCustom layouts or unique data behaviors.Standardized data manipulation using proven Jutro patterns.

When to use​

  • Use the data table for complex datasets that require comparing information or sorting data.
  • Use it when you want standard features, like pagination, search, and filtering, available in the base configuration.

When not to use​

Don't use the data table if you need a custom layout or unique data behaviors that deviate from the base configuration. Use the stable table component instead.

Formatting​

Anatomy​

Anatomy of a data table with numbered callouts identifying the header, filters, primary action, row actions, and pagination.

The data table component consists of the following elements:

  1. Title: A heading that describes the table content.
  2. Table controls: Interactive elements for manipulating data, such as search and filters.
  3. Table actions: Buttons that perform operations on the table's dataset, such as adding a record or exporting data.
  4. Row actions: A set of actions in the final column for managing an individual row.
  5. Pagination: Controls for navigating through pages of data and adjusting the number of rows displayed per page.

Header and actions​

The table header contains the title and global actions for the dataset. When configuring these actions, especially those involving AI, follow these hierarchy and placement rules:

Button hierarchy​

  • Maintain a single primary action: Never place two primary buttons next to each other. Only one button in the header or row uses the primary styling.
  • Prioritize standard actions: In most cases, a standard action is the main task a user needs to perform. Assign the primary style to the standard action and use the secondary style for AI-driven actions.
  • Use visual separators: When standard and AI actions coexist, consider using a visual separator to distinguish between the two types of intent.

AI action guidelines​

  • Order of operations: Place standard actions before AI actions to reflect a logical workflow where manual tasks are the priority.
  • Avoid redundant AI iconography: Don't use AI-specific icons for standard functions. For example, use the standard edit icon for a normal edit button rather than an AI-themed variation.
  • Contextual relevance: Only use AI actions when they provide unique value, such as summarizing data, rather than for simple CRUD (Create, Read, Update, Delete) tasks.

Content​

General writing guidelines​

  • Use sentence case for all aspects of designing Guidewire product interfaces. Don't use title case.
  • Use present tense verbs and active voice in most situations.
  • Use common contractions to lend your copy a more natural and informal tone.
  • Use plain language. Avoid unnecessary jargon and complex language.
  • Keep words and sentences short.

Table-specific guidelines​

The data table follows the same content principles as the standard table component. For more details on writing column headers, formatting numbers, and empty states, see the table component documentation.

Text wrapping and trunctation​

The data table automatically manages cell content based on the following base configuration:

  • Text wrapping: Content wraps up to 2 lines within a cell.
  • Truncation: Text that exceeds 2 lines is truncated with an ellipsis (...), and the full text is displayed in a tooltip on hover.
  • Titles and subtitles: Table titles and subtitles also wrap up to 2 lines before truncating.

Accessibility​

The data table is designed to meet WCAG 2.1 AA accessibility guidelines. The contrast ratio of textual elements against their background is above 4.5:1. Non-textual content that conveys meaning and keyboard focus indicators have a contrast ratio of at least 3:1 with their adjacent colors.

When using this component, ensure you follow these guidelines:

  • Provide a descriptive title: Always include a title that describes the table's purpose to help users with screen readers understand the context before navigating the data.
  • Use accessible names for actions: For icon-only buttons in the header or row actions, provide a descriptive aria-label (for example, aria-label="Delete row").
  • Write helpful empty states: When no data is available, provide a clear message that explains why the table is empty and what the user can do next.