This repository was archived by the owner on Aug 29, 2025. It is now read-only.
-
-
Notifications
You must be signed in to change notification settings - Fork 72
This repository was archived by the owner on Aug 29, 2025. It is now read-only.
TODO #2
Copy link
Copy link
Closed
Labels
dash-type-enhancementNew feature or requestNew feature or request
Description
- Introduce column IDs
columns=[
{'id': 'col-1', 'name': 'Column 1'},
{'id': 'col-2', 'name': 'Column 2'},
{'id': 'col-3', 'name': 'Column 3'},
]
- Improve multi-line header API
Currently, it's like:
merge_duplicate_headers: true,
columns=[
{
'name': 'Montréal',
'rows': ['City', 'Canada', 'Montréal'],
},
{
'name': 'New York City',
'rows': ['City', 'America', 'New York City'],
},
]
where name acts as an ID and rows acts as a list of column labels. Once we have proper column IDs, this should become something like
merge_duplicate_headers: true,
columns=[
{
'id': 'Montréal',
'name': ['City', 'Canada', 'Montréal'],
},
{
'id': 'New York City',
'name': ['City', 'America', 'New York City'],
},
]
- Filtering and strict data types UI
To start, we'll just copy the existing dash-table-experiments UI but introduce data types. See the work-in-progress filtering requirements for a client in this document: https://docs.google.com/document/d/1KVfUxVuZtJforuaua58-a2iWrePjKGWS02VCa3mgwQA/edit. These requirements will become more solid after I have a design review with the client at the end of the month - Event scope
Currently, the keyboard handlers are too greedy.- They need to only be active when the table is "focused".
- Should work with mulitple tables on the page
- Should override the window scroll
- styling api
Flexible overrides. Suggested API, in rough order of precedence
style_cell={'color': 'blue'} // styles the `<td/>` and/or the inner `<input/>
style_column={
0: {'color': 'blue'}, // styles the cells on the 0th column
5: {'color': 'blue'}, // styles the cells on the 5th column
}
style_row={
2: {'color': 'blue'}, // styles the `<tr/>` on the second row
3: {'color': 'blue'}, // styles the `<tr/>` on the 3rd row
}
style_even_row={'backgroundColor': 'lightgrey'}
style_odd_row={'backgroundColor': 'white'}
style_row_cells={
2: {'color': 'blue'}, // styles all the cells in the second row
3: {'color': 'blue'}, // styles the the cells in the 3rd row
}
style_header={'color': 'blue'} // styles the cells in the header row
style_numeric={'fontFamily': 'monospace'} // styles the columns with 'type': 'numeric'
style_enum={'fontFamily': 'monospace'} // styles the columns with 'type': 'enum'
style_date={'fontFamily': 'monospace'} // styles the columns with 'type': 'date'
style_cells={
3: {
5: {'backgroundColor': 'blue'}, // styles the cell in position [3, 5] (row 3, column 5)
8: {'backgroundColor': 'blue'}, // styles the cell in position [3, 8]
},
8: {
5: {'backgroundColor': 'blue'}, // styles the cell in position [8, 5] (row 8, column 5)
8: {'backgroundColor': 'blue'}, // styles the cell in position [8, 8]
}
}
- smarter
shouldComponentUpdate
I started doing this but then found myself in some buggy situations. felt like it was probably too early to start nailing this down - screenshot integration tests
we could reuse the framework we use with the rest of the dash component libraries: percy + selenium - editable columns
ultimately, we might need a context menu for the columns. for now, we can just make the header names an<input/>that gets rendered when you click /hover on the column name and sets the nameonBlur(by callingsetPropswith the newcolumnsobject) - per-row checkbox/radio item controls
similar to the existingdash-table-experimentscomponent. will update aselected_rowsproperty -
editable=Falseshould work
Reactions are currently unavailable
Metadata
Metadata
Assignees
Labels
dash-type-enhancementNew feature or requestNew feature or request