Table Sass API

Variables

table-disable-everything

$table-disable-everything: false !default;

Set to true to disable all the styles.

table-disable-container

$table-disable-container: false !default;

Set to true to disable the TableContainer styles.

Used By

• @mixin table-styles

table-disable-dense

$table-disable-dense: false !default;

Set to true to disable the dense Table styles.

table-disable-full-width

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

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

table-disable-cell-align-top

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

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

Used By

• @mixin table-styles

table-disable-cell-align-bottom

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

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

Used By

• @mixin table-styles

table-disable-bordered

$table-disable-bordered: false !default;

Set to true to disable border styles for the TableRow.

table-disable-bordered-except-last

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

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

Used By

• @mixin table-styles

table-disable-selected

$table-disable-selected: false !default;

Set to true to disable the TableRow selected styles.

See Also

• $table-row-selected-styles

Used By

• @mixin table-styles

table-disable-clickable

$table-disable-clickable: false !default;

Set to true to disable the clickable TableRow styles.

table-disable-hoverable

$table-disable-hoverable: false !default;

Set to true to disable the hoverable TableRow styles.

Used By

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

table-disable-sticky

$table-disable-sticky: false !default;

Set to true to disable all sticky table styles.

table-disable-sticky-cell

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

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

Used By

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

table-disable-sticky-header

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

Set to true to disable the sticky TableHeader styles.

Used By

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

table-disable-sticky-footer

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

Set to true to disable the sticky TableFooter styles.

Used By

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

table-disable-input-toggle

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

Set to true to disable the TableCheckbox and TableRadio styles.

Used By

• @mixin table-styles

table-disable-cell-grow

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

Set to true to disable the TableCell grow styles.

Used By

• @mixin table-styles

table-disable-cell-no-padding

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

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

table-disable-cell-sort

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

Set to true to disable the TableCell sort behavior styles.

Used By

• @mixin table-styles

table-disable-cell-vertical-padding

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

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

Used By

• @mixin table-styles

table-light-theme-background-color

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

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

table-dark-theme-background-color

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

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

table-background-color

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

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

table-light-theme-border-color

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

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

Used By

• @mixin table-use-light-theme

table-dark-theme-border-color

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

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

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;

The default border-color to apply to each TableRow.

table-border-size

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

The default border-width to apply to each TableRow.

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;

The default TableCell typography styles.

Used By

• @mixin table-styles

table-cell-color

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

The default TableCell text color.

Used By

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

table-cell-height

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

The default TableCell height.

Used By

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

table-cell-dense-height

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

The default dense TableCell height.

Used By

• @mixin table-styles

table-cell-header-color

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

The default header (th) TableCell text color.

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;

The default header (th) TableCell typography styles.

Used By

• @mixin table-styles

table-cell-header-height

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

The default header (th) TableCell height.

Used By

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

table-cell-header-dense-height

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

The default header (th) dense TableCell height.

Used By

• @mixin table-styles

table-cell-horizontal-padding

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

The default TableCell horizontal padding.

Used By

• @mixin table-variables

table-cell-vertical-padding

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

The default TableCell vertical padding.

Used By

• @mixin table-variables

table-cell-input-toggle-horizontal-padding

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

The default TableCheckbox and TableRadio horizontal padding.

Used By

• @mixin table-styles

table-cell-content-gap

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

The default gap between items in a sortable TableCell.

Used By

• @mixin table-styles

table-sticky-cell-position

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

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

Used By

• @mixin table-variables

table-sticky-header-position

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

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

Used By

• @mixin table-variables

table-sticky-header-z-index

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

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

Used By

• @mixin table-styles

table-sticky-header-cell-z-index

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

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

Used By

• @mixin table-styles

table-sticky-cell-z-index

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

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

Used By

• @mixin table-styles

table-sticky-footer-position

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

The default position for a sticky TableFooter.

Used By

• @mixin table-variables

table-sticky-footer-z-index

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

The default z-index for a sticky TableFooter.

Used By

• @mixin table-styles

table-sticky-background-color

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

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.

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;

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

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;

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.

Used By

• @mixin table-styles

table-sticky-footer-inactive-styles

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

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

Used By

• @mixin table-styles

table-sticky-footer-active-styles

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

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.

Used By

• @mixin table-styles

table-row-hover-color

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

The default TableRow hover background-color.

Used By

• @mixin table-variables

table-row-selected-color

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

The default TableRow selected background-color.

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
);

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

table-row-hover-styles

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

The default TableRow hover styles.

Used By

• @mixin table-styles

table-row-selected-styles

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

The default TableRow selected styles.

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 { … }

Applies the light the variables based on feature flags

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 { … }

Applies the dark the variables based on feature flags

Requires

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

table-variables

@mixin variables { … }

Conditionally applies the css variables based on feature flags

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) { … }

Generates all the styles based on feature flags.

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

a var() statement

Requires

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