Skip to main content

Features

100,000 rows​

Rows are virtualized, display performance is not impacted by the number of rows. Renders have been optimized to the strict minimum, follow the performance guides to get the most out of DSG.

Active
First name
Last name
Integer
Float
Percentage
Date
Job
Job area
1
2
3
4
5
6
7
8

Simple underlying data​

You don't need to wrap you data in fancy objects.

Active
First name
Number
1
2
3
rows
[
  {
    "active": true,
    "firstName": "Ubaldo",
    "number": 1
  },
  {
    "active": false,
    "firstName": "Donald",
    "number": 33
  },
  {
    "active": true,
    "firstName": "Merlin",
    "number": 55
  }
]

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.

Active
First name
Last name
Number
1
2
3
4
5
6
7
8
9
10
11
rows

Keyboard shortcuts​

A lot of keyboard shortcuts are supported so power user can feel just right:

  • Arrows to move active cell around
  • Tab and Shift+Tab to go to next / previous cell
  • Shift+Arrows to select multiple cells
  • Shift+Click to expand selection
  • Ctrl+Arrows or ⌘+Arrows to move to first / last / top / bottom cell
  • Ctrl+Shift+Arrows or ⌘+Shift+Arrows to select to first / last / top / bottom cell
  • Esc to blur
  • Enter or F2 to start / stop editing cell
  • Shift+Enter to insert row below
  • Ctrl+D or ⌘+D to duplicate current row / selected rows
  • Backspace or Del to clear cell / delete rows
  • Ctrl+A or ⌘+A to select all

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...

Active
First name
Last name
1
2
3
4
5
rows

Copy pasting​

Copy pasting demo

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 selection demo

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.

Active
First name
Last name
1
2
3
4
5

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:

Active
First name
Last name
1
2
3
4
5
rows