17 ms·

Show HN: Datagridxl2.js – Fast Excel-like data table library

301 points by robbiejs 5y ago

I'm Robbert, the creator of DataGridXL.js. Last month I released version 2 which includes many new features. DataGridXL is a free (and commercial) editable data table library written in ES6. My goal is to develop the most performant & user-friendly spreadsheet-like data table out there: - It has zero dependencies. You don’t need any framework to use DataGridXL. - It is lightweight (~250kb) and easy to use. It does not even require messing with CSS. - It has its own Virtual DOM implementation to prevent DOM errors. - Developer friendly. Supports all modern web browsers Please take a look at the performance demo (https://www.datagridxl.com/demos/one-million-cells https://www.datagridxl.com/demos/one-million-cells) to see the difference with other data grids out there. And let us know if you have any suggestions. Please let me know if you have any suggestions or comments!

mclbdn 5y ago
How long did it take you to build OP? I love the simple design, just one thing: consider adding to #header .menu-btn:checked ~ .nav larger max-width and some margin to .buyMenuOption, since .buyMenuOption button gets covered by the .nav div on smaller screens: https://i.imgflip.com/6c1c7a.jpg https://i.imgflip.com/6c1c7a.jpg
TIPSIO 5y ago
Hey Robbert, just want to say congrats on this! This is excellent work and really thoughtful / detailed. I'll definitely be using on a project soon. Really love the elegant docs and the API.
- robbiejs 5y ago
  Thank you! Appreciate it very much! Let me know what you're working on when you get to it! robbert at datagridxl.com
bklyn11201 5y ago
The performance here is amazing. Well done! I'm desperately searching for a way to replace old Handsontable (before they closed source), but the license here for DataGrid XL makes it impossible to easily bring into a large FOSS project. Some ideas for licensing: dual license MIT and commercial. Feed advanced features and support into the commercial while keeping the MIT version fast, performant, extendable.
- eitland 5y ago
  I think it was handsontable I burned myself on: got client to sponsor/pay for support for a nice open source tool and shortly after they went closed source. Same with caddy, except that time it was my money. Some times I wonder if I should avoid giving money to open source projects because it seems to trigger the idea that one can make a whole lot of more money by selling out.
  - mholt 5y ago
    What? Caddy has always been Apache-licensed, open source. And that's thanks to sponsorships which make it possible.
    - eitland 4y ago
      Maybe Caddy was technically Apache licensed the whole time but it sure didn't feel like. And I have a hard time believing that feeling was not intentional.
  - chearon 5y ago
    You can still browse the source on GitHub though. I don't mind them trying to make more money so much. What I don't like is that we have 3 bugs open, one of them 3 years old, that aren't getting fixed. And paying for a license didn't give us any additional priority. It's also not very performant. Rendering often forces multiple style/layout recalculations, which is nearly always solvable by having your rendering code better organized. Version 8, when they rewrote cell meta, caused certain cell meta APIs we were calling to take _seconds_ on large tables. Version 9 did not document that the "beforeManualColumnMove" changed the meaning of the indices from "before columns" to "after columns". Undo/redo is implemented incorrectly too, so we had to write that ourselves. These caused real problems that affected our users. As soon as we get the capacity to switch to something like Datagridxl2 we will.
  - TAForObvReasons 5y ago
    Handsontable made at least $1.5M https://www.indiehackers.com/post/how-to-earn-1-5m-in-revenue-from-a-javascript-component-a4703705b5 https://www.indiehackers.com/post/how-to-earn-1-5m-in-revenu... . Whether that's "a whole lot" is questionable.
