Hacker News Board Hacker News, browsed like a classic message board
Live data from Hacker News

Show HN: React-data sheet, Excel-like spreadsheet component

nadbm.github.io

Post reply on HN
Print view View original

51–60 of 93 posts

Re: Show HN: React-data sheet, Excel-like spreadsheet component

#51

Post by cheapsteak »

misiti3780 wrote: post #18

I am working with two separate clients that need excel spreadsheet functionality in a browser. I evaluated all of the existing open source projects (this wasnt available at the time) and ended up going with fix-data-table-2 (fork of facebooks fix-data-table). fix-data-table is performant and easily extendable. I was able to create an editable grid similar to googlesheets in a months worth of work. working on open sou…

I did the same evaluation and ended up going with react-bootstrap-table [1], which comes built-in with some nice features like cell editing [2], keyboard navigation [3], but does _not_ have fixed-data-table-2's column reordering and resizing

[1] https://github.com/AllenFang/react-bootstrap-table

[2] http://allenfang.github.io/react-bootstrap-table/example.htm...

[3] http://allenfang.github.io/react-bootstrap-table/example.htm...

Re: Show HN: React-data sheet, Excel-like spreadsheet component

#52

Post by rattray »

acemarke wrote: post #48
rattray wrote: post #39

Earlier quoted context omitted.

How does https://github.com/kolodny/immutability-helper compare to Immutable in your experience? The latter seems potentially more performant and lighter-weight; curious what its disadvantages might be (the syntax?)

I personally recommend against using Immutable.js, for a number of reasons (which I wrote as a Reddit comment a while ago [0] ). There's some additional info on Immutable.js-related perf in my links list [1] FYI, there's also a bunch of other immutable update utility libs besides immutability-helper. I have a list of them in my Redux addons catalog [2]. [0] https://www.reddit.com/r/javascript/comments/4rcqpx/dan_abra…

Interesting, thanks for sharing. I took a look at your list of links recently, actually – it was helpful.

I'm considering syntax-level support for `immutability-helper`, which seems like the best all-around solution aside from its syntax. This is for a JS Dialect I'm building called LightScript[0].

Would look something like:

    store.people[0].friends[0].name~~set("Alice")
which would compile to:

    update(store, { 
      people: { 
        [0]: {
          friends: {
            [0]: {
              name: { $set: "Alice" }
            }
          }
        }
      }
    })
Would love thoughts/feedback (here or on the project Gitter[1])

[0] http://lightscript.org [1] https://gitter.im/lightscript/Lobby

Re: Show HN: React-data sheet, Excel-like spreadsheet component

#53

Post by teh_klev »

degenerate wrote: post #24
sandGorgon wrote: post #23

If you can productize this, then you can potentially build a business around this. The most feature filled spreadsheet component today is Handsontable. My company pays for the enterprise version of it...And we wish there was something better.

Link for others: https://handsontable.com/examples.html It's too expensive IMO. But if you are not using it commercially, it's on Github.

If you're building a commercial app that needs this kind of functionality then $490/seat is not expensive, it's the cost of a fairly cheap developer day. So instead of messing around for days trying to get various partially implemented open source/free "Excel" type grids to work, you pay your money and get the job done more quickly.

Re: Show HN: React-data sheet, Excel-like spreadsheet component

#54

Post by acemarke »

As a general pointer, there's a good categorized list of React components at https://github.com/brillout/awesome-react-components , including a number of other table and grid components. Also, https://js.coach is a useful searchable auto-generated catalog of React-related components and libraries.

For anyone interested in learning React, I keep a big list of links to high-quality tutorials and articles on React, Redux, and related topics, at https://github.com/markerikson/react-redux-links . Specifically intended to be a great starting point for anyone trying to learn the ecosystem, as well as a solid source of good info on more advanced topics.

Re: Show HN: React-data sheet, Excel-like spreadsheet component

#55

Post by georgewfraser »

toomim wrote: post #40
georgewfraser wrote: post #32

I have spent way too much time building grid components at my company, and I've found that if you have (1) a lot of data, (2) a dense grid, and (3) a grid that occupies most of the screen, THEN the only way to get 30+fps is to use canvas and do all the layout and drawing logic yourself.

Or you can do what google sheets does: only draw N cells at any time, and just change their contents depending on where you are scrolled to.

Google sheets uses canvas. The strategy you describe is orthoganal to canvas versus DOM.

Re: Show HN: React-data sheet, Excel-like spreadsheet component

#56

Post by arrty88 »

dabernathy89 wrote: post #37
rudiger wrote: post #28

Earlier quoted context omitted.

What's wrong with Handsontable? It looks pretty good to me.

Agreed, I just played with the demo and it's pretty dang slick.

looks great but is it editable? thats a big req for us

Re: Show HN: React-data sheet, Excel-like spreadsheet component

#59

Post by dman »

rch wrote: post #36
audiotalo wrote: post #34

Nice! Lately I have been looking into javascript grid components and have not found a good solution. What would be a good javascript grid component that satisfies the following: 1. Integrates easily with Vue 2. Has sorting 3. Has grouping 4. Has inline editing (formulas are not required)? OTOH I would be happy with a software that is basically a web frontend for Postgres that can be customised in a way that a client…

> Integrates easily with Vue IMO grids (and trees, etc.) only work well if they are framework-specific. Here's a table that could evolve into an editable grid: http://element.eleme.io/#/en-US/component/table

That looks interesting

Re: Show HN: React-data sheet, Excel-like spreadsheet component

#60

Post by kamranasif »

tlrobinson wrote: post #26
misiti3780 wrote: post #18

I am working with two separate clients that need excel spreadsheet functionality in a browser. I evaluated all of the existing open source projects (this wasnt available at the time) and ended up going with fix-data-table-2 (fork of facebooks fix-data-table). fix-data-table is performant and easily extendable. I was able to create an editable grid similar to googlesheets in a months worth of work. working on open sou…

React Virtualized is also great: http://www.reactvirtualized.com We (Metabase) switched from FixedDataTable to React Virtualized and are happier with it. The only major issue with it is doesn't have fixed columns/rows built in, but it's pretty easy to compose a couple Grids with ScrollSync to get that behavior ( https://bvaughn.github.io/react-virtualized/#/components/Scr... ) FixedDataTable has performance issues wi…

Maintainer of FDT2 here.

One of the reasons we decided to maintain this library is that it does virtualize both columns and rows. We use it at Schrodinger for our enterprise platform and have demo'd support of billions of rows.  This is possible because we don't use a wrapper DOM element to handle scrolling. Right now we are migrating all the state to Redux for better maintainability and performance and hope to make extending and optimizing the library more user friendly.

misiti3780 would you be interested in collaborating with us to help us capture your improvements as well?

Post reply on HN