Conversation
Marc-Andre-Rivet
commented
Sep 19, 2018
- apply table outer styling on the outer cells instead of the containing div -- there can be mismatches between the actual table size and it's container's size
- update default styling for frozen rows/columns to provide a better default xp to the user
- update frozen top/left table styling
| { | ||
| "name": "dash-table", | ||
| "version": "3.0.0rc19", | ||
| "version": "3.0.0rc20", |
There was a problem hiding this comment.
bump version
| ], | ||
| table_style: [ | ||
| { selector: '.dash-spreadsheet.freeze-left', rule: 'width: 1000px' } | ||
| { selector: '.dash-spreadsheet.freeze-left', rule: 'width: 1000px; max-width: 1000px;' } |
There was a problem hiding this comment.
make sure the tests run against a same-styled table after the default styling update
| .inset-shadow(var(--border), 1px, 0px, -1px, -1px); | ||
| } | ||
| } | ||
| } |
There was a problem hiding this comment.
Depending on whether rows and/or columns are frozen, sub-tables may need to provide extra borders on the outer left and top cells.. these mixins just make it easier to reuse below
| &.freeze-top { | ||
| height: 500px; | ||
| height: fit-content; | ||
| max-height: 500px; |
There was a problem hiding this comment.
By default the table will now match its content size up to a given maximum size if frozen
|
|
||
| &.focused + td { | ||
| .inset-shadow(var(--border), 0px, 0px, -1px, -1px); | ||
| } |
There was a problem hiding this comment.
This selector was now useless -- it applied to the standard style as a special case!
| {...props2} | ||
| n_fixed_columns={1} | ||
| n_fixed_rows={1} | ||
| />)); No newline at end of file |
There was a problem hiding this comment.
Two sets of identical tests for all permutations of frozen/not frozen columns and rows, with a table that fills its allocated space and one that does not
CHANGELOG.md
Outdated
|
|
||
| Table styling has been changed for frozen rows and columns. Default styling change from: | ||
|
|
||
| - frozen rows: { width: 500px } to { width: fit-content, max-width: 500px } |
|
Looking at #101, if I run the demo with |
valentijnnieman
left a comment
There was a problem hiding this comment.
Looks good to me!
|
@valentijnnieman: Yes. This is desired behavior. The default style being aplied is { width: fit-content; max-width: 500px } -- we use fit-content to make sure the scrollbar will be located at the end of the table, not at the end of the parent element and we use a default max-width just to make it obvious that there is scrolling for most cases -- this forces the user to override these settings, but without proper styling it will look like fixed rows/columns / scrolling is broken and it seemed a ok compromise. We don't try to fit the viewport to the content size (e.g. 3 columns vs number of pixels) -- as all columns can have some arbitrary size, whatever behavior would end up being weird. |
|
@Marc-Andre-Rivet Ok, great, thanks for explaining! |
cldougl
left a comment
There was a problem hiding this comment.
💃 after checking changelog rows-width/col-height flip