Table Sass API

Variables

table-disable-everything

$table-disable-everything: false !default;

table-disable-container

$table-disable-container: false !default;

Used By

• @mixin table-styles

table-disable-dense

$table-disable-dense: false !default;

table-disable-full-width

$table-disable-full-width: false !default;

table-disable-cell-align-top

$table-disable-cell-align-top: false !default;

Used By

• @mixin table-styles

table-disable-cell-align-bottom

$table-disable-cell-align-bottom: false !default;

Used By

• @mixin table-styles

table-disable-bordered

$table-disable-bordered: false !default;

table-disable-bordered-except-last

$table-disable-bordered-except-last: false !default;

Used By

• @mixin table-styles

table-disable-selected

$table-disable-selected: false !default;

See Also

• $table-row-selected-styles

Used By

• @mixin table-styles

table-disable-clickable

$table-disable-clickable: false !default;

table-disable-hoverable

$table-disable-hoverable: false !default;

Used By

• @mixin table-variables
• @mixin table-styles

table-disable-sticky

$table-disable-sticky: false !default;

table-disable-sticky-cell

$table-disable-sticky-cell: $disable-sticky !default;

Used By

• @mixin table-variables
• @mixin table-styles

table-disable-sticky-header

$table-disable-sticky-header: $disable-sticky !default;

Used By

• @mixin table-variables
• @mixin table-styles

table-disable-sticky-footer

$table-disable-sticky-footer: $disable-sticky !default;

Used By

• @mixin table-variables
• @mixin table-styles

table-disable-input-toggle

$table-disable-input-toggle: false !default;

Used By

• @mixin table-styles

table-disable-cell-grow

$table-disable-cell-grow: false !default;

Used By

• @mixin table-styles

table-disable-cell-no-padding

$table-disable-cell-no-padding: false !default;

table-disable-cell-sort

$table-disable-cell-sort: false !default;

Used By

• @mixin table-styles

table-disable-cell-vertical-padding

$table-disable-cell-vertical-padding: false !default;

Used By

• @mixin table-styles

table-light-theme-background-color

$table-light-theme-background-color: null !default;

table-dark-theme-background-color

$table-dark-theme-background-color: null !default;

table-background-color

$table-background-color: theme.get-default-color(
  $light-theme-background-color,
  $dark-theme-background-color
) !default;

table-light-theme-border-color

$table-light-theme-border-color: #e0e0e0 !default;

Used By

• @mixin table-use-light-theme

table-dark-theme-border-color

$table-dark-theme-border-color: #2f2f2f !default;

Used By

• @mixin table-use-dark-theme

table-border-color

$table-border-color: theme.get-default-color(
  $light-theme-border-color,
  $dark-theme-border-color
) !default;

table-border-size

$table-border-size: divider.$size !default;

table-light-theme-header-background-color

$table-light-theme-header-background-color: null !default;

Used By

• @mixin table-use-light-theme

table-dark-theme-header-background-color

$table-dark-theme-header-background-color: null !default;

Used By

• @mixin table-use-dark-theme

table-header-background-color

$table-header-background-color: theme.get-default-color(
  $light-theme-header-background-color,
  $dark-theme-header-background-color
) !default;

Used By

• @mixin table-variables

table-cell-typography

$table-cell-typography: typography.$body-2-styles !default;

Used By

• @mixin table-styles

table-cell-color

$table-cell-color: theme.theme-get-var(text-primary-color) !default;

Used By

• @mixin table-variables
• @mixin table-styles

table-cell-height

$table-cell-height: 3.25rem !default;

Used By

• @mixin table-variables
• @mixin table-styles

table-cell-dense-height

$table-cell-dense-height: 2rem !default;

Used By

• @mixin table-styles

table-cell-header-color

$table-cell-header-color: $cell-color !default;

Used By

• @mixin table-styles

table-cell-header-typography

$table-cell-header-typography: (
  font-weight: map.get(typography.$subtitle-2-styles, font-weight),
  letter-spacing: map.get(typography.$subtitle-2-styles, letter-spacing),
  line-height: map.get(typography.$subtitle-2-styles, line-height),
) !default;

Used By

• @mixin table-styles

table-cell-header-height

$table-cell-header-height: 3.5rem !default;

Used By

• @mixin table-variables
• @mixin table-styles

table-cell-header-dense-height

$table-cell-header-dense-height: 2.125rem !default;

Used By

• @mixin table-styles

table-cell-horizontal-padding

$table-cell-horizontal-padding: spacing.get-var(md) !default;

Used By

• @mixin table-variables

table-cell-vertical-padding

$table-cell-vertical-padding: calc(spacing.get-var(xs) * 1.5) !default;

Used By

• @mixin table-variables

table-cell-input-toggle-horizontal-padding

$table-cell-input-toggle-horizontal-padding: spacing.get-var(sm) !default;

