columns=[
{'id': 'col-1', 'name': 'Column 1'},
{'id': 'col-2', 'name': 'Column 2'},
{'id': 'col-3', 'name': 'Column 3'},
]
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'],
},
]
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]
}
}
Currently, it's like:
where
nameacts as an ID androwsacts as a list of column labels. Once we have proper column IDs, this should become something likeTo 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
Currently, the keyboard handlers are too greedy.
Flexible overrides. Suggested API, in rough order of precedence
shouldComponentUpdateI started doing this but then found myself in some buggy situations. felt like it was probably too early to start nailing this down
we could reuse the framework we use with the rest of the dash component libraries: percy + selenium
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)similar to the existing
dash-table-experimentscomponent. will update aselected_rowspropertyeditable=Falseshould work