Variables

rmd-table-light-border-color

Color

The border color to use for tables due to a chrome rendering bug when the colSpan is used on a table. This will be applied when using the light theme.

Note: this value is close to the divider default value of rgba($rmd-black-base, 0.12)

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

Used By

rmd-table-dark-border-color

Since v2.3.2

Color

The border color to use for tables due to a chrome rendering bug when the colSpan is used on a table. This will be applied when using the dark theme.

Note: this value is close to the divider default value of rgba($rmd-white-base, 0.12)

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

Used By

rmd-table-border-color

Since v2.3.2

Color

The border color to use for tables due to a chrome rendering bug when the colSpan is used on a table.

Default compiled value

$rmd-table-border-color: if(
  $rmd-theme-light,
  $rmd-table-light-border-color,
  $rmd-table-dark-border-color
) !default;

rmd-table-cell-horizontal-padding

Number

The amount of padding to apply to the left and right of each <td> and <th> in a table.

$rmd-table-cell-horizontal-padding: 1rem !default;

rmd-table-cell-vertical-padding

Number

The amount of padding to apply to the top or bottom for each <th> and <th> in a table when the cell's alignment is set to "top" or "bottom".

$rmd-table-cell-vertical-padding: 0.375rem !default;

rmd-table-cell-sticky-position

Number

The default position to use for a sticky cell that appears within the <tbody> in all tables. This is mostly used if you want to have a custom <th> that describes an entire row and should always be visible.

If you want to update a specific table, you should use the rmd-table-theme-update-var mixin for the sticky-cell value.

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

rmd-table-cell-sticky-z-index

Number

The z-index to apply to all sticky cells within a table. This value doesn't matter too much, but it should just be greater than 1 if you have checkbox cells so that the header will cover the checkboxes.

$rmd-table-cell-sticky-z-index: 2 !default;

Used By

rmd-table-cell-height

Number

The minimum height for each <td>.

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

Used By

rmd-table-cell-dense-height

Number

The minimum height to set for each <td> with the dense spec.

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

Used By

rmd-table-cell-color

Color

The text color for <td> cells within a table.

Default compiled value

$rmd-table-cell-color: rmd-theme-var(text-primary-on-background) !default;

Used By

Requires

rmd-table-cell-horizontal-alignments

List

The supported horizontal alignments for the table cell. You can set this value to null if you do not want to generate any additional alignments other than the default (left), or set to a list of one value if you do not need all the alignments.

$rmd-table-cell-horizontal-alignments: (center right) !default;

Used By

rmd-table-cell-vertical-alignments

List

A map of the supported vertical-align for a table cell align with the amount of padding to apply. Tables are "fun" to style since theres some weird stuff with how height + padding works by default so when the vertical-align is set to top or bottom, you also need to apply some padding OR update the line-height for the cell. I decided to go with a padding approach to make things a bit easier for non-text cells.

Note: You can also set this value to null if you do not want to generate the minimal styles for the non-middle alignments.

$rmd-table-cell-vertical-alignments: (top bottom) !default;

Used By

rmd-table-header-cell-height

Number

The minimum height for each <th> that appears in the <thead>.

Note: No styles will be generated if this is null or the same value as the $rmd-table-cell-height.

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

Used By

rmd-table-header-cell-dense-height

Number

The minimum height for each <th> that appears in the <thead> with the dense spec.

Note: No styles will be generated if this is null or the same value as the $rmd-table-cell-dense-height.

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

Used By

rmd-table-header-cell-color

Number

The color to use for <th> cells within a table.

Note: No styles will be generated if this is null or the same value as the $rmd-table-cell-color.

Default compiled value

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

Used By

Number

The default position for a sticky header cell in all tables. If you want to update the header position for a specific table, you can just use the rmd-table-theme-update-var mixin for the sticky-header variable instead.

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

rmd-table-row-hover-color

Color

The background color to use when hovering over a row within the <tbody> and the hoverable styles have been enabled.

Default compiled value

$rmd-table-row-hover-color: rgba($rmd-black-base, 0.12) !default;

Requires

rmd-table-row-selected-color

Color|String

The background color to use when a row has been selected within the <tbody>.

Default compiled value

$rmd-table-row-selected-color: rmd-states-theme-var(selected-color) !default;

Requires

Number

The default position for a sticky footer cell in all tables. If you want to update the footer position for a specific table, you can just use the rmd-table-theme-update-var mixin for the sticky-footer variable instead.

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

rmd-table-checkbox-padding

Number

The amount of padding to apply to a table checkbox cell. This should normally be smaller than the default left and right padding to reduce the width of this cell.

$rmd-table-checkbox-padding: 0.5rem !default;

Used By

rmd-table-theme-values

Map

A Map of all the "themeable" parts of the table package. Every key in this map will be used to create a css variable to dynamically update the values of the icon as needed.

Default compiled value

$rmd-table-theme-values: (
  border-color: $rmd-table-border-color,
  cell-color: $rmd-table-cell-color,
  cell-h-padding: $rmd-table-cell-horizontal-padding,
  cell-v-padding: $rmd-table-cell-vertical-padding,
  cell-height: $rmd-table-cell-height,
  cell-dense-height: $rmd-table-cell-dense-height,
  hover-color: $rmd-table-row-hover-color,
  selected-color: $rmd-table-row-selected-color,
  sticky-header: $rmd-table-header-sticky-position,
  sticky-cell: $rmd-table-cell-sticky-position,
  sticky-footer: $rmd-table-footer-sticky-position,
) !default;

