23 ms·

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

345 points by nadimisl 10y ago

euroclydon 10y ago
Looks beautiful!! But, I can just imagine running this one by the patent attorneys as an open source library to include in our product.
- hive_mind 10y ago
  Why the downvotes? This person is describing a real problem with dealing with staff patent attorneys. This is real life.
  - clishem 10y ago
    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.
    - nikcub 10y ago
      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
    - zenlikethat 10y ago
      Since the license of this library is MIT and the poster mentions patent attorneys I'd guess they aren't worried about licensing. They're worried about getting sued by Microsoft, Google, etc. for patent infringement.
      - mason55 10y ago
        Host on Azure and use Microsofts patents against the when they sue you
    - euroclydon 10y ago
      Hi. Certainly, my comment would be applicable to any open source library. But my intent was not to say that OSS software is difficult to get by patent attorneys. Rather I was attempting an inside joke with kindred spirits who have submitted OSS libs to their company's attorneys for patent infringement. What they seem to do is hire a grunt to do a naive word search match on the patent database. So I was saying, "just imagine the number of results that will come back for 'spreadsheet' or 'Excel'".
swah 10y ago
Math.js seems to evaluate using floats, but on your demo the results were always rounded.
captainmuon 10y ago
Nice! Looks really polished! One thing I'm wondering about... if this is React based, do you reassign and recalculate the whole grid upon every change? Because the grid is probably a component, and has the table as props. I could imagine that is inefficient... Not to even speak of then rendering the whole component and sending it through DOM reconciliation every time a key is pressed. Well, OTOH I guess it doesn't matter for small tables. The demo feels really snappy!
- ChicagoBoy11 10y ago
  Wouldn't it just re-render the cells that changed?
  - netzone 10y ago
    Yup, checking the source there's a cell component in addition to the sheet component, so it would just rerender that cell.
- prodtorok 10y ago
  I've built something similar (and performant) utilizing react-virtualized, Immutable.js, and the star: shouldComponentUpdate https://bvaughn.github.io/react-virtualized/#/components/Grid https://bvaughn.github.io/react-virtualized/#/components/Gri...
- nadimisl 10y ago
  It calculates the top level grid component but does not render the cell if it's the same cell object :).
- huherto 10y ago
  Back in the day I did a perl spread sheet. I was only updating the cells that were displayed at the moment. There were also transitive recalcs too if a displayed cell depended on other cells.
osullivj 10y ago
Very slick looking! Currently I'm using Angular 1.x with editablegrid to enable browser edits on server hosted spreadsheets [1]. The UX quality of this makes me think I should go for a rewrite in React. [1] spreadserve.com
gressquel 10y ago
the design looks really great, wish it was non-react, anything.
uptown 10y ago
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've got Redux working, I feel working with it is definitely adding cognitive load to each feature I implement. Just wondering whether it's worth the effort and would appreciate feedback from those who may have more experience weighing the pros and cons of using Redux with their application.
- Etheryte 10y ago
  It's important to remember that not all of your state needs to be in Redux. Redux is supposed to supplement local state, not replace it. Create namespaces in your store, it helps a ton with maintainability in the long run. Name your mutations consistently: describe what you're doing to what kind of data as briefly as you can. Keeping these few guidelines in mind, building huge applications using any flux-like pattern is quite straight-forward and easy to reason about.
- lpa22 10y ago
  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 together are a pleasure to develop with.
  - rattray 10y ago
    How does https://github.com/kolodny/immutability-helper 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?)
fiatjaf 10y ago
This covers 80% of Excel uses, but the rest 20% would take 1000% of the time to implement.
- clishem 10y ago
  Just some basic functionality that is used when making nearly all spreadsheets: dynamically resizing tables, formating cells, setting cell types (currency, floating point, integer, boolean), conditional formatting, cell ranges, SUM, COUNT, IF, AVG, extending cell contents by dragging. This project is a proof-of-concept. Nothing more than that.
hultner 10y ago
Any data on how this performs on large datasets? I've previously found that most web based data grids get extremely slow on larger data sets in BI applications (100k+ rows)
- nadimisl 10y ago
  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
  - shaneos 10y ago
    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?
    - nadimisl 10y ago
      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.
