Data Tables

Placeholders

md-table-column--plain
%md-table-column--plain {}
Sass (Scss)
Click to expand

Description

A selector for creating a plain styled column. This is used to update all the md-table-column--data in a .md-data-table--plain and to create a md-table-column--plain class. The white-space will still need to manually be changed from nowrap to initial if you want line wrapping.

Variables

md-data-table-include-plain
$md-data-table-include-plain: true !default;
Sass (Scss)

Description

Boolean if the plain table styles should be included.

Type

Boolean
md-data-table-include-checkboxes
$md-data-table-include-checkboxes: true !default;
Sass (Scss)

Description

Boolean if the checkbox styles should be included.

Type

Boolean
md-data-table-include-edit-dialog
$md-data-table-include-edit-dialog: true !default;
Sass (Scss)

Description

Boolean if the edit dialog styles should be included.

Type

Boolean
md-data-table-include-select-fields
$md-data-table-include-select-fields: true !default;
Sass (Scss)

Description

Boolean if the styles for select fields in data tables should be included.

Type

Boolean
md-data-table-include-fixed-headers-footers
$md-data-table-include-fixed-headers-footers: true !default;
Sass (Scss)

Description

Boolean if the styles for fixed table headers/footers should be included.

Type

Boolean
md-data-table-include-pagination
$md-data-table-include-pagination: true !default;
Sass (Scss)

Description

Boolean if the table pagination styles should be included.

Type

Boolean
md-data-table-selected-over-hover
$md-data-table-selected-over-hover: false !default;
Sass (Scss)

Description

Boolean if the selected state of the data tables should have higher precedence over the hover state. The default behavior is to allow the hover state to show up even if the row is selected. If this value is enabled, the hover effect will not show up at all when a row is selected.

Type

Boolean
md-data-table-fixed-include-headers
$md-data-table-fixed-include-headers: true !default;
Sass (Scss)

Description

Boolean if the react-md-make-fixed-table mixin should include headers by default in the created styles.

Used by

See

md-data-table-fixed-include-footers
$md-data-table-fixed-include-footers: true !default;
Sass (Scss)

Description

Boolean if the react-md-make-fixed-table mixin should include footers by default in the created styles.

Used by

See

md-data-table-fixed-use-view-height
$md-data-table-fixed-use-view-height: false !default;
Sass (Scss)

Description

Boolean if the react-md-make-fixed-table mixin should make the table fixed relative to the view height instead of just using height.

Type

Boolean
md-data-table-pagination-mobile-shrinking
$md-data-table-pagination-mobile-shrinking: true !default;
Sass (Scss)

Description

Boolean if the TablePagination's styles should be updated for mobiles devices so that the select field shrinks its font size to 13px;

This should normally be used along with the md-data-table-pagination-mobile-label-hidden variable if you want to support mobile devices.

Type

Boolean

See

md-data-table-pagination-mobile-label-hidden
$md-data-table-pagination-mobile-label-hidden: true !default;
Sass (Scss)

Description

This will hide the TablePaginations label on mobile devices.

Type

Boolean
md-data-table-include-table-card-headers
$md-data-table-include-table-card-headers: true !default;
Sass (Scss)

Description

Boolean if the table card header styles should be included.

Type

Boolean

Used by

md-edit-dialog-min-width
$md-edit-dialog-min-width: 300px !default;
Sass (Scss)

Description

The min width for an edit dialog's column.

Type

Number
md-edit-dialog-width
$md-edit-dialog-width: 250px !default;
Sass (Scss)

Description

The width for the edit dialog.

Type

Number

Used by

md-edit-dialog-label-width
$md-edit-dialog-label-width: 250px !default;
Sass (Scss)

Description

The width for the label for the edit dialog column. When this width is reached, the text will be ellipsed.

Type

Number

Used by

md-edit-dialog-label-padding
$md-edit-dialog-label-padding: 16px 0 !default;
Sass (Scss)

Description

The amount of padding to apply to the AccessibleFakeButton that gets used in the edit dialog column to trigger the dialog to appear.

Type

Number

Used by

md-edit-dialog-padding
$md-edit-dialog-padding: $md-dialog-padding !default;
Sass (Scss)

