All notable changes to this project will be documented in this file. See Conventional Commits for commit guidelines.
Note: Version bump only for package @react-md/table
Note: Version bump only for package @react-md/table
prettier
after upgrading to v2.3.0
(3ce236a)typedoc
(cf54c35)Note: Version bump only for package @react-md/table
Note: Version bump only for package @react-md/table
Note: Version bump only for package @react-md/table
Note: Version bump only for package @react-md/table
Note: Version bump only for package @react-md/table
Note: Version bump only for package @react-md/table
Note: Version bump only for package @react-md/table
Note: Version bump only for package @react-md/table
Note: Version bump only for package @react-md/table
Note: Version bump only for package @react-md/table
Note: Version bump only for package @react-md/table
Note: Version bump only for package @react-md/table
Note: Version bump only for package @react-md/table
Note: Version bump only for package @react-md/table
Note: Version bump only for package @react-md/table
Note: Version bump only for package @react-md/table
Note: Version bump only for package @react-md/table
Note: Version bump only for package @react-md/table
Note: Version bump only for package @react-md/table
Note: Version bump only for package @react-md/table
Note: Version bump only for package @react-md/table
Note: Version bump only for package @react-md/table
sideEffects
field to package.json
(31820b9)sideEffects
formatting
(78a7b6b)No changes.
This release focused on updating the tables to be more customizable, easier to style, and better for accessibility with sticky cells. To create a table within v2, you'll have access to the following components:
TableContainer
Table
TableHeader
TableBody
TableFooter
TableRow
TableCell
Caption
TableCheckbox
React.cloneElement
API so "gotchas"
with custom wrappers should no longer happenDataTable
component was removed and separated into TableContainer
and
Table
components for additional customizationposition: sticky
instead of the
ugly multiple div/table wrapper behavior<tbody>
that can be fixed to the right
or leftdense
spec for tablesaria-sort
and scope
DropdownMenuColumn
, SelectFieldColumn
, EditDialogColumn
,
MenuButtonColumn
components since they are no longer requiredTablePagination
and TableCardHeader
components since they are
not supported anymore. this might be added in for a later releaseTableColumn
has been reworked and renamed to TableCell
TableCell
no longer supports tooltips by default but can be quickly
added back with the Tooltipped
component from @react-md/tooltip$rmd-table-cell-vertical-padding: 0.375rem !default
- the amount of padding
to apply to the top or bottom of each cell when the vertical alignment is set
to "top"
or "bottom"
$rmd-table-cell-sticky-position: 0 !default
- The default position for a
sticky cell that appears within the <tbody>
(this will be used as the left
value)$rmd-table-footer-sticky-position: 0 !default
- The default position for a
sticky cell that appears within the <tfoot>
(this will be used as the
bottom
value)$rmd-table-cell-sticky-z-index: 2 !default
- The z-index to use for all
sticky cells within a table$rmd-table-cell-dense-height: 2rem !default
- The height to use for each
cell when the dense spec is enabled$rmd-table-cell-color: rmd-theme-var(text-primary-on-background) !default
-
The text color to use for cells within the <tbody>
$rmd-table-checkbox-padding: 0.5rem !default
- The amount of padding to
apply to a TableCheckbox
@function rmd-table-theme
- gets one of the theme values and validates that
the theme name is valid@function rmd-table-theme-var
- gets one of the theme values as a css
variable with a fallback value and validates that the theme name is valid@mixin rmd-table-theme
- applies one of the theme values to a css property
as a css variable@mixin rmd-table-theme-update-var
- updates one of the theme values as a css
variable$md-data-table-padding
to $rmd-table-cell-horizontal-padding
and
changed the default value from 24px
to 1rem
$md-data-table-header-height
to $rmd-table-header-cell-height
and
changed the default value from 56px
to 3.5rem
$md-data-table-column-height
to $rmd-table-cell-height
and changed
the default value from 48px
to 3.25rem
$md-data-table-light-theme-hover-color
and
$md-data-table-dark-theme-hover-color
into a single
$rmd-table-row-hover-color
and changed the default value to
rgba($rmd-black-base, 0.12)
$md-data-table-light-theme-selected-color
and
$md-data-table-dark-theme-selected-color
into a single
$rmd-table-row-selected-color
that now defaults to
rmd-states-theme-var(selected-color)
$md-data-table-include-plain
and
$md-data-table-plain-column-height
since there is no concept of a "data
table" versus a "plain table"$md-data-table-include-checkboxes
since it is no longer supported
out of the box$md-data-table-include-edit-dialog
, $md-edit-dialog-min-width
,
$md-edit-dialog-width
, $md-edit-dialog-label-width
,
$md-edit-dialog-label-padding
, $md-edit-dialog-padding
,
$md-edit-dialog-padding-bottom
, and
$md-data-table-edit-dialog-mobile-right
since edit dialogs are no longer
supported out of the box (can be re-implemented with the FixedDialog
and
TextField
components)$md-data-table-include-select-fields
since this hacky workaround is
no longer needed in v2$md-data-table-include-fixed-headers-footers
since it will always be
included for now$md-data-table-include-pagination
,
$md-data-table-pagination-mobile-shrinking
, and
$md-data-table-pagination-mobile-label-hidden
since it is no longer
supported$md-data-table-include-table-card-headers
.
$md-data-table-card-header-z-index
, $md-data-table-card-header-font-size
,
$md-data-table-card-header-height
, and
$md-data-table-contextual-fallback-color
since they are no longer supported$md-data-table-selected-over-hover
since it's no longer needed$md-data-table-fixed-include-headers
,
$md-data-table-fixed-include-footers
, and
$md-data-table-fixed-use-view-height
since the
@mixin react-md-make-fixed-table
no longer exists and isn't required for
fixed tables$md-data-table-min-padding
since I don't remember what it was really
supposed to accomplish and doesn't exist in v2$md-data-table-content-font-size
and
$md-data-table-header-font-size
since they are no longer configurable with
SCSS variables$md-data-table-border-size
since it is now configurable with the
@react-md/divider package$md-data-table-fixed-wrapper-min-width
since there is no longer a
table wrapper%md-table-column--plain
placeholder since it's no longer used@mixin react-md-theme-data-tables
since it is now handled with the
new theming API@mixin react-md-make-fixed-table
since it's no longer required with
the new sticky cells API/styles