Skip to main content
react-md
react-md - Table - SassDoc

Variables

rmd-table-light-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 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;

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;

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.

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

rmd-table-cell-height

Number

The minimum height for each <td>.

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

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;

rmd-table-cell-color

Color

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

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

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;

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;

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;

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;

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.

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

rmd-table-header-sticky-position

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.

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

rmd-table-row-selected-color

Color|String

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

$rmd-table-row-selected-color: rmd-states-theme-var(selected-color) !default;
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;

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.

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

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
NameDescriptionTypeDefault 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|Numbernull

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
NameDescriptionTypeDefault 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

rmd-table

mixin

Creates the base styles for the <table> element.

rmd-thead

mixin

rmd-table-cell-horizontal-alignments

mixin

rmd-table-cell-vertical-alignments

mixin

rmd-table-cell

mixin

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

rmd-table-row

mixin

Creates the styles for the <tr> element.

Note: The base class actually has no styles.

react-md-table

mixin

Creates all the styles for the table package.

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
NameDescriptionTypeDefault Value
$theme-style

One of the $rmd-table-theme-values map keys to get a value for.

String

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
NameDescriptionTypeDefault 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|Numbernull