Description

The amount of padding to provide to the edit dialog.

Type

Number

Used by

md-edit-dialog-padding-bottom
$md-edit-dialog-padding-bottom: 8px !default;
Sass (Scss)

Description

The amount of padding-bottom to provide to the edit dialog. If you set this value to null, only the $md-edit-dialog-padding variable will be used.

Type

Number

Used by

md-data-table-edit-dialog-mobile-right
$md-data-table-edit-dialog-mobile-right: $md-grid-phone-margin !default;
Sass (Scss)

Description

For some reason, the edit dialogs on mobile devices don't position themselves like tablets and desktop screens so this value is required for positioning the dialog from the right edge of the screen.

Type

Number
md-data-table-padding
$md-data-table-padding: 24px !default;
Sass (Scss)

Description

The default left/right padding for a TableColumn.

Type

Number

Used by

md-data-table-min-padding
$md-data-table-min-padding: 56px !default;
Sass (Scss)

Description

The minimum distance between a cell's content and the next cell.

Type

Number

Used by

md-data-table-content-font-size
$md-data-table-content-font-size: 13px !default;
Sass (Scss)

Description

The font size for content inside of the TableBody component.

Type

Number

Used by

md-data-table-header-font-size
$md-data-table-header-font-size: 12px !default;
Sass (Scss)

Description

The font size for the content inside of the TableHeader component.

Type

Number

Used by

md-data-table-header-height
$md-data-table-header-height: 56px !default;
Sass (Scss)

Description

The height for the TableHeader's row.

Type

Number

Used by

md-data-table-header-icon-font-size
$md-data-table-header-icon-font-size: 16px !default;
Sass (Scss)

Description

The font size for a font-icon in the md-table-column--header.

Type

Number

Used by

md-data-table-column-height
$md-data-table-column-height: 48px !default;
Sass (Scss)

Description

The height for a column in a data table.

Type

Number

Used by

md-data-table-plain-column-height
$md-data-table-plain-column-height: $md-data-table-column-height !default;
Sass (Scss)

Description

The height for a plain data table's column.

Type

Number

Used by

md-data-table-border-size
$md-data-table-border-size: 1px !default;
Sass (Scss)

Description

The border size to use for each row.

Type

Number

Used by

md-data-table-hover-color
$md-data-table-hover-color: $md-grey-200 !default;
Sass (Scss)

Description

The hover color for a row when using the light theme.

Type

Color

Used by

md-data-table-selected-color
$md-data-table-selected-color: $md-grey-100 !default;
Sass (Scss)

Description

The selected color for a row when using the light theme.

Type

Color

Used by

md-data-table-dark-theme-hover-color
$md-data-table-dark-theme-hover-color: $md-grey-800 !default;
Sass (Scss)

Description

The hover color for a row when using the dark theme. This is configurable since the dark theme data table specs are not defined in the material design documentation at this point.

Type

Color

Used by

md-data-table-dark-theme-selected-color
$md-data-table-dark-theme-selected-color: $md-grey-700 !default;
Sass (Scss)

Description

The selected color for a row when using the dark theme. This is configurable since the dark theme data table specs are not defined in the material design documentation at this point.

Type

Color

Used by

md-data-table-card-header-z-index
$md-data-table-card-header-z-index: 1 !default;
Sass (Scss)

Description

The z-index to use for the contextual table card header.

Type

Number

Used by

md-data-table-card-header-font-size
$md-data-table-card-header-font-size: 16px !default;
Sass (Scss)

Description

The font size to use for the contextual table card header.

Type

Number

Used by

md-data-table-card-header-height
$md-data-table-card-header-height: 80px !default;
Sass (Scss)

Description

The height for the table card header.

Type

Number

Used by

md-data-table-fixed-wrapper-min-width
$md-data-table-fixed-wrapper-min-width: 100% !default;
Sass (Scss)

Description

The min-width to apply to the fixed tables wrapper.

Type

Number

Used by

md-data-table-contextual-fallback-color
$md-data-table-contextual-fallback-color: null !default;
Sass (Scss)

Description

