Datagrid Feature Requests

[sccolbert]

This issue will be used to track and prioritize feature requests for @phosphor/datagrid.

To request a feature, please make a comment starting with the phrase Feature Request: followed by a description of the feature. Please read through the lists below before making a new request so that we can avoid duplicates.

Please up-vote feature-request comments to help prioritize the implementation of features.

Live Example: http://phosphorjs.github.io/examples/datagrid

Current Feature Set (updated as new features are implemented):

• Support for outrageously large datasets (quadrillion+ rows and columns)
• Incredibly high performance rendering which draws only the visible damaged regions
• A fully virtual data model which can be implemented on top of almost any data set
• A concrete data model implementation which supports in-memory JSON Table Schema
• Support for fully custom cell renderers which can draw arbitrary cell content
• Support for mapping custom cell renderers based on data model metadata
• A concrete cell renderer implementation for drawing text
• Support for custom text formatting and styling in the text renderer
• A suite of out-of-the-box text formatters for the text renderer
• Support for row and column "zebra striping" based on row/column index
• Arbitrary number of column-header-rows and row-header-columns
• Full control over cell-agnostic grid styling
• Variable sized rows and columns for any size dataset
• Live interactive resizing of rows and columns
• Support for HiDPI displays and browser zoom
• Support for selections: cell, row, and column.
• Event model: keyboard and mouse.
• Pinned rows and columns (handle via multi-column row-headers and multi-row column-headers).
• Copy-to-clipboard.
• Stretched last row and column.

Feature Requests (updated as new features are requested):

• Cell Editors
• Cell Spans
• Interactive Row/Column Moving
• Cell Borders
• Spark Renderers
• Button Renderer
• Checkbox Renderer
• Dropdown Renderer
• Gridview Renderer
• Pivoting Data Model
• Pivot Cell Renderer
• CSV Data Model
• Async Data Helpers
• Hover Based Styling
• Filtering
• Sorting
• Export View
• Animated Cells
• Auto-size Rows/Columns
• Disable Row/Column Resizing
• Save/Restore Column/Row Sizes
• Gradient Cell Backgrounds
• Image Cell Backgrounds

Useful Examples to Build

• Total/Aggregates

[sccolbert]

Feature Request: Cell Editors

This will be a class which is used to open an editor when the user wishes to "edit" the data in a cell (via double click, or enter, or some other action). An editor may choose to use an input element, or any other DOM control to handle editing. When the editor is "closed" the data grid will take the edited value and invoke a method on the data model to update the cell value. The data model should then emit the changed signal for that cell in order to draw the new cell value.

[sccolbert]

Feature Request: Cell Spans

This will add support for row/column spans of both body and header cells. This feature is required to implement grouped column headers as needed by a pivot table.

[sccolbert]

Feature Request: Event Model

This should involve exposing a reasonable semantic event model to the user for custom handling of mouse and keyboard events, to the extent they are not handled in a more semantic fashion (ala the selection model), or are impossible to implement using a command registry/keymap.

For example, do we attempt to natively support Ctrl+C and copy the selection to the clipboard, or do we let the user install their own keyboard handler via keymap, and use the selection model to copy to clipboard.

Implemented in #421

[sccolbert]

Feature Request: Selection Model

This will add support for object which maintains the selected regions(s) (rows/columns/cells) in the grid, along with the cell(s) which should be considered the cursor. The regions may be disjoint. The datagrid will handle all mouse events and translate them into method calls on the selection model. The selection model will emit a changed signal to indicate selection changes.

We may or may not want to automatically handle keyboard-based selection modification. It depends on whether we handle other key events automatically, or tell users to use a command palette or keymap.

Implemented in #421

[sccolbert]

Feature Request: Interactive Row/Column Moving

Just like interactive row/column resizing, this would allow the user to use the mouse to move rows/columns around in the grid. I'm not yet sure of the best UX for this: whether it should be a move indicator drawn on another layer, a "snapshot" of the section(s) being moved, or actually the "live" section(s). The move indicator is the easiest/simplest option.

[sccolbert]

Feature Request: Cell Borders

The data grid currently implements horizontal and vertical gridlines, but not individual cell or cell-range borders. This needs to be done as a separate layer since:

• borders should be shared between cells
• cell renderers are not allowed to draw outside of their bounding box
• excel-style borders require knowledge of neighboring borders in order to draw correctly

There are also some questions which need to be addressed:

• Should borders be assigned to the grid, or defined with a separate border model?
• If assigned to the grid, how to handle insert/remove rows/cols from within a border range?

[sccolbert]

Feature Request: Spark Renderers

This will implement a simple spark renderer which supports per-cell sparkline and sparkbar charts for small arrays. It's is notably not a full-blown chart. https://en.wikipedia.org/wiki/Sparkline

[sccolbert]

Feature Request: Button Renderer

A cell renderer which draws a simple push button control.

[sccolbert]

Feature Request: Checkbox Renderer

