Features
100,000 rows
Rows and columns are virtualized, display performance is not impacted by the number of rows or columns. Renders have been optimized to the strict minimum, follow the performance guides to get the most out of DSG.
Simple underlying data
You don't need to wrap you data in fancy objects.
[
{
"active": true,
"firstName": "Lauriane",
"number": 68
},
{
"active": false,
"firstName": "Sven",
"number": 45
},
{
"active": true,
"firstName": "Daniella",
"number": 102
}
]
Responsive
The spreadsheet takes 100% of the div it is in and grows and shrinks with it. You can specify how columns should react using known flexbox syntax. More details on how to setup column widths.
Keyboard shortcuts
A lot of keyboard shortcuts are supported so power user can feel just right:
Arrows
to move active cell aroundTab
andShift+Tab
to go to next / previous cellShift+Arrows
to select multiple cellsShift+Click
to expand selectionCtrl+Arrows
or⌘+Arrows
to move to first / last / top / bottom cellCtrl+Shift+Arrows
or⌘+Shift+Arrows
to select to first / last / top / bottom cellEsc
to blurEnter
orF2
to start / stop editing cellShift+Enter
to insert row belowCtrl+D
or⌘+D
to duplicate current row / selected rowsBackspace
orDel
to clear cell / delete rowsCtrl+A
or⌘+A
to select allRight click
orCtrl+Left click
to open context menu
Context menu
Smart context menu when right clicking is 100% supported and customizable with a single component. More details on how to setup a custom context menu.
Try right clicking on the grid, selecting a few rows, clicking on headers...
Copy pasting
Copy pasting to and from Excel, Google-sheet, and other spreadsheet software is supported and completely customizable: you decide what data is copied and how pasting is handled with simple functions. More details on how to customize copy pasting behavior.
Expanding selection
Expanding the selection is supported and can be disabled. It does not require any additional work it to work. Try it out on other examples!
Lock rows
It might be desirable to lock rows. Here the user cannot insert or delete rows, even when using keyboard shortcuts or when pasting large data-set. More details on grid options.
Disable columns or cells
Columns can be disabled entirely, or on a per-row basis.
Disabling a column prevents the user from editing its cells, including any pasting or deleting operation. The user can still copy the value of a disabled column. More details on disabling columns and cells.
Try toggling the "active" column: