Since v2.3.2
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;Since v2.3.2
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;Since v2.3.2
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;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;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;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;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;The minimum height for each <td>.
$rmd-table-cell-height: 3.25rem !default;The minimum height to set for each <td> with the dense spec.
$rmd-table-cell-dense-height: 2rem !default;The text color for <td> cells within a table.
$rmd-table-cell-color: rmd-theme-var(text-primary-on-background) !default;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;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;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;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;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;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;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;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;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;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;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;Creates the styles for one of the table's theme values. This is mostly going to be an internal helper mixin util.
| Name | Description | Type | Default Value |
|---|---|---|---|
$property | The property to set a | String | — |
$theme-style | One of the keys of | 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 | Color|String|Number | null |
Updates one of the table's theme variables with the new value for the section of your app.
| Name | Description | Type | Default Value |
|---|---|---|---|
$theme-style | The table theme style type to update. This should be one of the | String | — |
$value | The new value to use. | Color|String|Number | — |
Creates the base styles for the <table> element.
Creates all the styles for the <th> and <td> elements.
Creates the styles for the <tr> element.
Note: The base class actually has no styles.
Creates all the styles for the table package.
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.
Color|String|Numberone of the table's theme values.
| Name | Description | Type | Default Value |
|---|---|---|---|
$theme-style | One of the | String | — |
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.
Stringone of the table's theme values as a css variable.
| Name | Description | Type | Default Value |
|---|---|---|---|
$theme-style | One of the | String | — |
$fallback | An optional fallback color to apply. This is set to | Color|String|Number | null |