Used By

Mixins

rmd-table-theme

mixin

Creates the styles for one of the table's theme values. This is mostly going to be an internal helper mixin util.

Parameters
Name	Description	Type	Default Value
`$property`	The property to set a `rmd-table-theme-values` value to.	`String`	—
`$theme-style`	One of the keys of `rmd-table-theme-values` to extract a value from.	`String`	—
`$fallback`	A fallback value to use if the css variable isn't set somehow. This will default to automatically retrieving the default value from the `rmd-table-theme-values` map when `null`.	`Color\|String\|Number`	`null`

Used By

Requires

rmd-table-theme-update-var

mixin

Updates one of the table's theme variables with the new value for the section of your app.

Parameters
Name	Description	Type	Default Value
`$theme-style`	The table theme style type to update. This should be one of the `$rmd-table-theme-values` keys.	`String`	—
`$value`	The new value to use.	`Color\|String\|Number`	—

Used By

Requires

rmd-table

mixin

Creates the base styles for the <table> element.

Used By

Requires

rmd-thead

mixin

Used By

Requires

rmd-table-cell-horizontal-alignments

mixin

Used By

Requires

rmd-table-cell-vertical-alignments

mixin

Used By

Requires

rmd-table-cell

mixin

Creates all the styles for the <th> and <td> elements.

Used By

Requires

rmd-table-row

mixin

Creates the styles for the <tr> element.

Note: The base class actually has no styles.

Used By

Requires

react-md-table

mixin

Creates all the styles for the table package.

Used By

Requires

Functions

rmd-table-theme

function

This function is used to quickly get one of the table's theme values. This is really just for the rmd-table-theme mixin to provide some validation that a correct style key is used, but might be useful in other cases.

Returns — `Color|String|Number`

one of the table's theme values.

Parameters
Name	Description	Type	Default Value
`$theme-style`	One of the `$rmd-table-theme-values` map keys to get a value for.	`String`	—

Requires

rmd-table-theme-var

function

This function is used to get one of the table's theme variables as a CSS Variable to be applied as a style attribute. By default, the CSS Variable will have a fallback of the current $rmd-table-theme-values

This function is used to create a CSS Variable declaration with an optional fallback value if the CSS Variable has not been declared somehow.

Returns — `String`

one of the table's theme values as a css variable.

Parameters
Name	Description	Type	Default Value
`$theme-style`	One of the `$rmd-table-theme-values` map keys to set a value for.	`String`	—
`$fallback`	An optional fallback color to apply. This is set to `null` by default and not used since the link's theme variables should always exist.	`Color\|String\|Number`	`null`

#Variables

#rmd-table-light-border-color

Used By

#rmd-table-dark-border-color

Used By

#rmd-table-border-color

#rmd-table-cell-horizontal-padding

#rmd-table-cell-vertical-padding

#rmd-table-cell-sticky-position

#rmd-table-cell-sticky-z-index

Used By

#rmd-table-cell-height

Used By

#rmd-table-cell-dense-height

Used By

#rmd-table-cell-color

Used By

Requires

#rmd-table-cell-horizontal-alignments

Used By

#rmd-table-cell-vertical-alignments

Used By

#rmd-table-header-cell-height

Used By

#rmd-table-header-cell-dense-height

Used By

#rmd-table-header-cell-color

Used By

#rmd-table-header-sticky-position

#rmd-table-row-hover-color

Requires

#rmd-table-row-selected-color

Requires

#rmd-table-footer-sticky-position

#rmd-table-checkbox-padding

Used By

#rmd-table-theme-values

Used By

#Mixins

#rmd-table-theme

Used By

Requires

#rmd-table-theme-update-var

Used By

Requires

#rmd-table

Used By

Requires

#rmd-thead

Used By

Requires

#rmd-table-cell-horizontal-alignments

Used By

Requires

#rmd-table-cell-vertical-alignments

Used By

Requires

#rmd-table-cell

Used By

Requires

#rmd-table-row

Used By

Requires

#react-md-table

Used By

Requires

#Functions

#rmd-table-theme

Returns — Color|String|Number

Requires

#rmd-table-theme-var

Returns — String

Used By

Requires

Variables

rmd-table-light-border-color

rmd-table-dark-border-color

rmd-table-border-color

rmd-table-cell-horizontal-padding

rmd-table-cell-vertical-padding

rmd-table-cell-sticky-position

rmd-table-cell-sticky-z-index

rmd-table-cell-height

rmd-table-cell-dense-height

rmd-table-cell-color

rmd-table-cell-horizontal-alignments

rmd-table-cell-vertical-alignments

rmd-table-header-cell-height

rmd-table-header-cell-dense-height

rmd-table-header-cell-color

rmd-table-header-sticky-position

rmd-table-row-hover-color

rmd-table-row-selected-color

rmd-table-footer-sticky-position

rmd-table-checkbox-padding

rmd-table-theme-values

Mixins

rmd-table-theme

rmd-table-theme-update-var

rmd-table

rmd-thead

rmd-table-cell-horizontal-alignments

rmd-table-cell-vertical-alignments

rmd-table-cell

rmd-table-row

react-md-table

Functions

rmd-table-theme

Returns — `Color|String|Number`

rmd-table-theme-var

Returns — `String`