V5 is on its way 🚀

[nick-keller]

I am starting a complete re-write of the library, from scratch, with the goal of being able to support more advanced features than the current model can.

Key changes

Sticky columns

It will now be possible to have as many sticky columns as desired to the left and to the right of the grid. The only constraint will be for those columns to be continuous, meaning only the N first columns can be sticky to the left, and only the N last columns can be sticky to the right.

The API would be a sticky key on the column object that can be either 'left' or 'right'. The component will ignore any sticky column that is not directly to the left or the right.

const columns: Column<any>[] = [
  { sticky: 'left' },
  { sticky: 'left' },
  { sticky: 'left' },
  {},
  { sticky: 'left' }, // 👈 Will not be sticky
  { sticky: 'right' }, // 👈 Will not be sticky
  {},
  { sticky: 'right' },
  { sticky: 'right' },
]

Sticky rows

It will now be possible to have as many nested rows as desired.

<DataSheetGrid
  value={data}
  rowIsSticky={({ rowIndex }) => {
    if (rowIndex % 20 === 0) {
      return true
    }

    return false
  }
/>

<DataSheetGrid
  value={data}
  rowIsSticky={({ rowIndex }) => {
    if (rowIndex % 20 === 0) {
      return 1
    }
    if (rowIndex % 10 === 1) {
      return 2
    }

    return false
  }
/>

<DataSheetGrid
  value={data}
  rowIsSticky={({ rowIndex }) => {
    if (rowIndex % 20 === 0) {
      return { level: 1, position: 'top' }
    }
    if (rowIndex % 20 === 1) {
      return { level: 2, position: 'top' }
    }
    if (rowIndex % 20 === 2) {
      return { level: 3, position: 'top' }
    }
    if (rowIndex % 20 === 17) {
      return { level: 3, position: 'bottom' }
    }
    if (rowIndex % 20 === 18) {
      return { level: 2, position: 'bottom' }
    }
    if (rowIndex % 20 === 19) {
      return { level: 1, position: 'bottom' }
    }
    return false
  }
/>

Note that returning true is just a shorthand for { level: 1, position: 'top' }, and returning a number is a shorthand for the level with position top.

It will also be possible to pass 'top' or 'bottom' for a level of 1.

No more cursor animation and scroll shadow

Being able to have many sticky columns and rows makes rendering the selection in a single div impossible, therefore animating it is almost impossible. The same goes for scrolling shadows.

Static rows

You will now be able to add what is called "static rows" in your data. A static row is a row that can override all props of each column. For instance you can add a static row to add a footer or header.

Headers and gutter are now simple add-ons

Now that it is possible to make any row and column sticky, the header row or gutter column are just regular columns / rows.

Rows and columns mappers

You will now be able to provide a rows and/or a columns mappers. A mapper is just an object with two keys:

{
  mapper: (rows) => [headerRow, ...rows],
  parser: (rows) => rows.slice(1),
}

This will allow you to have a clean data or columns, while being able to add gutter column or headers and footers.

By default the component will add the built-in gutter column and header row.

Multi cursor

It will be possible to display multiple cursors at once, allowing users to implement search highlights, errors display, or multi-users editing.

A cursor will simply be a function called for each visible cell that should return a component to display over the cell. This means that cursors do not have to be continuous rectangle anymore.

Window scroller

It will be possible to not specify a height and virtualize the grid based on the window.

[cheetah-zeynep-simsek]

Do you have any plans to implement expandable columns?

[nick-keller]

Now is definitely a good time to talk about it.
Can you elaborate, what do you mean by expandable?

[bvkimball]

Row Re-ordering would be awesome too: #55

[nick-keller]

Rows and columns re-ordering will be possible for sure. I'm just not sure yet if this will be a built-in feature or if the API will just be flexible enough to allow users to implement it themselves.

[josecao]

Do you have implemented formula.js for cell?

[bvkimball]

@nick-keller any updates on this? Is there any way to contribute to this.

[uioonm]

When can the new version be released

[devjaw]

column filter

[testone740]

column sorting as well if not yet implemented