Go Main page
Go Main page

Web components

Foundations
Components
About
cover

components

TableV2

v.1.0.0 | Saturn

Usage

The name of the object of tokens to style tableV2 is TABLE_V2_STYLES.

You can not change the name of the object of tokens.

Container component has one way to modify the styles:

  • Variant: modify the styles of the table.

The structure of the TABLE_V2_STYLES object is:

Variants

Variants can modify the styles for the table.

The tokens used are:

  • wrapper?: CommonStyleType;
  • scrollableContainer?: CommonStyleType;. To address scrolling issues with the table display, this wrapper is utilized as an alternative solution.
  • leftBoxShadowContainer?: CommonStyleType;. Container used to add a box shadow to the left side of the table when required.
  • rightBoxShadowContainer?: CommonStyleType;. Container used to add a box shadow to the right side of the table when required.
  • container?: CommonStyleType & TypographyTypes;. Table container styles.
  • headBoxShadow?: string;. It is used to add a box shadow to the table head when required.
  • leftBoxShadow?: string;. It is used to add a box shadow to the left side of the table when required.
  • rightBoxShadow?: string;. It is used to add a box shadow to the right side of the table when required.
12345678910
const TABLE_V2_STYLES = {
  [VARIANT]: {
    wrapper?: CommonStyleType;
    scrollableContainer?: CommonStyleType;
    leftBoxShadowContainer?: CommonStyleType;
    rightBoxShadowContainer?: CommonStyleType;
    container?: CommonStyleType & TypographyTypes;
    headBoxShadow?: string;
    leftBoxShadow?: string;
    rightBoxShadow?: string;

Example

tableV2 theme object example:

12345678910
const TABLE_V2_STYLES = {
  [VARIANT]: {
    wrapper: {
      display: 'display',
    },
    scrollableContainer: {
      display: 'display',
    },
    leftBoxShadowContainer: {
      display: 'display',
TableV2Code API
LoaderUsage