Skip to content
This repository was archived by the owner on Aug 29, 2025. It is now read-only.
This repository was archived by the owner on Aug 29, 2025. It is now read-only.

TODO #2

@chriddyp

Description

@chriddyp
  • 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 name onBlur (by calling setProps with the new columns object)
  • per-row checkbox/radio item controls
    similar to the existing dash-table-experiments component. will update a selected_rows property
  • editable=False should work

Metadata

Metadata

Assignees

No one assigned

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions