Live data from Hacker News

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

nadbm.github.io

41–50 of 93 posts

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

#41
post #21

Earlier quoted context omitted.

Why the downvotes? This person is describing a real problem with dealing with staff patent attorneys. This is real life.

If you think it's a constructive comment I'll be writing a bot that scans pages posts on HN, looks on the page for a GitHub link and complains about the license used. Doesn't matter if it's GPL, MIT, Apache, I'll just write some generic comment complaining about each license.

There is no complaint to be made about Apache or MIT outside of ideology, while there are some developers who simply aren't aware that they're excluding a large part of their potential user base when selecting a copyleft license

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

#42

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…

+1 for React-Virtualized as well.

FYI: there was a new "MultiGrid"[1] high level component that was added in 8.9.0 [2] which helps facilitate fixed columns/rows with less boilerplate.

Though, nearly every time I've used the MultiGrid component, I've found myself eventually dropping back to ScrollSync + Grids/Lists. As the product grows in complexity, adding more complex interactions to MultiGrid is difficult as it doesn't expose all of the Grid API.

[1]: https://bvaughn.github.io/react-virtualized/#/components/Mul... [2]: https://github.com/bvaughn/react-virtualized/blob/master/CHA...

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

#43
post #40

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.

This is "virtualized" views; other comments in this thread link to some relevant projects!

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

#44

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…

Yes, react-virtualized is awesome. You can also compose and mix grid and non-grid components eg. https://jsfiddle.net/mauron85/Lyc52ac2/

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

#45

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.

canvas would be a pain to have automated test. https://github.com/openfin/fin-hypergrid/issues/540

even with sikulix ?

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

#46

Earlier quoted context omitted.

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…

Yes, react-virtualized is awesome. You can also compose and mix grid and non-grid components eg. https://jsfiddle.net/mauron85/Lyc52ac2/

> You can also compose and mix grid and non-grid components

That's a good point. We probably don't need to use a Grid for the header (I've wrestled with trying to hide scrollbars in headers a fair amount)

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

#47
post #25

Earlier quoted context omitted.

Definitely not meant for large datasets. I've tried it with about 100rows and pagination. I would work with react-virtualized for datasets that large

If that is the case, then this would have avoided the real problem that needs solving here. Throwing together some rendering and keyboard handling is not game changing. Getting good performance is the hard problem that needs solving. Perhaps a future version will focus on making sure it scales?

I might look into it in future revisions as large datasets wasn't part of my initial requirement (having a simple grid component that can handle formulas and copy/pasting).

The best option I had when building this was Handsontable. But that doesn't play nicely with react's virtual dom and immutable data.

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

#48
post #39
post #17

Earlier quoted context omitted.

I have made several relatively large systems using Redux, and it has become a necessity in order to handle complexity of new features. Overcoming the initial cognitive load takes a week or two, but as your system grows, your productivity and code organization is greatly improved. I also recommend Immutable for handling the state object and reselect for computing your container state properties. Those technologies tog…

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

[1] https://github.com/markerikson/react-redux-links/blob/master...

[2] https://github.com/markerikson/redux-ecosystem-links/blob/ma...

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

#49
post #11

This looks really great, and I've got an immediate use for something like this. I've been using ag-grid for presentation of grid-based data, but this looks ideal for more-interactive views. I look forward to putting it through its paces. Somewhat off-topic, but for those working in React, have you built large systems using Redux? I'm fairly early in what is likely to ultimately be a large-ish application, and while I…

Redux does deliberately add some indirection and overhead to things, but that tends to stay constant as the app increases in complexity. In other words, if you're just writing a TodoMVC app, then it's probably going to seem like a pain. As the app scales, the consistency and behavior usually winds up as a net benefit.

The Redux FAQ has an entry on "scaling" [0], and my React/Redux links list has a large section on Redux architecture and best practices [1].

[0] http://redux.js.org/docs/faq/Performance.html#performance-sc...

[1] https://github.com/markerikson/react-redux-links/blob/master...

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

#50
post #11

This looks really great, and I've got an immediate use for something like this. I've been using ag-grid for presentation of grid-based data, but this looks ideal for more-interactive views. I look forward to putting it through its paces. Somewhat off-topic, but for those working in React, have you built large systems using Redux? I'm fairly early in what is likely to ultimately be a large-ish application, and while I…

I've built a relatively large React app using Redux for state management. Etheryte's point is valid -- if state is only used within a single component (or maybe shared with its immediate children), you're probably better off leaving it local to that component. And if it turns out you're wrong later and actually do need it somewhere else you can refactor and pull it into Redux at that time.

If you have more than a few bits of state to manage, use multiple reducers and split your state into logical groups. Within each reducer, I use immutable.js `Record`s as the main state container. I also use Flow to strongly-type these reducers and get autocomplete and type checking of my state, but the benefits of that are mostly orthogonal to the benefits of using Redux.

You should almost never try to "denormalize" data (store the same thing in multiple places) or eg. use Redux state to initialize a component's local state. Trying to keep these in sync will kill your mental model. Instead, use selectors to keep components in sync, and if a particular view is costly to compute as a function of your state you can memoize it (I use https://github.com/reactjs/reselect for that). But that's extra complexity that should only be added in the few cases that warrant it.

I found that by organizing my code this way I was able to keep the parts of the app that I needed to make any particular change in my head easily, which did incredible things for developer velocity and happiness. :)

Post reply on HN