george_ciobanu 5y ago
Wonderful work! If you think your table is the best, as someone who is pondering buying it, you'd save me some time if you had a quick comparison matrix with your main competitors. It seems counterintuitive to provide that but most people will do the research anyway so you're just saving them some time searching and cataloguing alternatives.
- robbiejs 5y ago
  Thank you. I did have an article on the site that compared DataGridXL with Handsontable, but we had to take it offline since HoT lawyers were not happy with it (you can read a discussion about that here: https://news.ycombinator.com/item?id=30503983 https://news.ycombinator.com/item?id=30503983). Anyway, it's a good idea. I will create one with Handsontable, Ag-grid, anything else?
- cupofpython 5y ago
  >most people will do the research anyway eh, most people will prefer the first product they see - so by the time they get to competitor X, they just dont have the energy to do a full sweep of details. Especially if the first one had everything they were looking for and after a couple other searches their pricing doesnt seem unreasonable either
- jassmith87 5y ago
  You might enjoy this site: https://jsgrids.statico.io/ https://jsgrids.statico.io/
a9h74j 5y ago
I'm impressed by the lack of dependencies and single-file download. One of my use-cases is for offline use, and not via a web app installation -- only assets in an ordinary filesystem directory. Mega-components in single js files are a good step towards that.
- nawgz 5y ago
  > not via a web app installation -- only assets in an ordinary filesystem directory Not sure I understand this. Every web app I build is just a set of HTML/CSS/JS files that are served in a static fashion, which means that you could just plop that static folder onto your hard drive, click "index.html", and interact with it normally. I guess routing concerns maybe exist if you just naively hope the URL-based-routing works but it'd be easy to work around this
  - a9h74j 5y ago
    Perhaps I was attempting to refer to progressive web apps, with manifests and such.
- robbiejs 5y ago
  Thank you. Wanted to keep it simple and lightweight. Not the biggest fan of an average React/Angular project with 200mb+ of dependencies.
boundlessdreamz 5y ago
How does it compare with https://grid.glideapps.com/ https://grid.glideapps.com/ ?
- anewhnaccount2 5y ago
  Looks quite similar to me. Both are using canvas (combined with off screen rendering?) under the covers which seems to be key to achieving this level of performance.
  - timkpaine 5y ago
    No reason to sacrifice accessibility and styling in the name of performance: https://github.com/jpmorganchase/regular-table https://github.com/jpmorganchase/regular-table
    - noduerme 5y ago
      Funny. I just rolled my own datagrid for a portion of a larger application that already uses DataTables for various stuff. I wanted something that acted like this, was fast and allowed for easier row and column styling (including in the data itself). Also, faster and more flexible animated resizing. I ended up using CSS grid divs and without any virtualization on my part, they're shockingly performant. Both Chrome and FF easily handle 1m cels which is more than my use case will ever need. They're really quick at blitting just the necessary cells, making it wayyy smoother than DataTables in virtual mode. And anything on an actual canvas tag...? forget about it.
    - jassmith87 5y ago
      Glide Data Grid has a fully accessible DOM subtree. No need to sacrifice accessibility just to use a canvas. Come on, its 2022 we have the tools. What makes Canvas even nicer is I can export a subdom that is bespoke for screen readers. It is exactly what the screen readers want, nothing more, nothing less. It works wonderfully. Disclosure: I am the primary developer of Glide Data Grid.
  - robbiejs 5y ago
ale42 5y ago
Very nice! Just, I'm not sure that users who stick to Excel despite a web app do so just because of Excel's interface... sometimes it is because it is much easier to work with files than with web sites. And sometimes the way to get to the web app is the thing destroying the UX (slowly responding servers, weird login processes, etc.)
- robbiejs 5y ago
  Ah yes I see what you mean. I used to work for a fintech startup and our sales team had a hard time finding customers for the product that we're building. These customers were impressed by the web app that we've made, but "we don't see a reason to use your products, we are used to Excel and we like Excel". So we decided to create a page in our web app that looked like Excel. I initially used Handsontable for this page. I was so disappointed with its performance and its reliability, that I decided to create DataGridXL. Anyway, that's the story and that's where the "slogan" comes from :-)
  - ale42 5y ago
    Thanks for sharing this :)
miki_tyler 5y ago
Congrats, it looks amazing! Does it support formulas?
- robbiejs 5y ago
  Hi. An early build did, but I decided to leave out the feature as there is much more to it than I thought. Perhaps in the future, 2023 or 2024 stuff.
bob1029 5y ago
This caught my eye. We are in the market for a high-quality gridview component that would allow for in-line edits. We also looked at CSV in/out, but having something integrated could be better. The UX would have to be on-par with excel and this seems close. My biggest question right now: What does integration of Datagridxl2 look like when operating with a Blazor Server app? Should I just expect some basic JS interop when building a wrapper for the component?
- robbiejs 5y ago
  I do not know anything about Blazor Server app or how it works. DataGridXL is all about client-side interaction: mouse events, touch events, keyboard events etc, as such it cannot function on a server alone, if that is what you mean.
d0100 5y ago
Is it as fast as the demo with custom cell renderers?
- robbiejs 5y ago
  Hi, we have not implemented custom cell renderers yet. Also, for performance sake, we decided not to render HTML in cells. So not sure if DataGridXL can offer you the things you're looking for at this time.
whalesalad 5y ago
Been using AgGrid but looking for a replacement. I tried to load a CSV of 100k items here and got a "RangeError: Maximum call stack size exceeded." https://www.datagridxl.com/demos/import-csv-data https://www.datagridxl.com/demos/import-csv-data
- aquark 5y ago
  What is motivating you to look for a replacement? We are evaluating grids and AgGrid is the front runner currently though really rather heavyweight for our use cases.
  - whalesalad 5y ago
    All things considered it’s great software but yes it can be kinda heavyweight at times.
    - jassmith87 5y ago
      Would you mind taking a look at grid.glideapps.com and letting me know if/where it doesn't work for you? We are always looking for feedback. Development is done entirely in the open, feel free to just file issues and open discussions on github.
      - yawnxyz 5y ago
        would be so awesome if Glide was easy to package into a Svelte project!!
- shaicoleman 5y ago
  AG Grid should be able to handle more than that: https://www.ag-grid.com/javascript-data-grid/massive-row-count/ https://www.ag-grid.com/javascript-data-grid/massive-row-cou...
- robbiejs 5y ago
  I haven't tried using DataGridXL with a file with that many records. There is a chance that the DOM node that is used for scroll-listening grows too large and browsers cannot handle that. I suspect that is where the error comes from. However, I will add this to our list of issues, see where the error really comes from and where I can improve it (https://github.com/DataGridXL/DataGridXL2/issues/31 https://github.com/DataGridXL/DataGridXL2/issues/31). For now, I would say 10,000 records max to be sure.
jefc1111 5y ago
Can't see any mention of multisort. Does it have multisort? Great look and feel!
- robbiejs 5y ago
  For now it's single column sort but I plan on adding multi sort soon, don't have a specific date for it yet, but possibly q2 or q3.
carreau 5y ago
One million cell made me though of https://lumino.readthedocs.io/en/latest/examples/datagrid/index.html https://lumino.readthedocs.io/en/latest/examples/datagrid/in... that has a "trillion" cell demo :-) All the best.
- timkpaine 5y ago
  With a virtual data model it doesn't really matter, here's our 2 trillion cell model https://bl.ocks.org/texodus/483a42e7b877043714e18bea6872b039 https://bl.ocks.org/texodus/483a42e7b877043714e18bea6872b039
- Existenceblinks 5y ago
  I wonder if this kind of ux is just for fun, like let me scroll through and have no actual sense of data. At the end of the day, finding something is via search and filter.
Existenceblinks 5y ago
One feedback, undo is currently slow even if I just want to undo 5 cells of data.
- robbiejs 5y ago
  Can you tell me what webpage you're on (and your device+browser). Undoing should happen instantly.
  - Existenceblinks 5y ago
    Default Grid, filled all 9 cells, and hold undo until all clear. I'm on Firefox 99.0b8 (64-bit), 4 GB RAM. I said it's slow but it's not really, it's like 200ms lagging for each undo.
    - robbiejs 5y ago
      I will look into it, thanks for letting me know. Have you tried Instead of holding undo, try to press it once?
joshuajomiller 5y ago
-"You've built a web app, but your users stick to Excel" I feel that if your users are not using your web app, it's not because they miss the (dated, not exactly intuitive) Excel interface. Seems to me like the wrong solution for the problem
- deleted 5y ago
  [deleted]
- robbiejs 5y ago
  For a fintech startup I was working for, that was the feedback our sales team got. "We like the product and it looks impressive, but we're used to Excel and we like to use Excel". So that's when we decided to add a page in our web app that had an Excel-look. That did not change things, the product vision was wrong, just like you said. But I can imagine that more web app producers get exactly this feedback from their prospects.
- barnabee 5y ago
  I miss many things about the Excel interface in early every web app: - editing many records as a table - formulae for calculating values - ability to paste from other tables or Excel sheets - information density! - arbitrary sort and filter - hiding and rearranging columns - etc… Every app with search, including search engines themselves, and most with data entry should have an Excel-like, table based interface. GitHub discovered this (just look at their new projects) and most data focused apps are no exception either. Terminal utilities, Python scripting, and JSON are sometimes as good or better, but more often a poor second place.
wittjeff 5y ago
Accessibility is a strong gating factor for some (including me). I don't see it in the docs. The whole thing seems to be missing any ARIA (see https://www.w3.org/TR/wai-aria-practices/examples/grid/dataGrids.html https://www.w3.org/TR/wai-aria-practices/examples/grid/dataG...) Let me know if you want help.
- jimmygrapes 5y ago
  Do you happen to know of best practices for simulating different disabilities, or some recording of somebody actually using some example well-designed accessible software? A video recording, to me as somebody who can see and hear and move just fine (for now), would help me understand what interaction methods don't work or are a struggle, which interaction methods are intuitive and effective, and which types of content are not recognized, not presented, or not important.
  - pacoWebConsult 5y ago
    Lighthouse [1][2] Accessibility audit/ scores can be a good tool to check A11Y issues automatically, and it is fairly easy to integrate into your CI/CD Pipelines to get the report automatically to check for issues/ regression. The web accessibility world is complex enough that simulating different methods of access like using screen readers or different font-sizes and doing manual tests for compliance is not particularly feasible if you want to make your content accessible to all. [1] https://developers.google.com/web/tools/lighthouse https://developers.google.com/web/tools/lighthouse [2] https://web.dev/accessibility-scoring/ https://web.dev/accessibility-scoring/
    - MaxLeiter 5y ago
      I disagree. Automated results are not perfect and miss a lot of nuances, like element ordering, tab indexing, etc. Assuming you can’t find someone experienced with a screen reader to test I would invest in learning how to use one yourself. I’ve spent days without access to my screen in order to grow more comfortable navigating with audio. Of course, I won’t be as helpful or quick as someone who’s used a screen reader for years, but it’s better than blindly trusting lighthouse/web.dev