misiti3780 10y ago
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 sourcing it soon.
- deleted 10y ago
  [deleted]
- tlrobinson 10y ago
  React Virtualized is also great: http://www.reactvirtualized.com 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/ScrollSync https://bvaughn.github.io/react-virtualized/#/components/Scr...) FixedDataTable has performance issues with a larger number of columns because it doesn't "virtualize" columns (https://github.com/facebook/fixed-data-table/issues/49 https://github.com/facebook/fixed-data-table/issues/49). The DOM it generates is also much heavier (several elements for every cell vs. 1 with React Virtualized)
  - misiti3780 10y ago
    Hi, Thanks for the response. My team fixed those performance issues in the source. It is one of the reasons we want to open source it.
  - kevinwuhoo 10y ago
    +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/MultiGrid https://bvaughn.github.io/react-virtualized/#/components/Mul... [2]: https://github.com/bvaughn/react-virtualized/blob/master/CHANGELOG.md#890 https://github.com/bvaughn/react-virtualized/blob/master/CHA...
matthuggins 10y ago
Looks nice, but the keyboard doesn't come up on mobile (Android), so all the demos are unfortunately read-only.
- helb 10y ago
  https://github.com/nadbm/react-datasheet/issues/5 https://github.com/nadbm/react-datasheet/issues/5 (basically "Touch/Mobile Support?" –– "Not at the moment.")
sandGorgon 10y ago
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.
- degenerate 10y ago
  Link for others: https://handsontable.com/examples.html https://handsontable.com/examples.html It's too expensive IMO. But if you are not using it commercially, it's on Github.
  - dublinben 10y ago
    You can use the open source version commercially as well, since it is MIT licensed.
  - sandGorgon 10y ago
    no - i dont believe its too expensive. the devs are fairly responsive. The thing is, it carries too much baggage. It took them many months to even put it on npm. Adding features takes a lot of effort. Its 149$ for a year - its not at all bad and I love supporting them. But there's space to innovate - look at Airtable. I would love to have a component that looks like Airtable frontend.
  - teh_klev 10y ago
    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.
- rudiger 10y ago
  What's wrong with Handsontable? It looks pretty good to me.
  - deleted 10y ago
georgewfraser 10y ago
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.
- miralabs 10y ago
  canvas would be a pain to have automated test. https://github.com/openfin/fin-hypergrid/issues/540 https://github.com/openfin/fin-hypergrid/issues/540
  - wdfx 10y ago
    even with sikulix ?
  - djfumberger 10y ago
    Maybe that's the compromise for a good user experience?
- toomim 10y ago
  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.
  - cloverich 10y ago
    This is "virtualized" views; other comments in this thread link to some relevant projects!
  - georgewfraser 10y ago
    Google sheets uses canvas. The strategy you describe is orthoganal to canvas versus DOM.
    - ic4l 10y ago
      I had to verify this... I cant believe it, they doing all the rendering logic for all the cells in canvas. They are not rendering simple cells either, sheets has may features :O. Testing would be the easy part, in some cases it would be easier than DOM because you can do image diffs... The harder part is BUILDING IT.
audiotalo 10y ago
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 can only see and edit specific fields based on assigned rights.
- rch 10y ago
  > 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 http://element.eleme.io/#/en-US/component/table
  - dman 10y ago
    That looks interesting
- yawgmoth 10y ago
  We use ag-grid, it supports React/Aurelia/Angular, I think they have Vue support as well. The team is really great.
  - ceolter 10y ago
    Niall here from ag-Grid - thanks for the nice words about ag-Grid. Yes we support Angular 1, Angular 2+, React, Aurelia, Vue, Web Components, and just plain JavaScript.