A cell renderer which draws a simple check box control.

[sccolbert]

Feature Request: Dropdown Renderer

A cell renderer/editor which allows the user to select from a list of choices.

[sccolbert]

Feature Request: Gridview Renderer

A cell renderer/editor which, when clicked, opens a popup with a detailed datagrid view of the cell contents. This is useful when a single cell represents a large amount of data, and summarized with a token value in the main grid, but can be expanded to show more data, such as in a pivot table.

[sccolbert]

Feature Request: Pivoting Data Model

An implementation of a data model which supports pivoting over in-memory data. This could be expanded to support server-side/streaming data, if a suitable standard emerges in the community.

[sccolbert]

Feature Request: Pivot Cell Renderer

This is a cell renderer which draws the expand/collapse icon(s) for a row in a pivot table. When clicked, the row will expand or collapse to show the pivoted data.

[sccolbert]

Feature Request: Hi-DPI Support

Text, and to a lesser extend gridlines, currently appear "fuzzy" on Hi-DPI displays. Enabling support for Hi-DPI requires some work on the backend to scale the buffers and gc by the DPI ratio, and then downsample the canvas with CSS. On a Mac, this means drawing twice the number of pixels. Depending on the performance impact, we may or may not want to make it a flag.

Implemented in #288

[sccolbert]

Feature Request: CSV Data Model

We already have a JSONModel which may suit a lot of cases, and will grow more functionality as the datagrid grows features. However, there may be some CSV files which are not modeled well by that class. We may want an out-of-the-box model for CSV files, which will probably need to do it's own CSV parsing.

[sccolbert]

Feature Request: Async Data Helpers

The data model base class already defines a changed signal which is to be emitted (in one of its various forms) when the data model has changed (rows inserted/removed, cells changed, etc). So, it's already possible to implement a data model which communicated asynchronously with a server, and emits a signal when new data is available. However, we can do some things to make is easier for a data model author.

For example, we can define a method on the data model, such as fetchRange() which is given the cell range which is currently visible by the grid, before the grid renders it. At that point we have one of two options:

• Let the model return null for any cell for which it doesn't yet have data, and emit a signal when new data is available
• Let the model return a promise from fetchRange() and the grid will not attempt to render that range until the promise resolves.

Each of these approaches has tradeoffs, particularly when scrolling through a large dataset where a requested range is really a transient thing. This may cause us to need a cancelFetch() method so that the data model can discard an async request which is no longer needed. If we take this approach, it will also require a unique id for each grid, since a model may have multiple grids viewing it simultaneously.

Finally, we probably want an out-of-the-box data model implementation which uses a websocket and reasonably protocol to view server-side resources like data frames.

[sccolbert]

Feature Request: Hover-Based Styling

This would add support for styling based on whether a row/column/cell is hovered by the user. This is potentially expensive, and requires repainting a row/column/cell on each mouse move event. If implemented, it should be an explicit flag to turn on the feature.

[dhirschfeld]

Feature Request: Column Filters

It would be fantastic to be able to filter the data interactively by applying one or more filters to each column.

• For categorical columns you should be able to select one or more values
• For numeric columns you should be able to either select values or filters such as <,<=,>,>=
• For date columns it would be great to be able to select ranges as for numeric columns, but also standard groups such as month, quarter or year

Even if the answer is that the filtering should be done externally, the data source updated and the grid re-rendered there would still need to be some UI with events to allow for this.

[sccolbert]

Feature Request: Sorting

This is similar to filtering. Click on a column header to trigger a sort in the data model. Likely implemented as a part of the event model with a custom header cell renderer. Notably, the grid will not perform the sort, it will tell the data model to sort itself.

[sccolbert]

@dhirschfeld The actual filtering of the data will indeed be done by the data model implementation, but I'm leaving your comment as-is, because we still need some out-of-the-box cell renderers/editors which can be used to implement the UI part of the filter and which call back into the data model.

The data model abstract base class already defines the signal which the model implementation should emit when it filters itself.

[deepankarsharma]

Feature Request: Export displayed view

1. Export to Excel / CSV
2. Export to PDF
3. Export to HTML

[sccolbert]

Feature Request: Animated Cells

Support animated cell renderers which can animate for a specified duration. This is useful for flashing cell background colors to draw attention to a cell, transitioning spark lines, or for other super-fancy things that people dream up.

[sccolbert]

Feature Request: Auto-size Rows/Columns

Double clicking on a row/column border (in the header) should auto-size the row/column to best fit the currently visible contents.

[sccolbert]

Feature Request: Disable Row/Column Resizing

Currently, the user is always able to interactively resize rows and columns, provided the respective header is visible. We may want to allow the option of disabling interactive resizing.

[dhirschfeld]

~Feature Request: Totals/Aggregates~

~I assume this is also part of the data model? i.e. you can already hijack a row/column header level to display count/sum/mean/std which is calculated externally to the grid implementation~

Already implemented by the data model

[sccolbert]