deleted 5y ago
[deleted]
toastercat 5y ago
What's a good FOSS alternative to this for non-commercial projects? I'd like to have a spreadsheet on my site for personal use.
- spacemanmatt 5y ago
  AG Grid, SheetJS both have decent community editions.
- ndrsn 5y ago
  I'm biased because I'm the maintainer, but canvas-datagrid is a, uh, canvas-based datagrid (https://github.com/TonyGermaneri/canvas-datagrid https://github.com/TonyGermaneri/canvas-datagrid), which can easily handle millions of rows. It's FOSS, and although in need of improvement (and better type annotations), it's well-documented (https://canvas-datagrid.js.org/ https://canvas-datagrid.js.org/) and actively maintained.
- tunesmith 5y ago
  FWIW, I went through a bunch of these libraries recently for a personal-site spreadsheet as a react component. All I wanted was a grid where each cell was a calculation based on the combination of its row/column header values. I kept running into the problem where the data grid library gave me 90% of what I needed, a different 90% each time. What actually ended up working perfectly for me was react-table and just using hooks to do the formula calculations.
- jassmith87 5y ago
  I maintain https://grid.glideapps.com https://grid.glideapps.com if you're looking for something ludicrously fast.
  - robbiejs 5y ago
    I have noticed your product before, very well done!
    - jassmith87 5y ago
shafyy 5y ago
Looks interesting. I've just been looking at a couple of alternatives to this. We're adding a CSV import feature for our store finder, and the idea is to provide a spreadsheet-like interface where you can just copy and paste your location data instead of uploading a CSV where you need to deal with different delimiters and getting the column orders right etc.
- mritchie712 5y ago
  You might be better off with something like https://csvbox.io/ https://csvbox.io/
  - shafyy 5y ago
    Interesting, thanks for sharing!
- oneweekwonder 5y ago
  If your up for jQuery-ui see SlickGrid examples[0] especially "Spreadsheet: features of the previous example but using a DataView"[1]. [0]: https://github.com/6pac/SlickGrid/wiki/Examples https://github.com/6pac/SlickGrid/wiki/Examples [1]: http://6pac.github.io/SlickGrid/examples/example-spreadsheet.html http://6pac.github.io/SlickGrid/examples/example-spreadsheet...
  - shafyy 5y ago
    Cool, thanks for sharing!
snird 5y ago
Congrats on the release. For those looking for a FOSS alternative, I haven't seen mentioned here yet Toast UI Grid - TUI-grid: https://ui.toast.com/tui-grid https://ui.toast.com/tui-grid I've been using it for over a year and it works perfectly.
la64710 5y ago
Please point out wether it is free or commercial in your announcements : https://www.datagridxl.com/buy https://www.datagridxl.com/buy
- tyingq 5y ago
  https://github.com/DataGridXL/DataGridXL2/blob/master/LICENSE https://github.com/DataGridXL/DataGridXL2/blob/master/LICENS... Free if you don't disable the branding link.
ramesh31 5y ago
>You don’t need any framework to use DataGridXL. - It is lightweight (~250kb) and easy to use I'm not so sure 250k qualifies as lightweight by any definition. That's a pretty high target even for total bundle size. React, for example, is ~6k.
- robbiejs 5y ago
  Okay, gotcha. Maybe I should mentiod that it is lightweight compared to other options. Handonsontable is a terribe 1.5MB. I imagine Ag-grid is close to 1MB as well.
xlpowerup 5y ago
This look really good. Can it be used as a front end with say C++/C# etc to replace Excel COM interop?
- robbiejs 5y ago
  No it's not a replacement for Excel and its huge set of features, instead it implements an Excel-like interface to edit csv, json or js array data. No formulas, pivot tables, merged cells.
cyanydeez 5y ago
I think you're half way to why users stick to excel. Without the calculator aspect it not really an excel clone.
- robbiejs 5y ago
  The catch phrase on the homepage gives the wrong impression I believe. Thanks for pointing that out. I am not trying to create an Excel clone, but rather an editable data table with Excel like controls and interface.
joshxyz 5y ago
How does it compare to sheetjs?
elwell 5y ago
Is there anywhere to view original (not minified) source?
mollerhoj 5y ago
I'm looking for a version of the is that supports pagination from a db backend so you don't have to load all the data to the frontend at once. I need a read only spreadsheet with lots of data. Does anybody have any suggestions?
meekaaku 5y ago
This looks very nice! I am looking for a spreadsheet like component for a project I am working on. Had evaluated jspreadsheet before. Question I have is, how would one go about integrating formulas and references? The demo doesnt seem to support that.
- robbiejs 5y ago
  Hi, I am not sure if the product will support formulas. I 'll let it depend on popular demand. For now, DataGridXL does not support it.
ashitlerferad 5y ago
I would like to invite you to share Datagridxl here: https://forums.haydenjames.io/c/showcase/21 https://forums.haydenjames.io/c/showcase/21 (will be suggested to subscribers)
polskibus 5y ago
Have you considered writing the component using canvas? The fastest full featured grids I encountered, incl. google sheets, are based on canvas.
- robbiejs 5y ago
  Yes I have considered canvas. Parts of the grid are canvas (cell background colors). I chose DOM for a bunch or reasons: natural font scaling was a big thing (easy on the eyes even if zoomed in all the way) and another big thing was that working with canvas was difficult for me, even workin with a canvas you would have to apply lots of tricks in order to get the performance.
  - robbiejs 5y ago
    I do believe my DOM approach is faster. The rendering is a faster than Google Sheets.

301 points by robbiejs 5y ago

mclbdn 5y ago

How long did it take you to build OP? I love the simple design, just one thing: consider adding to #header .menu-btn:checked ~ .nav larger max-width and some margin to .buyMenuOption, since .buyMenuOption button gets covered by the .nav div on smaller screens: https://i.imgflip.com/6c1c7a.jpg https://i.imgflip.com/6c1c7a.jpg

TIPSIO 5y ago

Hey Robbert, just want to say congrats on this! This is excellent work and really thoughtful / detailed. I'll definitely be using on a project soon. Really love the elegant docs and the API.

robbiejs 5y ago
Thank you! Appreciate it very much! Let me know what you're working on when you get to it! robbert at datagridxl.com

bklyn11201 5y ago

The performance here is amazing. Well done! I'm desperately searching for a way to replace old Handsontable (before they closed source), but the license here for DataGrid XL makes it impossible to easily bring into a large FOSS project. Some ideas for licensing: dual license MIT and commercial. Feed advanced features and support into the commercial while keeping the MIT version fast, performant, extendable.

eitland 5y ago
I think it was handsontable I burned myself on: got client to sponsor/pay for support for a nice open source tool and shortly after they went closed source. Same with caddy, except that time it was my money. Some times I wonder if I should avoid giving money to open source projects because it seems to trigger the idea that one can make a whole lot of more money by selling out.
- mholt 5y ago
  What? Caddy has always been Apache-licensed, open source. And that's thanks to sponsorships which make it possible.
  - eitland 4y ago
    Maybe Caddy was technically Apache licensed the whole time but it sure didn't feel like. And I have a hard time believing that feeling was not intentional.
- chearon 5y ago
  You can still browse the source on GitHub though. I don't mind them trying to make more money so much. What I don't like is that we have 3 bugs open, one of them 3 years old, that aren't getting fixed. And paying for a license didn't give us any additional priority. It's also not very performant. Rendering often forces multiple style/layout recalculations, which is nearly always solvable by having your rendering code better organized. Version 8, when they rewrote cell meta, caused certain cell meta APIs we were calling to take _seconds_ on large tables. Version 9 did not document that the "beforeManualColumnMove" changed the meaning of the indices from "before columns" to "after columns". Undo/redo is implemented incorrectly too, so we had to write that ourselves. These caused real problems that affected our users. As soon as we get the capacity to switch to something like Datagridxl2 we will.
- TAForObvReasons 5y ago
  Handsontable made at least $1.5M https://www.indiehackers.com/post/how-to-earn-1-5m-in-revenue-from-a-javascript-component-a4703705b5 https://www.indiehackers.com/post/how-to-earn-1-5m-in-revenu... . Whether that's "a whole lot" is questionable.

george_ciobanu 5y ago

Wonderful work! If you think your table is the best, as someone who is pondering buying it, you'd save me some time if you had a quick comparison matrix with your main competitors. It seems counterintuitive to provide that but most people will do the research anyway so you're just saving them some time searching and cataloguing alternatives.

robbiejs 5y ago
Thank you. I did have an article on the site that compared DataGridXL with Handsontable, but we had to take it offline since HoT lawyers were not happy with it (you can read a discussion about that here: https://news.ycombinator.com/item?id=30503983 https://news.ycombinator.com/item?id=30503983). Anyway, it's a good idea. I will create one with Handsontable, Ag-grid, anything else?
cupofpython 5y ago
>most people will do the research anyway eh, most people will prefer the first product they see - so by the time they get to competitor X, they just dont have the energy to do a full sweep of details. Especially if the first one had everything they were looking for and after a couple other searches their pricing doesnt seem unreasonable either
jassmith87 5y ago
You might enjoy this site: https://jsgrids.statico.io/ https://jsgrids.statico.io/

a9h74j 5y ago

I'm impressed by the lack of dependencies and single-file download. One of my use-cases is for offline use, and not via a web app installation -- only assets in an ordinary filesystem directory. Mega-components in single js files are a good step towards that.

nawgz 5y ago
> not via a web app installation -- only assets in an ordinary filesystem directory Not sure I understand this. Every web app I build is just a set of HTML/CSS/JS files that are served in a static fashion, which means that you could just plop that static folder onto your hard drive, click "index.html", and interact with it normally. I guess routing concerns maybe exist if you just naively hope the URL-based-routing works but it'd be easy to work around this
- a9h74j 5y ago
  Perhaps I was attempting to refer to progressive web apps, with manifests and such.
robbiejs 5y ago
Thank you. Wanted to keep it simple and lightweight. Not the biggest fan of an average React/Angular project with 200mb+ of dependencies.

boundlessdreamz 5y ago

How does it compare with https://grid.glideapps.com/ https://grid.glideapps.com/ ?

anewhnaccount2 5y ago
Looks quite similar to me. Both are using canvas (combined with off screen rendering?) under the covers which seems to be key to achieving this level of performance.
- timkpaine 5y ago
  No reason to sacrifice accessibility and styling in the name of performance: https://github.com/jpmorganchase/regular-table https://github.com/jpmorganchase/regular-table
  - noduerme 5y ago
    Funny. I just rolled my own datagrid for a portion of a larger application that already uses DataTables for various stuff. I wanted something that acted like this, was fast and allowed for easier row and column styling (including in the data itself). Also, faster and more flexible animated resizing. I ended up using CSS grid divs and without any virtualization on my part, they're shockingly performant. Both Chrome and FF easily handle 1m cels which is more than my use case will ever need. They're really quick at blitting just the necessary cells, making it wayyy smoother than DataTables in virtual mode. And anything on an actual canvas tag...? forget about it.
  - jassmith87 5y ago
    Glide Data Grid has a fully accessible DOM subtree. No need to sacrifice accessibility just to use a canvas. Come on, its 2022 we have the tools. What makes Canvas even nicer is I can export a subdom that is bespoke for screen readers. It is exactly what the screen readers want, nothing more, nothing less. It works wonderfully. Disclosure: I am the primary developer of Glide Data Grid.
- robbiejs 5y ago

ale42 5y ago

Very nice! Just, I'm not sure that users who stick to Excel despite a web app do so just because of Excel's interface... sometimes it is because it is much easier to work with files than with web sites. And sometimes the way to get to the web app is the thing destroying the UX (slowly responding servers, weird login processes, etc.)

robbiejs 5y ago
Ah yes I see what you mean. I used to work for a fintech startup and our sales team had a hard time finding customers for the product that we're building. These customers were impressed by the web app that we've made, but "we don't see a reason to use your products, we are used to Excel and we like Excel". So we decided to create a page in our web app that looked like Excel. I initially used Handsontable for this page. I was so disappointed with its performance and its reliability, that I decided to create DataGridXL. Anyway, that's the story and that's where the "slogan" comes from :-)
- ale42 5y ago
  Thanks for sharing this :)