A fallback color to use for the contextual table card header. This is only required when the $md-primary-color is not a valid material design color.

Type

Color

See

Mixins

react-md-cards-tables
@mixin react-md-cards-tables {}
Sass (Scss)
Click to expand

Description

Creates the styles for tables in cards. This should normally be included with the react-md-cards mixin.

Parameters

None

Used by

react-md-data-tables
@mixin react-md-data-tables($secondary-color: $md-secondary-color, $light-theme: $md-light-theme, $include-media: $md-media-included, $include-plain: $md-data-table-include-plain, $include-checkboxes: $md-data-table-include-checkboxes, $include-edit-dialog: $md-data-table-include-edit-dialog, $include-pagination: $md-data-table-include-pagination, $include-table-card-headers: $md-data-table-include-table-card-headers) {}
Sass (Scss)
Click to expand

Description

Includes the styles for the data tables.

Parameters

NameDescriptionTypeDefault value
$secondary-color

The secondary color to use to theme the table card headers with.

Color
$md-secondary-color
$light-theme

Boolean if the tables should be styled for the light theme.

Boolean
$md-light-theme
$include-media

Boolean if the media queries should also be included.

Boolean
$md-media-included
$include-plain

Boolean if the plain data table styles should be included.

Boolean
$md-data-table-include-plain
$include-checkboxes

Boolean if the checkbox styles should be included.

Boolean
$md-data-table-include-checkboxes
$include-edit-dialog

Boolean if the edit dialog styles should be included.

Boolean
$md-data-table-include-edit-dialog
$include-pagination

Boolean if the pagination styles should be included.

Boolean
$md-data-table-include-pagination
$include-table-card-headers

Boolean if the table card header styles should be included.

Boolean
$md-data-table-include-table-card-headers

Examples

Example Usage SCSS

@include react-md-data-tables;
Sass (Scss)

Requires

Used by

react-md-data-table
@mixin react-md-data-table {}
Sass (Scss)
Click to expand

Description

Creates the styles for the data table. It will also create the styles for plain data tables if the param is true.

Parameters

None

Requires

Used by

react-md-data-table-rows
@mixin react-md-data-table-rows($light-theme: $md-light-theme, $selected-over-hover: $md-data-table-selected-over-hover) {}
Sass (Scss)
Click to expand

Description

Creates the styles for a row in the data table.

Parameters

NameDescriptionTypeDefault value
$light-theme

Boolean if styling for the light theme.

Boolean
$md-light-theme
$selected-over-hover

Boolean if the selected state of rows should have a higher precedence than the hover state.

Boolean
$md-data-table-selected-over-hover

Requires

Used by

react-md-data-table-column
@mixin react-md-data-table-column($include-plain: $md-data-table-include-plain) {}
Sass (Scss)
Click to expand

Description

Creates the styles for a column in a data table.

Parameters

NameDescriptionTypeDefault value
$include-plain

boolean if the plain columns should be included

Boolean
$md-data-table-include-plain

Requires

Used by

react-md-data-table-checkboxes
@mixin react-md-data-table-checkboxes {}
Sass (Scss)
Click to expand

Description

Creates the styles for a table checkbox column in a data table.

Parameters

None

Requires

Used by

react-md-data-table-edit-dialogs
@mixin react-md-data-table-edit-dialogs {}
Sass (Scss)
Click to expand

Description

Creates the styles for edit dialogs in a data table.

Parameters

None

Requires

Used by

react-md-data-table-select-fields
@mixin react-md-data-table-select-fields {}
Sass (Scss)
Click to expand

Description

Creates the styles for select fields in data tables.

Parameters

None

Requires

Used by

react-md-data-table-paginations
@mixin react-md-data-table-paginations {}
Sass (Scss)
Click to expand

Description

Creates the styles for table pagination.

Parameters

None

Requires

Used by

react-md-data-table-fixed-headers-footers
@mixin react-md-data-table-fixed-headers-footers {}
Sass (Scss)
Click to expand

Description

Creates the styles for fixed headers and footers in a data table.

Parameters

None

Requires

Used by

react-md-make-fixed-table
@mixin react-md-make-fixed-table($height, $header-height: $md-data-table-header-height, $footer-height: $md-data-table-column-height, $toolbar-height: null) {}
Sass (Scss)
Click to expand

Description

This is a utility function for making a fixed table via CSS instead of inline styles. This one is a bit more reliable since you can provide the cell heights correctly.

Parameters

NameDescriptionTypeDefault value
$height

The height to use for the fixed table. If this value is a boolean, the height will be calculated from the view height.

Number | Boolean
$header-height

The height for the table's header. If this is null, this table should not have a fixed header.

Number
$md-data-table-header-height
$footer-height

The height for the table's footer. If this is null, the table should not have a fixed footer.

Number
$md-data-table-column-height
$toolbar-height

An optional height of the toolbar to exclude when making the max-height of the table.

Number
null

Examples

Example Usage

.fixed-table--200-300 {
  @include react-md-make-fixed-table(300px);

  width: 200px;
}

.fixed-table__footless--200-300 {
  @include react-md-make-fixed-table(300px, $md-data-table-header-height, null);
}

.fixed-table--viewport {
  @include react-md-make-fixed-table(true);
}
Sass (Scss)

Example Usage CSS Output

.fixed-table--200-300 {
  width: 200px;
}

.fixed-table--200-300 .md-data-table__scroll-wrapper {
  max-height: 196px;
}

.fixed-table__footless--200-300 .md-data-table__scroll-wrapper {
  max-height: 244px;
}

.fixed-table--viewport .md-data-table__scroll-wrapper {
  max-height: calc(100vh - 104px);
}
Sass (Scss)

Requires

react-md-data-table-card-headers
@mixin react-md-data-table-card-headers($secondary-color: $md-secondary-color) {}
Sass (Scss)
Click to expand

Description

Creates the styles for the TableCardHeader component only. The contextual header will have a background color of the secondary color's 50 swatch.

Parameters

NameDescriptionTypeDefault value
$secondary-color

The secondary color to theme the contextual header's background color with.

Color
$md-secondary-color

Requires

Used by

react-md-data-table-paginations-shrink
@mixin react-md-data-table-paginations-shrink($shrink: $md-data-table-pagination-mobile-shrinking, $hide-label: $md-data-table-pagination-mobile-label-hidden) {}
Sass (Scss)
Click to expand

Description

A mixin that can shrink the select field in the TablePagination component as well as hide the label so it displays better on mobile devices. This mixin should usually be used in a media query that uses the max-width.

Parameters

NameDescriptionTypeDefault value
$shrink

Boolean if the select field should shrink by reducing the font size to 13px and reducing the padding by 75%.

Boolean
$md-data-table-pagination-mobile-shrinking
$hide-label

Boolean if the pagination label (Rows per page) should be hidden.

Boolean
$md-data-table-pagination-mobile-label-hidden

Examples

Example Usage SCSS

@media (max-width: #{$md-tablet-min-width - 1}) {
  @include react-md-data-table-paginations-shrink(true, true);
}
Sass (Scss)

Requires

Used by

react-md-theme-data-tables
@mixin react-md-theme-data-tables($secondary-color: $md-secondary-color, $light-theme: $md-light-theme, $include-table-card-headers: $md-data-table-include-table-card-headers, $contextual-fallback-color: $md-data-table-contextual-fallback-color, $selected-over-hover: $md-data-table-selected-over-hover) {}
Sass (Scss)
Click to expand

Description

Updates the styles for data tables only if the $light-theme does not equal the $md-light-theme. The only styles really updated are the border colors and the hover/selected row background colors.

Parameters

NameDescriptionTypeDefault value
$secondary-color

The secondary color to theme with.

Color
$md-secondary-color
$light-theme

Boolean if updating the styles for the light theme.

Boolean
$md-light-theme
$include-table-card-headers

Boolean if the contextual table card header styles should be included.

Boolean
$md-data-table-include-table-card-headers
$contextual-fallback-color

A fallback color to use for the contextual headers.

Color
$md-data-table-contextual-fallback-color
$selected-over-hover

Boolean if the selected state of rows should have a higher precedence than the hover state.

Boolean
$md-data-table-selected-over-hover

Requires

Used by