@dhirschfeld Yep. That is already implementable by a data model. I'll add it as a useful example to make.

[deepankarsharma]

Feature Request: Save / restore column sizes

Save / restore of column sizes taking the following into account

a. Any notion of default column size b. User modified column sizes c. Possibly things like active zoom level / dpi / font

[ijstokes]

I upvoted "Selection Model". Does that feature include the basic concept of row, column, or region selection and then CTRL-C copy to get a CSV or similar representation of the data into the clipboard?

[sccolbert]

@ijstokes Yep.

[RobertoMalatesta]

For the sake of feature discussions, here's a page listing some of the most relevant datagrid components today available (with demos to try them out): https://jspreadsheets.com/

--R

[akosyakov]

Why don't use something like ag-grid? It is written with TypeScript, cover most of the features above and able to handle infinite data, has nicely designed and documented API, distributed under MIT license.

[sccolbert]

@akosyakov Because it's slow. It also doesn't support variable sized rows/columns when using a virtual data model. And a bunch of other reasons I don't feel like typing out.

[sccolbert]

@akosyakov Also, that sort of question is not really appropriate for this issue. This issue is to track feature requests, not to question core technical decisions.

[scottdraves]

Feature Request: pin columns to left

pinned columns are always visible, the horizontal scrollbar does not apply them.

[sccolbert]

Feature Request: Gradient Cell Backgrounds

Update the built-in cell renderers to support gradients for the cell background.

[sccolbert]

Feature Request: Image Cell Backgrounds

Update the built-in cell renderers to support images for the cell background.

[scottdraves]

Feature Request: callback API

so I can have a fn called when cells are clicked, and also add a context menu to the cells in the grid (with callback per item).

[sccolbert]

@scottdraves That falls under the Event Model

[jjrv]

Feature Request: Tree columns

Rows can have parent / child relationships for hierarchical data or grouping. Cells in a specific column indicate those relationships. Parent rows allow showing / hiding all their children.

Bonus points if promises are used so that expanding a parent can trigger a fetch or calculation, and the child rows are shown when ready. Meanwhile a busy indicator (in the parent row) would be nice.

[bfelds]

Feature Request: Scroll to Row

Ability to specify a row/column to scroll to.

[bfelds]

Feature Request: Ctrl+C Copy/Paste preserves relative spacing for excel

e.g. I'd like for a 2x2 grid: |1 | 2| |3 | 4| to show up in excel as a 2x2 grid if i select and copy that from the ui. Note this is different than the other feature request for exporting to excel.

[bfelds]

Feature Request: Keyboard Navigation Arrow Keys, Tab and Shift+Tab should follow logical order of Top->Down, Left->Right. Cells should have the option to take focus on navigation, i.e. we want entry cells to get focus, but not clickable text. Because of viewport virtualization, this isn't free if i'm not wrong

[ellisonbg]

Feature Request: Add ability for last column to fill width of datagrid view

Often a datagrid will occupy a certain about of size, but the columns won't fill the width. It would be nice to have the ability for the datagrid to expand the last column to fill the rest of the space.

[bfelds]

@ellisonbg, can we expand that to just "dynamic column sizing" in general. similar to flexbox. just set a growth factor on the last column if you want that effect. but overall if you wanted a different column to take up the space you could set a growth factor on that one.

[akansal1]

Feature Request: Add ability to have nested rows and columns, to support Multi indexing for dataframe type of applications.

[dhirschfeld]

Arrow backend for the DataGrid.

Arrow has bindings for many languages including TypeScript and Python and should enable much more performant transfer of data to the grid

Also useful? http://arrow.apache.org/docs/python/ipc.html#arbitrary-object-serialization

[nimo23]

Feature Request: flexible "Multi-fixed"-columns and flexible "Multi-fixed"-rows

For example, a table with 10 columns. I want to fix "col 1" and "col 4". When scrolling to left, then "col 1" is fixed, scrolling after "col 4", fixes the "col 4" with "col 1" at the left side:

1. visible: col1|col2|col3|col4|..|col10
2. user scrolls to right to "col 3"
3. visible: col1|col3|col4|..|col10
4. user scrolls to right to "col 8"
5. visible: col1|col4|..|col8|col9|col10

The same with rows:

For example, a table with 100 rows. I want to fix "row 1" and "row 30". When scrolling to bottom, then "row 1" is fixed, scrolling after "row 30", fixes the "row 30" in pair with "row 1" at the top:

1. visible: row1 row2 row3 row4 .. row10

2. user scrolls to "row 30" row1 row30 .. row100

[timkpaine]

@sccolbert @scottdraves the data grid examples here and here are really slow on safari compared to chrome.

[sccolbert]

@timkpaine Which version of Safari? I mostly develop on Windows. Safari may just have a really slow canvas.

[timkpaine]

@sccolbert i'm comparing Safari Version 11.1 (13605.1.33.1.2) to Chrome Version 65.0.3325.181

Live charts look fine, its just scroll interactions