miki_tyler 5y ago

Congrats, it looks amazing! Does it support formulas?

robbiejs 5y ago
Hi. An early build did, but I decided to leave out the feature as there is much more to it than I thought. Perhaps in the future, 2023 or 2024 stuff.

bob1029 5y ago

This caught my eye. We are in the market for a high-quality gridview component that would allow for in-line edits. We also looked at CSV in/out, but having something integrated could be better. The UX would have to be on-par with excel and this seems close. My biggest question right now: What does integration of Datagridxl2 look like when operating with a Blazor Server app? Should I just expect some basic JS interop when building a wrapper for the component?

robbiejs 5y ago
I do not know anything about Blazor Server app or how it works. DataGridXL is all about client-side interaction: mouse events, touch events, keyboard events etc, as such it cannot function on a server alone, if that is what you mean.

d0100 5y ago

Is it as fast as the demo with custom cell renderers?

robbiejs 5y ago
Hi, we have not implemented custom cell renderers yet. Also, for performance sake, we decided not to render HTML in cells. So not sure if DataGridXL can offer you the things you're looking for at this time.

whalesalad 5y ago

Been using AgGrid but looking for a replacement. I tried to load a CSV of 100k items here and got a "RangeError: Maximum call stack size exceeded." https://www.datagridxl.com/demos/import-csv-data https://www.datagridxl.com/demos/import-csv-data