- aargh_aargh 10y ago
  > 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 can only see and edit specific fields based on assigned rights. Take a look at Adminer [1] and their Adminer Editor [2] (the later is what you're asking for). [1] http://adminer.org/ http://adminer.org/ [2] https://www.adminer.org/en/editor/ https://www.adminer.org/en/editor/
frik 10y ago
What do you use for simple HTML tables that need some sorting and paging functionality? There are various old JQuery libs around. Can someone suggest something simple for React and/or vanilla Javascript? (would be interested in both)
acemarke 10y ago
As a general pointer, there's a good categorized list of React components at https://github.com/brillout/awesome-react-components https://github.com/brillout/awesome-react-components , including a number of other table and grid components. Also, https://js.coach 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 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.
ckluis 10y ago
Paid library: https://cxjs.io/ https://cxjs.io/
csours 10y ago
Anytime I see something that looks like Excel on the web, I cringe. Unless you are Microsoft or Google and you are putting spreadsheets on a website (SoW), you are almost certainly doing something wrong. --- Case 1: A co-worker (or yourself) previously wrote an excel-based app and now it's time to put it on the web for wider distribution. You implement the app with a custom gridview/spreadsheet. Error in Case 1: The UI was copied, but what is almost always needed is an input wizard with validations and workflow along with a reporting backend. --- Case 2: You have a database that you need to share in a human readable format. Error in Case 2: Implement export functionality instead, you will never be able to implement all the features of Excel, and at some point someone will need that feature. --- Case 3: You have a very small and well defined case that actually calls for SoW! Error in Case 3: Your very small SoW app will grow and grow and strangle you. --- Case 4: You want to challenge the stranglehold of Google Sheets and MS Office 365. Error in Case 4: There is no error here, only madness.
- josephcooney 10y ago
  Agree. Here is a rant from me expressing the same sentiment from a while ago https://jcooney.net/post/2008/06/08/Data-grids-lack-of-imagination-or-abdication-of-design-responsibility.aspx https://jcooney.net/post/2008/06/08/Data-grids-lack-of-imagi...
  - csours 10y ago
    Yup, you see a very similar pattern with prototype or MVP code. People get fixated on the code or UI in front of them and they don't think about the actual use cases. http://www.snopes.com/weddings/newlywed/secret.asp http://www.snopes.com/weddings/newlywed/secret.asp
  - flukus 10y ago
    I agree in general, datagrids usually mean "we have absolutely no idea what our users workflows are", but I'm not sure the credit risk example is a good one. If the credit risk is one of dozens of fields on a generic client edit table then it's awful. If it's a much more specific "adjust credit risk" form with relevant information to that specific workflow then it's fine.
chrishere 10y ago
Chris Spilka, CEO at Handsontable here. It's great to see that Nadim started to work on this spreadsheet for React. It's for sure an ambitious project and will require a lot of community support and love;) We at Handsontable benefit from the open source since 2012 and most of ~3400 closed issues to date were reported by users who actually care about our product and/or make a good use of it. Here are some thoughts which anyone who attempt to create an online spreadsheet from scratch should take into account: - Separate data logic from the view. Sounds like a cliché but actually it will save you plenty of time when you start adding more and more features to the pile. - Get to know how people want to use your app. Focus on their workflow not on your (false) assumptions. - Don't mix up features typical for grids with those present in spreadsheets. Focus on what's important, not on Excel's blows and whistles. Grouping is OK. Parent-child structure not necessarily. - Don't underestimate the effort connected with building such component. Ask the community for help. Give them a great product in return. - At some point your "data engine" will work just like a small, specialised database (CRUD + search/filter/sort). - Think of how you will scale your solution both horizontally (new technologies) and vertically (new features). Our customers have completely remote requirements in terms of using Handsontable with specific databases, back-ends, JS/CSS frameworks, devices (not to mention different formats of numbers, languages etc.) Offtopic: In the contemporary history we have seen a lot of attempts to make an ultimate online spreadsheet. Most of those projects are now long gone (see https://www.lifewire.com/best-free-online-spreadsheets-3486263 https://www.lifewire.com/best-free-online-spreadsheets-34862...). That was before Google acquired 2Web Technologies and created its own, free solution upon it. The trend is to create spreadsheet-based projects for certain use cases just like Quip, Smartsheet, Airtable and more. Anyway, fingers crossed for your project. I will be happy to share with you our best practices and thoughts from our work with Handsontable (write @ chris [at] handsoncode.net). Cheers, Chris

345 points by nadimisl 10y ago

Looks beautiful!! But, I can just imagine running this one by the patent attorneys as an open source library to include in our product.

hive_mind 10y ago
Why the downvotes? This person is describing a real problem with dealing with staff patent attorneys. This is real life.
- clishem 10y ago
  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.
  - nikcub 10y ago
    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
  - zenlikethat 10y ago
    Since the license of this library is MIT and the poster mentions patent attorneys I'd guess they aren't worried about licensing. They're worried about getting sued by Microsoft, Google, etc. for patent infringement.
    - mason55 10y ago
      Host on Azure and use Microsofts patents against the when they sue you
  - euroclydon 10y ago
    Hi. Certainly, my comment would be applicable to any open source library. But my intent was not to say that OSS software is difficult to get by patent attorneys. Rather I was attempting an inside joke with kindred spirits who have submitted OSS libs to their company's attorneys for patent infringement. What they seem to do is hire a grunt to do a naive word search match on the patent database. So I was saying, "just imagine the number of results that will come back for 'spreadsheet' or 'Excel'".

swah 10y ago

Math.js seems to evaluate using floats, but on your demo the results were always rounded.

captainmuon 10y ago

Nice! Looks really polished! One thing I'm wondering about... if this is React based, do you reassign and recalculate the whole grid upon every change? Because the grid is probably a component, and has the table as props. I could imagine that is inefficient... Not to even speak of then rendering the whole component and sending it through DOM reconciliation every time a key is pressed. Well, OTOH I guess it doesn't matter for small tables. The demo feels really snappy!

ChicagoBoy11 10y ago
Wouldn't it just re-render the cells that changed?
- netzone 10y ago
  Yup, checking the source there's a cell component in addition to the sheet component, so it would just rerender that cell.
prodtorok 10y ago
I've built something similar (and performant) utilizing react-virtualized, Immutable.js, and the star: shouldComponentUpdate https://bvaughn.github.io/react-virtualized/#/components/Grid https://bvaughn.github.io/react-virtualized/#/components/Gri...
nadimisl 10y ago
It calculates the top level grid component but does not render the cell if it's the same cell object :).
huherto 10y ago
Back in the day I did a perl spread sheet. I was only updating the cells that were displayed at the moment. There were also transitive recalcs too if a displayed cell depended on other cells.

osullivj 10y ago

Very slick looking! Currently I'm using Angular 1.x with editablegrid to enable browser edits on server hosted spreadsheets [1]. The UX quality of this makes me think I should go for a rewrite in React. [1] spreadserve.com

gressquel 10y ago

the design looks really great, wish it was non-react, anything.

uptown 10y ago

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've got Redux working, I feel working with it is definitely adding cognitive load to each feature I implement. Just wondering whether it's worth the effort and would appreciate feedback from those who may have more experience weighing the pros and cons of using Redux with their application.

Etheryte 10y ago
It's important to remember that not all of your state needs to be in Redux. Redux is supposed to supplement local state, not replace it. Create namespaces in your store, it helps a ton with maintainability in the long run. Name your mutations consistently: describe what you're doing to what kind of data as briefly as you can. Keeping these few guidelines in mind, building huge applications using any flux-like pattern is quite straight-forward and easy to reason about.
lpa22 10y ago
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 together are a pleasure to develop with.
- rattray 10y ago
  How does https://github.com/kolodny/immutability-helper 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?)

fiatjaf 10y ago

This covers 80% of Excel uses, but the rest 20% would take 1000% of the time to implement.

clishem 10y ago
Just some basic functionality that is used when making nearly all spreadsheets: dynamically resizing tables, formating cells, setting cell types (currency, floating point, integer, boolean), conditional formatting, cell ranges, SUM, COUNT, IF, AVG, extending cell contents by dragging. This project is a proof-of-concept. Nothing more than that.

hultner 10y ago

Any data on how this performs on large datasets? I've previously found that most web based data grids get extremely slow on larger data sets in BI applications (100k+ rows)

nadimisl 10y ago
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
- shaneos 10y ago
  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?
  - nadimisl 10y ago
    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.

misiti3780 10y ago

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 sourcing it soon.

deleted 10y ago
[deleted]
tlrobinson 10y ago
React Virtualized is also great: http://www.reactvirtualized.com 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/ScrollSync https://bvaughn.github.io/react-virtualized/#/components/Scr...) FixedDataTable has performance issues with a larger number of columns because it doesn't "virtualize" columns (https://github.com/facebook/fixed-data-table/issues/49 https://github.com/facebook/fixed-data-table/issues/49). The DOM it generates is also much heavier (several elements for every cell vs. 1 with React Virtualized)
- misiti3780 10y ago
  Hi, Thanks for the response. My team fixed those performance issues in the source. It is one of the reasons we want to open source it.
- kevinwuhoo 10y ago
  +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/MultiGrid https://bvaughn.github.io/react-virtualized/#/components/Mul... [2]: https://github.com/bvaughn/react-virtualized/blob/master/CHANGELOG.md#890 https://github.com/bvaughn/react-virtualized/blob/master/CHA...

matthuggins 10y ago

Looks nice, but the keyboard doesn't come up on mobile (Android), so all the demos are unfortunately read-only.

helb 10y ago
https://github.com/nadbm/react-datasheet/issues/5 https://github.com/nadbm/react-datasheet/issues/5 (basically "Touch/Mobile Support?" –– "Not at the moment.")

sandGorgon 10y ago

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.

degenerate 10y ago
Link for others: https://handsontable.com/examples.html https://handsontable.com/examples.html It's too expensive IMO. But if you are not using it commercially, it's on Github.
- dublinben 10y ago
  You can use the open source version commercially as well, since it is MIT licensed.
- sandGorgon 10y ago
  no - i dont believe its too expensive. the devs are fairly responsive. The thing is, it carries too much baggage. It took them many months to even put it on npm. Adding features takes a lot of effort. Its 149$ for a year - its not at all bad and I love supporting them. But there's space to innovate - look at Airtable. I would love to have a component that looks like Airtable frontend.
- teh_klev 10y ago
  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.
rudiger 10y ago
What's wrong with Handsontable? It looks pretty good to me.
- deleted 10y ago

georgewfraser 10y ago

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.

miralabs 10y ago
canvas would be a pain to have automated test. https://github.com/openfin/fin-hypergrid/issues/540 https://github.com/openfin/fin-hypergrid/issues/540
- wdfx 10y ago
  even with sikulix ?
- djfumberger 10y ago
  Maybe that's the compromise for a good user experience?
toomim 10y ago
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.
- cloverich 10y ago
  This is "virtualized" views; other comments in this thread link to some relevant projects!
- georgewfraser 10y ago
  Google sheets uses canvas. The strategy you describe is orthoganal to canvas versus DOM.
  - ic4l 10y ago
    I had to verify this... I cant believe it, they doing all the rendering logic for all the cells in canvas. They are not rendering simple cells either, sheets has may features :O. Testing would be the easy part, in some cases it would be easier than DOM because you can do image diffs... The harder part is BUILDING IT.

audiotalo 10y ago

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 can only see and edit specific fields based on assigned rights.

rch 10y ago
> 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 http://element.eleme.io/#/en-US/component/table
- dman 10y ago
  That looks interesting
yawgmoth 10y ago
We use ag-grid, it supports React/Aurelia/Angular, I think they have Vue support as well. The team is really great.
- ceolter 10y ago
  Niall here from ag-Grid - thanks for the nice words about ag-Grid. Yes we support Angular 1, Angular 2+, React, Aurelia, Vue, Web Components, and just plain JavaScript.
aargh_aargh 10y ago
> 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 can only see and edit specific fields based on assigned rights. Take a look at Adminer [1] and their Adminer Editor [2] (the later is what you're asking for). [1] http://adminer.org/ http://adminer.org/ [2] https://www.adminer.org/en/editor/ https://www.adminer.org/en/editor/

frik 10y ago

What do you use for simple HTML tables that need some sorting and paging functionality? There are various old JQuery libs around. Can someone suggest something simple for React and/or vanilla Javascript? (would be interested in both)

acemarke 10y ago

As a general pointer, there's a good categorized list of React components at https://github.com/brillout/awesome-react-components https://github.com/brillout/awesome-react-components , including a number of other table and grid components. Also, https://js.coach 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 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.

ckluis 10y ago

Paid library: https://cxjs.io/ https://cxjs.io/

csours 10y ago

Anytime I see something that looks like Excel on the web, I cringe. Unless you are Microsoft or Google and you are putting spreadsheets on a website (SoW), you are almost certainly doing something wrong. --- Case 1: A co-worker (or yourself) previously wrote an excel-based app and now it's time to put it on the web for wider distribution. You implement the app with a custom gridview/spreadsheet. Error in Case 1: The UI was copied, but what is almost always needed is an input wizard with validations and workflow along with a reporting backend. --- Case 2: You have a database that you need to share in a human readable format. Error in Case 2: Implement export functionality instead, you will never be able to implement all the features of Excel, and at some point someone will need that feature. --- Case 3: You have a very small and well defined case that actually calls for SoW! Error in Case 3: Your very small SoW app will grow and grow and strangle you. --- Case 4: You want to challenge the stranglehold of Google Sheets and MS Office 365. Error in Case 4: There is no error here, only madness.

josephcooney 10y ago
Agree. Here is a rant from me expressing the same sentiment from a while ago https://jcooney.net/post/2008/06/08/Data-grids-lack-of-imagination-or-abdication-of-design-responsibility.aspx https://jcooney.net/post/2008/06/08/Data-grids-lack-of-imagi...
- csours 10y ago
  Yup, you see a very similar pattern with prototype or MVP code. People get fixated on the code or UI in front of them and they don't think about the actual use cases. http://www.snopes.com/weddings/newlywed/secret.asp http://www.snopes.com/weddings/newlywed/secret.asp
- flukus 10y ago
  I agree in general, datagrids usually mean "we have absolutely no idea what our users workflows are", but I'm not sure the credit risk example is a good one. If the credit risk is one of dozens of fields on a generic client edit table then it's awful. If it's a much more specific "adjust credit risk" form with relevant information to that specific workflow then it's fine.

chrishere 10y ago

Chris Spilka, CEO at Handsontable here. It's great to see that Nadim started to work on this spreadsheet for React. It's for sure an ambitious project and will require a lot of community support and love;) We at Handsontable benefit from the open source since 2012 and most of ~3400 closed issues to date were reported by users who actually care about our product and/or make a good use of it. Here are some thoughts which anyone who attempt to create an online spreadsheet from scratch should take into account: - Separate data logic from the view. Sounds like a cliché but actually it will save you plenty of time when you start adding more and more features to the pile. - Get to know how people want to use your app. Focus on their workflow not on your (false) assumptions. - Don't mix up features typical for grids with those present in spreadsheets. Focus on what's important, not on Excel's blows and whistles. Grouping is OK. Parent-child structure not necessarily. - Don't underestimate the effort connected with building such component. Ask the community for help. Give them a great product in return. - At some point your "data engine" will work just like a small, specialised database (CRUD + search/filter/sort). - Think of how you will scale your solution both horizontally (new technologies) and vertically (new features). Our customers have completely remote requirements in terms of using Handsontable with specific databases, back-ends, JS/CSS frameworks, devices (not to mention different formats of numbers, languages etc.) Offtopic: In the contemporary history we have seen a lot of attempts to make an ultimate online spreadsheet. Most of those projects are now long gone (see https://www.lifewire.com/best-free-online-spreadsheets-3486263 https://www.lifewire.com/best-free-online-spreadsheets-34862...). That was before Google acquired 2Web Technologies and created its own, free solution upon it. The trend is to create spreadsheet-based projects for certain use cases just like Quip, Smartsheet, Airtable and more. Anyway, fingers crossed for your project. I will be happy to share with you our best practices and thoughts from our work with Handsontable (write @ chris [at] handsoncode.net). Cheers, Chris