Used By

• @mixin table-styles

table-cell-content-gap

$table-cell-content-gap: spacing.get-var(sm) !default;

Used By

• @mixin table-styles

table-sticky-cell-position

$table-sticky-cell-position: 0 !default;

Used By

• @mixin table-variables

table-sticky-header-position

$table-sticky-header-position: 0 !default;

Used By

• @mixin table-variables

table-sticky-header-z-index

$table-sticky-header-z-index: 2 !default;

Used By

• @mixin table-styles

table-sticky-header-cell-z-index

$table-sticky-header-cell-z-index: $sticky-header-z-index + 1 !default;

Used By

• @mixin table-styles

table-sticky-cell-z-index

$table-sticky-cell-z-index: $sticky-header-z-index - 1 !default;

Used By

• @mixin table-styles

table-sticky-footer-position

$table-sticky-footer-position: 0 !default;

Used By

• @mixin table-variables

table-sticky-footer-z-index

$table-sticky-footer-z-index: $sticky-header-z-index - 1 !default;

Used By

• @mixin table-styles

table-sticky-background-color

$table-sticky-background-color: theme.theme-get-var(background-color) !default;

Used By

• @mixin table-variables

table-sticky-header-inactive-styles

$table-sticky-header-inactive-styles: (
  transition: background transition.$linear-duration
    transition.$linear-timing-function,
  "&::after": (
    box-shadow: box-shadows.box-shadow(4),
    content: "",
    inset: 0,
    pointer-events: none,
    opacity: 0,
    position: absolute,
    transition: opacity transition.$linear-duration
      transition.$linear-timing-function,
    z-index: 0,
  ),
) !default;

Used By

• @mixin table-styles

table-sticky-header-active-styles

$table-sticky-header-active-styles: (
  "--rmd-background-color": theme.get-dark-elevation-color(4),
  background-color: theme.theme-get-var(background-color),
  "&::after": (
    opacity: 1,
  ),
) !default;

Used By

• @mixin table-styles

table-sticky-footer-inactive-styles

$table-sticky-footer-inactive-styles: $sticky-header-inactive-styles !default;

Used By

• @mixin table-styles

table-sticky-footer-active-styles

$table-sticky-footer-active-styles: $sticky-header-active-styles !default;

Used By

• @mixin table-styles

table-row-hover-color

$table-row-hover-color: interaction.get-var(hover-background-color) !default;

Used By

• @mixin table-variables

table-row-selected-color

$table-row-selected-color: interaction.get-var(selected-background-color) !default;

Used By

• @mixin table-variables

table-variables

$table-variables: (
  background-color,
  border-size,
  border-color,
  header-background-color,
  cell-color,
  cell-height,
  cell-horizontal-padding,
  cell-vertical-padding,
  header-cell-height,
  hover-color,
  selected-color,
  sticky-cell,
  sticky-header,
  sticky-footer,
  sticky-background-color
);

table-row-hover-styles

$table-row-hover-styles: (
  background-color: get-var(hover-color),
) !default;

Used By

• @mixin table-styles

table-row-selected-styles

$table-row-selected-styles: (
  background-color: get-var(selected-color),
) !default;

Used By

• @mixin table-styles

Mixins

table-set-var

@mixin set-var($name, $value) { … }

Requires

• @function get-var-name
• @mixin app-bar-variables

table-use-var

@mixin use-var($property, $name: $property, $fallback: null) { … }

Requires

• @function app-bar-get-var

table-use-light-theme

@mixin use-light-theme { … }

Requires

• @mixin app-bar-set-var
• $app-bar-disable-everything
• $table-light-theme-border-color
• $card-light-theme-background-color
• $table-light-theme-header-background-color

table-use-dark-theme

@mixin use-dark-theme { … }

Requires

• @mixin app-bar-set-var
• $app-bar-disable-everything
• $table-dark-theme-border-color
• $card-dark-theme-background-color
• $table-dark-theme-header-background-color

table-variables

@mixin variables { … }

Requires

• @mixin app-bar-set-var
• $app-bar-disable-everything
• $avatar-background-color
• $table-header-background-color
• $table-cell-color
• $table-cell-height
• $table-cell-horizontal-padding
• $table-cell-vertical-padding
• $table-cell-header-height
• $table-row-selected-color
• $card-disable-bordered
• $divider-border-size
• $avatar-border-color
• $table-disable-hoverable
• $table-row-hover-color
• $table-disable-sticky-cell
• $table-sticky-cell-position
• $table-disable-sticky-header
• $table-sticky-header-position
• $table-disable-sticky-footer
• $table-sticky-footer-position
• $table-sticky-background-color

table-styles

@mixin styles($disable-layer: false) { … }

Requires

• @mixin app-bar-use-var
• @mixin app-bar-set-var
• @function app-bar-get-var
• $app-bar-disable-everything
• $table-disable-container
• $responsive-item-disable-full-width
• $table-cell-height
• $table-cell-header-height
• $app-bar-disable-dense
• $table-cell-dense-height
• $table-cell-header-dense-height
• $table-disable-sticky-header
• $table-sticky-header-z-index
• $table-sticky-header-inactive-styles
• $table-sticky-header-active-styles
• $table-disable-sticky-footer
• $table-sticky-footer-z-index
• $table-sticky-footer-inactive-styles
• $table-sticky-footer-active-styles
• $card-disable-clickable
• $table-disable-selected
• $table-row-selected-styles
• $card-disable-bordered
• $table-disable-bordered-except-last
• $table-disable-hoverable
• $linear-duration
• $linear-timing-function
• $table-row-hover-styles
• $table-cell-typography
• $table-cell-header-typography
• $table-cell-color
• $table-cell-header-color
• $table-disable-cell-align-top
• $table-disable-cell-align-bottom
• $table-disable-sticky-cell
• $table-sticky-cell-z-index
• $table-disable-input-toggle
• $table-sticky-header-cell-z-index
• $table-cell-input-toggle-horizontal-padding
• $table-disable-cell-grow
• $table-disable-cell-vertical-padding
• $table-disable-cell-sort
• $table-cell-content-gap

Functions

table-get-var

@function get-var($name, $fallback: null) { … }

Returns — String

Requires

• @function get-var-name
• @mixin app-bar-variables

Set to true to disable all the styles.

Set to true to disable the TableContainer styles.

Set to true to disable the dense Table styles.

Set to true to disable the fullWidth behavior for the Table component.

Set to true to disable the align="top" styles for the TableCell.

Set to true to disable the align="bottom" styles for the TableCell.

Set to true to disable border styles for the TableRow.

Set to true to allow the last TableRow to also gain the border styles.

Set to true to disable the TableRow selected styles.

Set to true to disable the clickable TableRow styles.

Set to true to disable the hoverable TableRow styles.

Set to true to disable all sticky table styles.

Set to true to disable all the sticky cell styles within the TableBody.

Set to true to disable the sticky TableHeader styles.

Set to true to disable the sticky TableFooter styles.

Set to true to disable the TableCheckbox and TableRadio styles.

Set to true to disable the TableCell grow styles.

Set to true to disable the padding="none" TableCell styles.

Set to true to disable the TableCell sort behavior styles.

Set to true to disable the padding="vertical" TableCell styles.

An optional light theme background color to apply to the Table. This defaults to null so it just inherits the background color.

An optional dark theme background color to apply to the Table. This defaults to null so it just inherits the background color.

The default background-color to apply to the Table component.

The light theme border-color to apply to each TableRow.

The dark theme border-color to apply to each TableRow.

The default border-color to apply to each TableRow.

The default border-width to apply to each TableRow.

The default TableCell typography styles.

The default TableCell text color.

The default TableCell height.

The default dense TableCell height.

The default header (th) TableCell text color.

The default header (th) TableCell typography styles.

The default header (th) TableCell height.

The default header (th) dense TableCell height.

The default TableCell horizontal padding.

The default TableCell vertical padding.

The default TableCheckbox and TableRadio horizontal padding.

The default gap between items in a sortable TableCell.

This is the default position of a row based sticky TableCell.

This is the default position of a column based sticky TableCell.

The default z-index for a sticky header (th) TableCell.

The default z-index for a TableCheckbox or TableRadio that is acting as a sticky table header for a column.

The default z-index for a sticky row-based TableCell.

The default position for a sticky TableFooter.

The default z-index for a sticky TableFooter.

The background color to apply to a sticky table cell. This is required so that the other cells will not be visible below the cell.

A map of styles to apply when using the StickyTableSection component with type="header".

A map of styles to apply when using the StickyTableSection component with type="header". These are the styles that are applied once the IntersectionObserver considers the StickyTableSection to be covering other content within the table due to scrolling.

A map of styles to apply when using the StickyTableSection component with type="footer".

A map of styles to apply when using the StickyTableSection component with type="footer". These are the styles that are applied once the IntersectionObserver considers the StickyTableSection to be covering other content within the table due to scrolling.

The default TableRow hover background-color.

The default TableRow selected background-color.

The available configurable css variables and mostly used internally for the get-var, set-var, and use-var utils.

The default TableRow hover styles.

The default TableRow selected styles.

The supported variable name

The value to set the variable to. Supports null which will just be a no-op.

The css property to apply the variable to

The supported variable name

An optional fallback value if the variable has not been set

Applies the light the variables based on feature flags

Applies the dark the variables based on feature flags

Conditionally applies the css variables based on feature flags

Generates all the styles based on feature flags.

Set this to true to disable the layer behavior

a var() statement

The supported variable name

An optional fallback value