Table

Tables display tabular data or compare data both vertically and horizontally. Tables rely on a combination of data elements that map to corresponding column objects.

For more information on how to use the features and props for this component, check out the developer documentation.

To learn more about configuration, visit Pega Community.

Tables are comprised of columns and the data used to populate each row. The columns of a Table must include a label and a renderer, which can either be plain text representing the name of the attribute to render from the row data, or a functional component. Columns may be configured to align content left, center, or right, as well as enforce that the content of the column must not wrap to new lines by passing noWrap.

The data that populates a Table should be constructed as a list of objects containing key-value pairs for each column that the row has data for. Any column label that is missing from the attributes of a given row object will result in an empty cell for that column within the row.

If the list of data is empty, an EmptyState component will render below the column labels. Alternatively, if you need the Table to display an indeterminate Progress animation, pass the loading prop. This will replace any row data. You can customize the message of the Progress component by passing a loadingMessage.

The Table component can render with an optional title, and the background colors of the rows may darken or lighten if the hoverHighlight prop is passed, depending on the background color of your application as set in the Theme.

NameTypeDefaultDescription
columns*ColumnProps<RowData>[]The column headers that will structure the Table.
classNamestringAdditional CSS classes.
dataRowData[][] The content of the Table, represented as an array of objects with key value pairs.
hoverHighlightbooleanfalse Should the data rows highlight when the mouse hovers over them.
loadingbooleanfalse Indicates if the data to populate the Table is still loading.
loadingMessagestringA message to be displayed when Table data is loading.
refRef<HTMLTableElement>Ref for the wrapping element.
titleReactNodeThe title that will render above the Table if provided.

You can override the styles of the Table component by setting a custom theme on the Configuration component.

{
        •         'font-size': 's',
        •         'font-weight': 'base.font-weight.semi-bold', // → base.font-weight.semi-bold
        •         'foreground-color': 'base.palette.foreground-color', // → base.palette.foreground-color
        •         'background-color': 'base.palette.secondary-background', // → base.palette.secondary-background
        •         'vertical-spacing': 1,
        •         'horizontal-spacing': 2,
        •         'border-width': '0.0625rem',
        •         'border-color': 'base.palette.border-line' // → base.palette.border-line
        •       },
        •         'foreground-color': 'base.palette.foreground-color', // → base.palette.foreground-color
        •         'background-color': 'base.palette.primary-background', // → base.palette.primary-background
        •         'vertical-spacing': 1,
        •         'horizontal-spacing': 1,
        •         'border-width': '0.0625rem',
        •         'border-color': 'base.palette.border-line' // → base.palette.border-line
        •       },
        •         'horizontal-inner': true,
        •         'horizontal-outer': true,
        •         'vertical-inner': true,
        •         'vertical-outer': true
        •       },
        •         'horizontal-inner': true,
        •         'horizontal-outer': true,
        •         'vertical-inner': true,
        •         'vertical-outer': true
        •       }
      •     }
    •   }
}