aquark 5y ago
What is motivating you to look for a replacement? We are evaluating grids and AgGrid is the front runner currently though really rather heavyweight for our use cases.
- whalesalad 5y ago
  All things considered it’s great software but yes it can be kinda heavyweight at times.
  - jassmith87 5y ago
    Would you mind taking a look at grid.glideapps.com and letting me know if/where it doesn't work for you? We are always looking for feedback. Development is done entirely in the open, feel free to just file issues and open discussions on github.
    - yawnxyz 5y ago
      would be so awesome if Glide was easy to package into a Svelte project!!
shaicoleman 5y ago
AG Grid should be able to handle more than that: https://www.ag-grid.com/javascript-data-grid/massive-row-count/ https://www.ag-grid.com/javascript-data-grid/massive-row-cou...
robbiejs 5y ago
I haven't tried using DataGridXL with a file with that many records. There is a chance that the DOM node that is used for scroll-listening grows too large and browsers cannot handle that. I suspect that is where the error comes from. However, I will add this to our list of issues, see where the error really comes from and where I can improve it (https://github.com/DataGridXL/DataGridXL2/issues/31 https://github.com/DataGridXL/DataGridXL2/issues/31). For now, I would say 10,000 records max to be sure.

jefc1111 5y ago

Can't see any mention of multisort. Does it have multisort? Great look and feel!

