Issue 118 width behavior#129
Conversation
Marc-Andre-Rivet
commented
Oct 3, 2018
Marc-Andre-Rivet
commented
- allow usage of width % for standard and fixed columns/rows contexts
- make sure fixed rows and aligned with the rest of the table
- visual tests for behavior above
…avior # Conflicts: # dash_table/bundle.js # dash_table/demo.js
|
|
||
| For the percentages to have meaning, the dash-table must be forced to have a width and the content of the dash-table must be forced to grow to fill the available space made available by the container (by default the table is only as big as it needs to be). | ||
|
|
||
| Added prop content_style that takes values 'fit' or 'grow' (Default='fit') |
There was a problem hiding this comment.
Default table behavior is to take as little space as possible (fit) but for % based columns and it sometimes (always?) desirable to fill the dash-table container (grow)
| `.cell-0-1 th:nth-of-type(${index + 1})`, | ||
| `width: ${width}; min-width: ${width}; max-width: ${width};` | ||
| ); | ||
| }); |
There was a problem hiding this comment.
Make sure the header rows match the size (pixel for pixel) of the content rows.
There was a problem hiding this comment.
This is necessary for fixed rows, as the rows are not in the same table and need to be synced
| this.stylesheet.setRule( | ||
| `.dash-spreadsheet-inner th.column-${typeIndex}`, | ||
| `width: ${width}; max-width: ${maxWidth}; min-width: ${minWidth};` | ||
| ); |
There was a problem hiding this comment.
These styles specific to headers are not necessary anymore as the more general styles above will have the same effect.
| n_fixed_columns ? 'dash-fixed-column' : '', | ||
| 'dash-fixed-content' | ||
| ] | ||
| ]; |
There was a problem hiding this comment.
Apply dash-* classes that are part of the table contract to the table fragments that are applicable
| ...(n_fixed_rows ? ['freeze-top'] : []), | ||
| ...(n_fixed_columns ? ['freeze-left'] : []) | ||
| ...(n_fixed_columns ? ['freeze-left'] : []), | ||
| [`dash-${content_style}`] |
There was a problem hiding this comment.
dash-grow or dash-fit, also contract material
| const width = `calc(${spannedColumns.map(column => Stylesheet.unit(column.width || DEFAULT_CELL_WIDTH, 'px')).join(' + ')})`; | ||
| const maxWidth = `calc(${spannedColumns.map(column => Stylesheet.unit(column.maxWidth || column.width || DEFAULT_CELL_WIDTH, 'px')).join(' + ')})`; | ||
| const minWidth = `calc(${spannedColumns.map(column => Stylesheet.unit(column.minWidth || column.width || DEFAULT_CELL_WIDTH, 'px')).join(' + ')})`; | ||
|
|
There was a problem hiding this comment.
All of these are not applicable anymore and taken care of by the new sync style above
| table { | ||
| width: 100%; | ||
| } | ||
| } |
There was a problem hiding this comment.
When content_style='grow' we want the right side of the table (non-frozen columns) to fill the available space.
We also want all tables to grow as well
|
@cldougl Code approval from @valentijnnieman. Will wait on your functional review before merging 😄 Preliminary testing in app repo seem to be working but I haven't been able to try different datasets content_style='grow' |
4 participants