robbiejs 5y ago
For now it's single column sort but I plan on adding multi sort soon, don't have a specific date for it yet, but possibly q2 or q3.

carreau 5y ago

One million cell made me though of https://lumino.readthedocs.io/en/latest/examples/datagrid/index.html https://lumino.readthedocs.io/en/latest/examples/datagrid/in... that has a "trillion" cell demo :-) All the best.

timkpaine 5y ago
With a virtual data model it doesn't really matter, here's our 2 trillion cell model https://bl.ocks.org/texodus/483a42e7b877043714e18bea6872b039 https://bl.ocks.org/texodus/483a42e7b877043714e18bea6872b039
Existenceblinks 5y ago
I wonder if this kind of ux is just for fun, like let me scroll through and have no actual sense of data. At the end of the day, finding something is via search and filter.

Existenceblinks 5y ago

One feedback, undo is currently slow even if I just want to undo 5 cells of data.

robbiejs 5y ago
Can you tell me what webpage you're on (and your device+browser). Undoing should happen instantly.
- Existenceblinks 5y ago
  Default Grid, filled all 9 cells, and hold undo until all clear. I'm on Firefox 99.0b8 (64-bit), 4 GB RAM. I said it's slow but it's not really, it's like 200ms lagging for each undo.
  - robbiejs 5y ago
    I will look into it, thanks for letting me know. Have you tried Instead of holding undo, try to press it once?

joshuajomiller 5y ago

-"You've built a web app, but your users stick to Excel" I feel that if your users are not using your web app, it's not because they miss the (dated, not exactly intuitive) Excel interface. Seems to me like the wrong solution for the problem

deleted 5y ago
[deleted]
robbiejs 5y ago
For a fintech startup I was working for, that was the feedback our sales team got. "We like the product and it looks impressive, but we're used to Excel and we like to use Excel". So that's when we decided to add a page in our web app that had an Excel-look. That did not change things, the product vision was wrong, just like you said. But I can imagine that more web app producers get exactly this feedback from their prospects.
barnabee 5y ago
I miss many things about the Excel interface in early every web app: - editing many records as a table - formulae for calculating values - ability to paste from other tables or Excel sheets - information density! - arbitrary sort and filter - hiding and rearranging columns - etc… Every app with search, including search engines themselves, and most with data entry should have an Excel-like, table based interface. GitHub discovered this (just look at their new projects) and most data focused apps are no exception either. Terminal utilities, Python scripting, and JSON are sometimes as good or better, but more often a poor second place.

wittjeff 5y ago

Accessibility is a strong gating factor for some (including me). I don't see it in the docs. The whole thing seems to be missing any ARIA (see https://www.w3.org/TR/wai-aria-practices/examples/grid/dataGrids.html https://www.w3.org/TR/wai-aria-practices/examples/grid/dataG...) Let me know if you want help.

jimmygrapes 5y ago
Do you happen to know of best practices for simulating different disabilities, or some recording of somebody actually using some example well-designed accessible software? A video recording, to me as somebody who can see and hear and move just fine (for now), would help me understand what interaction methods don't work or are a struggle, which interaction methods are intuitive and effective, and which types of content are not recognized, not presented, or not important.
- pacoWebConsult 5y ago
  Lighthouse [1][2] Accessibility audit/ scores can be a good tool to check A11Y issues automatically, and it is fairly easy to integrate into your CI/CD Pipelines to get the report automatically to check for issues/ regression. The web accessibility world is complex enough that simulating different methods of access like using screen readers or different font-sizes and doing manual tests for compliance is not particularly feasible if you want to make your content accessible to all. [1] https://developers.google.com/web/tools/lighthouse https://developers.google.com/web/tools/lighthouse [2] https://web.dev/accessibility-scoring/ https://web.dev/accessibility-scoring/
  - MaxLeiter 5y ago
    I disagree. Automated results are not perfect and miss a lot of nuances, like element ordering, tab indexing, etc. Assuming you can’t find someone experienced with a screen reader to test I would invest in learning how to use one yourself. I’ve spent days without access to my screen in order to grow more comfortable navigating with audio. Of course, I won’t be as helpful or quick as someone who’s used a screen reader for years, but it’s better than blindly trusting lighthouse/web.dev

deleted 5y ago

[deleted]

toastercat 5y ago

What's a good FOSS alternative to this for non-commercial projects? I'd like to have a spreadsheet on my site for personal use.

spacemanmatt 5y ago
AG Grid, SheetJS both have decent community editions.
ndrsn 5y ago
I'm biased because I'm the maintainer, but canvas-datagrid is a, uh, canvas-based datagrid (https://github.com/TonyGermaneri/canvas-datagrid https://github.com/TonyGermaneri/canvas-datagrid), which can easily handle millions of rows. It's FOSS, and although in need of improvement (and better type annotations), it's well-documented (https://canvas-datagrid.js.org/ https://canvas-datagrid.js.org/) and actively maintained.
tunesmith 5y ago
FWIW, I went through a bunch of these libraries recently for a personal-site spreadsheet as a react component. All I wanted was a grid where each cell was a calculation based on the combination of its row/column header values. I kept running into the problem where the data grid library gave me 90% of what I needed, a different 90% each time. What actually ended up working perfectly for me was react-table and just using hooks to do the formula calculations.
jassmith87 5y ago
I maintain https://grid.glideapps.com https://grid.glideapps.com if you're looking for something ludicrously fast.
- robbiejs 5y ago
  I have noticed your product before, very well done!
  - jassmith87 5y ago

shafyy 5y ago

Looks interesting. I've just been looking at a couple of alternatives to this. We're adding a CSV import feature for our store finder, and the idea is to provide a spreadsheet-like interface where you can just copy and paste your location data instead of uploading a CSV where you need to deal with different delimiters and getting the column orders right etc.

mritchie712 5y ago
You might be better off with something like https://csvbox.io/ https://csvbox.io/
- shafyy 5y ago
  Interesting, thanks for sharing!
oneweekwonder 5y ago
If your up for jQuery-ui see SlickGrid examples[0] especially "Spreadsheet: features of the previous example but using a DataView"[1]. [0]: https://github.com/6pac/SlickGrid/wiki/Examples https://github.com/6pac/SlickGrid/wiki/Examples [1]: http://6pac.github.io/SlickGrid/examples/example-spreadsheet.html http://6pac.github.io/SlickGrid/examples/example-spreadsheet...
- shafyy 5y ago
  Cool, thanks for sharing!

snird 5y ago

Congrats on the release. For those looking for a FOSS alternative, I haven't seen mentioned here yet Toast UI Grid - TUI-grid: https://ui.toast.com/tui-grid https://ui.toast.com/tui-grid I've been using it for over a year and it works perfectly.

la64710 5y ago

Please point out wether it is free or commercial in your announcements : https://www.datagridxl.com/buy https://www.datagridxl.com/buy

tyingq 5y ago
https://github.com/DataGridXL/DataGridXL2/blob/master/LICENSE https://github.com/DataGridXL/DataGridXL2/blob/master/LICENS... Free if you don't disable the branding link.

ramesh31 5y ago

>You don’t need any framework to use DataGridXL. - It is lightweight (~250kb) and easy to use I'm not so sure 250k qualifies as lightweight by any definition. That's a pretty high target even for total bundle size. React, for example, is ~6k.

robbiejs 5y ago
Okay, gotcha. Maybe I should mentiod that it is lightweight compared to other options. Handonsontable is a terribe 1.5MB. I imagine Ag-grid is close to 1MB as well.

xlpowerup 5y ago

This look really good. Can it be used as a front end with say C++/C# etc to replace Excel COM interop?

robbiejs 5y ago
No it's not a replacement for Excel and its huge set of features, instead it implements an Excel-like interface to edit csv, json or js array data. No formulas, pivot tables, merged cells.

cyanydeez 5y ago

I think you're half way to why users stick to excel. Without the calculator aspect it not really an excel clone.

robbiejs 5y ago
The catch phrase on the homepage gives the wrong impression I believe. Thanks for pointing that out. I am not trying to create an Excel clone, but rather an editable data table with Excel like controls and interface.

joshxyz 5y ago

How does it compare to sheetjs?

elwell 5y ago

Is there anywhere to view original (not minified) source?

mollerhoj 5y ago

I'm looking for a version of the is that supports pagination from a db backend so you don't have to load all the data to the frontend at once. I need a read only spreadsheet with lots of data. Does anybody have any suggestions?

meekaaku 5y ago

This looks very nice! I am looking for a spreadsheet like component for a project I am working on. Had evaluated jspreadsheet before. Question I have is, how would one go about integrating formulas and references? The demo doesnt seem to support that.

robbiejs 5y ago
Hi, I am not sure if the product will support formulas. I 'll let it depend on popular demand. For now, DataGridXL does not support it.

ashitlerferad 5y ago

I would like to invite you to share Datagridxl here: https://forums.haydenjames.io/c/showcase/21 https://forums.haydenjames.io/c/showcase/21 (will be suggested to subscribers)

polskibus 5y ago

Have you considered writing the component using canvas? The fastest full featured grids I encountered, incl. google sheets, are based on canvas.

robbiejs 5y ago
Yes I have considered canvas. Parts of the grid are canvas (cell background colors). I chose DOM for a bunch or reasons: natural font scaling was a big thing (easy on the eyes even if zoomed in all the way) and another big thing was that working with canvas was difficult for me, even workin with a canvas you would have to apply lots of tricks in order to get the performance.
- robbiejs 5y ago
  I do believe my DOM approach is faster. The rendering is a faster than Google Sheets.