13 ms·

Show HN: Datagridxl.js – No-nonsense fast Excel-like data table library

238 points by robbiejs 6y ago

robbiejs 6y ago
Hello HN, I’m Robbert, the creator of DataGridXL.js. 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 (~200kb) 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!
- pulposus 6y ago
  I'm not sure if this is just me, but the demos all fail because they try to load https://code.datagridxl.com/datagridxl.js https://code.datagridxl.com/datagridxl.js and it's returning a 404.
  - robbiejs 6y ago
    Not sure why that's happening. Is it still like that for you? What browser/OS?
- mkl 6y ago
  That title flashing "1 new message" nonsense is incredibly distracting. Is there a UI way to quickly sort by a column?
  - MuffinFlavored 6y ago
    sorting + filtering would be awesome too
    - robbiejs 6y ago
      Thanks for your suggestions. Sorting will be implemented very soon, perhaps this week. I haven't really thought of filtering yet, but it's very likely that one day we'll introduce a filter-option. However, at this moment I cannot say when.
    - robbiejs 6y ago
      Hi, I've just released a new version that adds a Sort Feature to the grid: https://www.datagridxl.com/demos/sorting-columns https://www.datagridxl.com/demos/sorting-columns.
  - robbiejs 6y ago
    Hi. Agree with the flashing message, I haven't found a way to turn it off yet. I am actually working on a sort feature at this moment and I expect to release at the end of the week.
  - robbiejs 6y ago
    Hi mki, I've just released a new version that adds a Sort Feature to the grid: https://www.datagridxl.com/demos/sorting-columns https://www.datagridxl.com/demos/sorting-columns.
- m1sta_ 6y ago
  An example using formulas (as javascript lambda functions) would be cool.
  - robbiejs 6y ago
    Hi, DGXL does not support formulas at this time and I am not sure if I will implement the feature. I'll let it depend on popular demand. There are a few products out there that implement formulas. A site like www.jspreadsheets.com mentions a few. Many of these products are not super-reliable or performant though (reason why I started building DGXL in the first place).
- pugio 6y ago
  I have been looking for years for something to replace a custom rendered excel-like table I have. The table has a complex layout: - One fixed top row (date), two or three fixed columns on the left. - Data are rendered horizontally; the number of rows does not change, but the number of columns can be in the hundreds. Does your library support column-oriented data like this (you mention "60+" columns)? Does anyone know of any library which can easily render something like this? It's surprisingly hard to find something which lets you fix left hand columns and also render as many columns as I need.
  - prionassembly 6y ago
    Ah, finance.
  - rowsncolumns 6y ago
    You could take a look at https://rowsncolumns.app https://rowsncolumns.app , You can render as many columns as you want since the grid supports windowing.
  - robbiejs 6y ago
    Hi, The component actually did have fixed/frozen columns/rows in an earlier version, but I decided to leave out the feature for a v1. I plan to reintroduce it after more popular features have been implemented. DGXL is able to handle hundreds of columns. The reason why it says 60+ specifically is that, according to browser-vendors like Mozilla, a DOM node should ideally not have more than 60 child nodes - for performance/memory reasons.
    - infinite8s 6y ago
      Are columns virtualized as well? That could get over the child node restrictions for performance.
      - robbiejs 6y ago
        Yes. Let's say your data grid has 200 columns, but only 10 columns (DOM nodes) are rendered in the viewport. The other 190 columns are cached. When scrolling horizontally, column nodes are appended/preprended on-the-fly. The old ones are only removed if the scrolling stops (until that time, column nodes that are outside the viewport are just made invisible by setting their opacity to 0). If a user scrolls really fast without stopping in between, they might have 200 column nodes in the DOM. The DOM nodes are then only removed when scrolling stops. Performance wise I haven't seen any problems with 200 columns or more.
- TAForObvReasons 6y ago
  Congratulations on launching, but consider distilling a part of the project and making it available under a free and open source license like MIT or Apache or BSD. There are many commercial and open source products on the market, some more established and less expensive than your offering. From the business standpoint, it's easy to sell something like ag-grid because many developers have experience with its open source offering, so we know that we can find experienced people on the market to help if necessary. Your project doesn't benefit from that community and doesn't benefit from having a lower price point (it's comparable to what ag-grid charges)
  - beojan 6y ago
    I expect he may be averse to choosing a permissive license like the ones you mention, but perhaps AGPL?
- sgarrity 6y ago
  How did you implement the scrolling such that it feels smooth/fast/native, but scrolls in one row/column steps (so you never see half a row)? CSS Scroll Snap? Nicely done.
  - macNchz 6y ago
    That’s an interesting case because it’s certainly a cool effect, but it’s kind of a cumbersome UX on mobile. It makes it hard to keep track of the columns as you scroll up and down. At a glance it seems like both the Google Sheets and Numbers iOS apps have smooth scrolling instead of snapping.
    - robbiejs 6y ago
      You're absolutely right (see comment above). I initially created scroll snap to replicate desktop version of Excel & G. Sheets behavior. I agree that it is not the best option for smaller viewports/touch. It's on my todo-list to introduce smooth-scrolling as well, so that scrolling DGXL on touch will work closer to native apps.
  - tobr 6y ago
    Is this considered a feature? I thought it was a limitation to deal with performance. I find it rather disorienting.
    - robbiejs 6y ago
      True, scroll snap does have some performance benefits: fewer moments to update the DOM. You're probably browsing the site on your phone, am I correct? I created scroll snap to replicate desktop version of Excel & G. Sheets behavior. I agree that it is not the best option for smaller viewports/touch. It's on my todo-list to introduce smooth-scrolling as well.
  - robbiejs 6y ago
    Thanks! I'd to write a proper "How It's Made" article about it in the future, but this is basically how it's done: There is a blank DOM node "scrollArea" in front of all others that catches the native JS scroll event. It then converts these scroll offsets (scrollTop and scrollLeft) to cell/viewport coordinates, by default 40px actual pixels per row/column. So if the scrollArea has a scrollLeft of 40px and a scrollTop of 200px , an underlying DOM node that renders the cell values and column lines, will render at viewport position {x: 1, y: 5}. The other important part that makes it snappy, is that a viewport of let's say 20 rows by 10 columns does not actually consist of 200 DOM nodes. Only columns are DOM nodes. The values inside a column are made to look like rows by CSS white-space property. So it only updates 10 DOM nodes when scrolling.
- lukeholder 6y ago
  Vote for simple formulas like sum etc.
  - robbiejs 6y ago
    Maybe one day, but no promises. I did experiment with formulas in an earlier version, and it was promising, but there's a lot of things that need to be exactly right. Also, I need to draw a line somewhere. I cannot turn the product into a spreadsheet, as I have chosen for performance as my main feature, which means it cannot do things like merged rows, merged columns, etc. So if I'd implement formulas, people might expect more & more features, which I then cannot deliver... (There are products out there that have basic formula support.)
- programmertote 6y ago
  Hi Robert, This looks like a really great (clean and performant) JS library for interacting with data grid. I'll definitely remember to try it for my next side project. A quick question: is there a way to make only some of the columns read-only in the grid? I looked through the doc [https://www.datagridxl.com/docs/setting-options https://www.datagridxl.com/docs/setting-options] and it seems like user actions for columns are all (applied to every column) or none. If DataGridXL.js allows assigning read-only to a subset of columns, it'd be great to add that in the doc with an example. Thanks for your hard work and especially for allowing others like me to try it for free!
  - robbiejs 6y ago
    Hi, Thanks for your feedback! Right now there is no such option, but it's definitely on the todos of 2020. At this moment there are not many individual column options: the goal is to implement validation, formatting, read-only prop, etc. At this moment every column just displays raw values & everything's editable.
    - programmertote 6y ago
      Thank you for the reply, Robert! I have bookmarked the site and will be recommending my friends to try out Datagridxl.js in their projects. :)
      - robbiejs 6y ago
        Thanks, appreciate it very much!
- gravypod 6y ago
  Congrats on launching! This seems like a great product! I have seen use cases where something like this could come very in handy. I don't know if this is useful but I'd be worried about using this library because: the difficult to adhere to pricing scheme, the high cost for the level of market saturation, and lack of quality support. Since you're building a library, not a tool, whenever I hire an engineer they'll automatically be using this tool and I'd need to remember to send you more money. The only other products that I have to do this with are either: 1. Monthly subscriptions that automatically charge me the correct amount of money. 2. GitLab which tracks how much I owe the developer and charges me the correct amount of money the next time around. I'm concerned that I'll pay for this software, download a .js file, check it into my repo, hire a new developer, and completely forget they're using this product. The biggest difference between this tool and my currently paid-for software is that it has no "check-in" period. I could very easily imagine a scenario in which I violate your license. Here are two: 1. I, as an engineer on a single project in a large company, buy your software and use it in a product. I move on to other stuff and get asked to write new features after a long time completely forgetting your software was paid-for. Me and another engineer start working on the project. We now have 2 devs. 2. Another engineer sees me building a cool project. They copy my frontend as a starter for another feature. We now have 2 devs in a multiproject license. 3. We have the correct multi project license for the correct number of devs but we want to hire some contractors for some cheap work. Hiring these contractors just became a lot more expensive. As for the pricing, at 54,100 EUR ($62,444.87 USD) for a 50 person team, you're competing with a sizable chunk of an engineers salary. Depending on what part of the world you're in you can pay for 1 quarter to 1 years worth of an engineers time with this chunk of change. It seems you're setting yourself aside from the competition because of performance reasons. If that is the large differentiated factor I'd be thinking the following as an engineering manager: 1. Given the timeline (3 months to 1 year) can I build my own implementation of this product? 2. Given the timeline can I take an open source implementation that has more features, use it until there's a performance problem, then have one of my 10x engineers tweak it to make it perform better? 3. Can I find another paid-for version of this library that will be cheaper? In this very HN post there's another implementation of a similar product with a seemingly similar feature set that is substantially cheaper [0] that is also source available. So, when I'm crunching the numbers, and have to choose to Build, Tweak, or Buy at a cheaper price, it's hard to justify this product. What makes it even harder to justify the product is the support limitations. The main reason to never choose build or tweak or "buy the cheaper one" is because it won't save you any time. Your support page makes it seem like, however, I'll have to put a lot of time and effort into bending over backwards to make a support request that fits your model. This makes the comparison: 1. Build XYZ and support it 2. Tweak XYZ and support it internally 3. Buy your software and get very non-specific support [0] - https://rowsncolumns.app/pricing https://rowsncolumns.app/pricing
- koheripbal 6y ago
  When it comes to reporting, I always get asked if I can have grouped rows that can be expanded/collapsed - it's such a frequent request. Is that possible in your framework?
  - robbiejs 6y ago
    Hi, that's not possible, sorry. DGXL is mainly meant to be an editable input component, it's not a data table for presentation purposes. Also see Features & Limits page: https://www.datagridxl.com/docs/features-limits https://www.datagridxl.com/docs/features-limits.
randtrain34 6y ago
How does that compare to https://github.com/paulhodel/jexcel https://github.com/paulhodel/jexcel ?
- sacky 6y ago
  one thing is that datagridxl.js does not support formulas but jexcel does
- kanobo 6y ago
  jexcel is great, it has more features (sorting, formulas, colors, etc)... but those same features are not very performant with many (>1000) rows since each cell is a html table cell. datagridxl looks promising if you need to display lots of data. I'm a fan of any open source data grid library so I'm happy both exists.
  - iopuy 6y ago
    are both open source? click the buy button on datgridxl.js, only 800 euros!!
    - TAForObvReasons 6y ago
      jexcel still maintains an open source community edition https://github.com/paulhodel/jexcel https://github.com/paulhodel/jexcel , no such thing exists for this project.
    - robbiejs 6y ago
      Hi, you can use DGXL for free, as long as you keep the branding link visible and have no need for support.
  - robbiejs 6y ago
    What I appreciate about Jexcel is their numerous input methods (like dropdowns and checkboxes). DGXL does not offer these features at this moment. Both Jexcel and Handsontable are quite excellent when it comes to the amount of features, but they do have the same downsides: their enthusiastic creators implement any feature that they can dream off, ingoring the effects on performance and a growing code base that gets more complex every time. If you're looking to create a spreadsheet app to compete with Excel or G. Sheets, don't look at DataGridXL. If you're looking for the fastest and most reliable editor for 2D or JSON data sets, choose DGXL :-)
hadrien01 6y ago
So from what I understand this works by displaying data on a JS canvas. How does that work for accessibility? Do screen-readers read the data as if it was an html table?
- kanobo 6y ago
  I haven't dug very deeply, but from what i can tell google sheets also uses a canvas too and it works with screen-readers somehow.
- lights0123 6y ago
  It uses <canvas>, but also has hacks for screen readers: open the demo and look for elements with the class of dgxl-innerColumn.
- robbiejs 6y ago
  Hi, it does not use canvas. It uses HTML. Sure, DGXL contains one or two canvas elements, but they're used for measuring strings length and drawing cell background colors. The actual values are all in HTML. The benefit is that you can use CTRL+F and values are found and selected. You can zoom the page and text will remain crisp. The values are not in a <table> tag however. <table> values are sorted y,x (rows first, columns second). DGXL sorts values x,y (columns first, rows second). I have to admit that I am not sure what that means for screen readers: I am not an accessibility-expert at this stage. What I do know is that HTML is better than canvas by default in this regard.
  - whylo 6y ago
    Unfortunately screen reader support isn't great at the moment, but using HTML instead of canvas is definitely going to make it easier for you to improve. I'd encourage you to download the free NVDA screen reader (https://www.nvaccess.org/download/ https://www.nvaccess.org/download/) and compare DataGridXL with Excel, or Google Sheets with screen reader support enabled (Tools > Accessibility settings). Announcing the column, row and cell content as you navigate the sheet with the keyboard would be a great start. Google Sheets does this by updating the content of a visually hidden ARIA live region (https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Live_Regions https://developer.mozilla.org/en-US/docs/Web/Accessibility/A...) as you navigate.
darkmarmot 6y ago
Doesn't work for me in chrome.... because it seems to break with Ad Blockers... that could be a real killer for you.
- bdcravens 6y ago
  I'm not having the same experience (using uBlock Origin)
  - darkmarmot 6y ago
    Ok, disabled it and I still get a big blank blob where the grid should be... looks like the js load keeps failing. oh well.
    - robbiejs 6y ago
      Really? What browser + OS are you on?
amanzi 6y ago
Looks great. I couldn't see any way to sort by column - is that possible?
- lecarore 6y ago
  In the docs they precisely tell that this is not supported https://www.datagridxl.com/docs/features-limits https://www.datagridxl.com/docs/features-limits
  - robbiejs 6y ago
    Hi, you're right. At this time it's not supported, but we're working on it. Probably next week. The other features are still a definite "no" for now :-)
    - amanzi 6y ago
      Thanks for the update!
      - robbiejs 6y ago
        You're welcome! Did you see the demo? It has sorting now: https://www.datagridxl.com/demos/sorting-columns https://www.datagridxl.com/demos/sorting-columns
        amanzi 6y ago
        Yes - that's perfect. So fast and smooth. I have a small side project on the cards that could use this, but unfortunately wouldn't be a paying customer though. Cheers.
        robbiejs 6y ago
        That's alright, no worries :-) Curious to know what you'll be making. Feel free to send me us an update at contact@datagridxl.com
matyunya 6y ago
Shameless plug! https://ellx.io/ https://ellx.io/ is a programmable spreadsheet with extended JavaScript for formulas (plus operator overloading and automatic async resolution)
- deleted 6y ago
  [deleted]
bennettfeely 6y ago
It looks really great and the one million cells demo is impressive, but that price is way out of reach.
- lights0123 6y ago
  The price only includes support and the ability to remove branding. You can use it sans source code with branding for free.
- programmarchy 6y ago
  Compared to a developer’s salary, seems like this is priced pretty well.
- robbiejs 6y ago
  Right now the free version offers the same features as the commercial version. As long as you're OK with displaying the branding link and DIY-support, you can use the product for free, as long as you like.
rowsncolumns 6y ago
Another plug - https://rowsncolumns.app https://rowsncolumns.app It's a canvas based SpreadSheet. The Grid works with React and Konva - https://konvajs.org/ https://konvajs.org/ You can see the demo here - https://rowsncolumns.app/demo https://rowsncolumns.app/demo And a whole bunch of features and upcoming roadmap - https://rowsncolumns.app/#features https://rowsncolumns.app/#features We are launching formula support with Web Workers soon.
- coopsmgoops 6y ago
  Genuinely curious. Why go with canvas over HTMl elements? Isn't it reinventing the wheel a bit for things like input fields
  - rowsncolumns 6y ago
    Sure. Input elements are still HTML FYI, we dont use canvas to simulate that. I have been working with DataGrids for more than 4-5 years. So I consider myself at a position to compare HTML and Canvas performance We went with Canvas because of the following reasons 1. Scroll performance is much better than HTML 2. Drawing on canvas is cheap compared to modifying DOM or attributes 3. Streaming updates are much smoother in canvas as drawing is quick. I had used Canvas as an interface for high-frequency trading 4. Canvas is easy to work with. And with https://konvajs.org/ https://konvajs.org/, any React developer will find it at home 5. No more Browser bugs :) 6. Performance tuning is quicker with Canvas 7. In the future, we can decide to use WebGL (using PixiJS) Some problems with canvas IMO 1. There is no relative positioning :(. It sounds silly, but coming from HTML, any element can be positioned relative to its parent. 2. Styling/Pixel ratio/Stroke - can be hard to figure out first. And the 0.5px crisp stroke workaround on DPR 1 devices. Took me a long time to figure out
    - robbiejs 6y ago
      I wish you best of luck. I understand your decision to go with canvas. I have experimented with canvas quite a bit as well, as I could not get HTML DOM performance quite right initially. How I solved this for DataGridXL: Only columns are DOM nodes. Rows are not actually nodes, but values are spaced vertically using CSS and with a simple newline (\n) character in between. The grid lines are just that: they're grid lines that are repositioned using CSS animation when the user is scrolling. This means that when a user is scrolling, the DOM does not have to update by, let's say 20 rows x 10 columns = 200 DOM nodes. Only 10 column DOM nodes need to be redrawn. That's how DGXL works with DOM & HTML but is still in many cases faster than a canvas implementation. Plus it still is accessible. Try zooming the page or use CTRL+F. You can find and select any (visible) value inside the data grid. No problems there.
mememem 6y ago
€830? Seriously?
- winrid 6y ago
  That's not a lot for their target market.
- robbiejs 6y ago
  If that's too much for you at this time, you can always use the free version. As long as you display the branding link. Right now the free version has the same features are the commercial version.
captivechains 6y ago
Please improve the screen reader support
- robbiejs 6y ago
  Thanks, I have seen this suggestion a couple of times now in this thread. Will have to study it, as right now I am a non-expert when it comes to screen readers. Will make an effort to seriously improve this aspect!
quda 6y ago
the price is absolutely outrageous!
w-ll 6y ago
oh man javascript devs are looking at what winform devs have been getting away with for years... on top of the unimpressive feature set and price, they really dont have a good remote support... like Im just gonna send a json object with nearly 100 million rows.
pictur 6y ago
Who are you targeting with 800 euro?
- robbiejs 6y ago
  Do you think it's too little or too much? This is my first commercial product. I have looked at other professional grids like Handsontable & Ag-Grid and have decided to choose a similar price, just to have some reference. There will always be people that find it too expensive or that find it too cheap. Even though the product looks like a simple <table> tag; the reality is that I spent 2 years working on it. (I am almost embarrassed to admit it.) Let's say an employee of your company (or perhaps yourself) is a much better programmer than myself. He/she could perhaps build a similar data table in perhaps 6 months, including all these features that don't meet the eye: keyboard controls, context menus, touch events, virtual DOM implementation, clipboard support on all browsers and devices... That would cost an employer perhaps 6 months worth of programmer salary, which is, depending on where you are, at least $10,000+. Then 800 euros is not such a bad deal, I believe. At the same time, I hope it's affordable for solo makers as well. How would you price the product?
  - pictur 6y ago
    I think not much. but I asked because I was wondering who could be a customer for this price.
    - robbiejs 6y ago
      I guess I'll just have to see what happens, who buys it and who does not, and tweak along the way :-)
      - pictur 6y ago
        achievements. please share the developments. your job deserves this money :)
        6y ago
jbverschoor 6y ago
Nice man. Dutch Design. Can't wait for features / extensions!
- robbiejs 6y ago
  Thanks! What features would you like to see implemented?
  - jbverschoor 6y ago
    Probably a plugin system for datatype => renders/editors. ex: (numbers, datepickers, select, checkboxes, etc.)
    - robbiejs 6y ago
      Ah, that's something I would very much like to implement. Probably only in '21... More pressing stuff first. Until then, have a look at Jexcel, it implements numerous pickers/editors (not all of them mobile-friendly I believe).
vandermark 6y ago
Awesome! Clean design + nice UX. I would have used it in my previous project.
- robbiejs 6y ago
  Thanks! It would have been a great FIT for your project. Much appreciated Vandermark! ;-)
nurettin 6y ago
The features of a commercial grid that I'm currently using: * incremental updates, inserts, deletes * nested grids * formula based coloring of cells * column based filtering
- robbiejs 6y ago
  Hi. Can you explain what you mean by "incremental updates"? Regarding other bullet points: * Nested Grids: no * Formulas: no / not anytime soon * Column based filtering: not on top of the list, but definitely doable.
  - nurettin 6y ago
    Hi, for an example, check out how the devxtreme datagrid uses a datasource object to manipulate the data in the grid in real time. Which means, instead of loading all the data into the grid before it is rendered at the time of declaration, the data can be appended, updated or deleted as it streams from a backend.
    - robbiejs 6y ago
      Ah, sounds good. Do you mean the grid keeps front-end and back-end data synced? DGXL does not offer that at this moment. You could probably recreate something like it by using getData and setData methods and implement some kind of AJAX communication.
      - nurettin 6y ago
        The grid itself doesn't proactively try to equalize frontend and backend data, but I utilize backend orm signals to generate websocket events which are then captured by a javascript callback in the frontend and sent to the grid. The grid then updates immediately reflecting the changes. There is no need to send the entire dataset, though, just the changes.
        robbiejs 6y ago
deleted 6y ago
[deleted]
araker 6y ago
How does this compare to ag-grid? Https://ag-grid.com
- robbiejs 6y ago
  Ag-grid has a lot more features. Very mature, big team I'd guess. However, Ag-grid does not offer quick Excel-like editing. If you're looking for this type of editing, don't bet on Ag-grid.
kevas 6y ago
Beautiful work. Will be using
- robbiejs 6y ago
  Thanks kevas, I appreciate it!
ddgflorida 6y ago
Nice. I read a CSV file with one mutli-line column in the last field with no problem, but when I copied the data, refreshed the page, and copied to empty grid, now the multi-line field incorrectly was split to the next line.
- robbiejs 6y ago
  Hi! Thanks for sharing the issue. Mind sharing the CSV file and steps, so I can attempt to fix the issue? support@datagridxl.com.
robbiejs 6y ago
Hello everyone, Not sure if anyone is still reading this thread. Just wanted to express that I am very grateful for all the positive responses that we got in this thread and by e-mail. Also, good news: We just released a new minor version today that adds the much requested Sort Feature to the grid: https://www.datagridxl.com/demos/sorting-columns https://www.datagridxl.com/demos/sorting-columns.

238 points by robbiejs 6y ago

Hello HN, I’m Robbert, the creator of DataGridXL.js. 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 (~200kb) 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!

pulposus 6y ago
I'm not sure if this is just me, but the demos all fail because they try to load https://code.datagridxl.com/datagridxl.js https://code.datagridxl.com/datagridxl.js and it's returning a 404.
- robbiejs 6y ago
  Not sure why that's happening. Is it still like that for you? What browser/OS?
mkl 6y ago
That title flashing "1 new message" nonsense is incredibly distracting. Is there a UI way to quickly sort by a column?
- MuffinFlavored 6y ago
  sorting + filtering would be awesome too
  - robbiejs 6y ago
    Thanks for your suggestions. Sorting will be implemented very soon, perhaps this week. I haven't really thought of filtering yet, but it's very likely that one day we'll introduce a filter-option. However, at this moment I cannot say when.
  - robbiejs 6y ago
    Hi, I've just released a new version that adds a Sort Feature to the grid: https://www.datagridxl.com/demos/sorting-columns https://www.datagridxl.com/demos/sorting-columns.
- robbiejs 6y ago
  Hi. Agree with the flashing message, I haven't found a way to turn it off yet. I am actually working on a sort feature at this moment and I expect to release at the end of the week.
- robbiejs 6y ago
  Hi mki, I've just released a new version that adds a Sort Feature to the grid: https://www.datagridxl.com/demos/sorting-columns https://www.datagridxl.com/demos/sorting-columns.
m1sta_ 6y ago
An example using formulas (as javascript lambda functions) would be cool.
- robbiejs 6y ago
  Hi, DGXL does not support formulas at this time and I am not sure if I will implement the feature. I'll let it depend on popular demand. There are a few products out there that implement formulas. A site like www.jspreadsheets.com mentions a few. Many of these products are not super-reliable or performant though (reason why I started building DGXL in the first place).
pugio 6y ago
I have been looking for years for something to replace a custom rendered excel-like table I have. The table has a complex layout: - One fixed top row (date), two or three fixed columns on the left. - Data are rendered horizontally; the number of rows does not change, but the number of columns can be in the hundreds. Does your library support column-oriented data like this (you mention "60+" columns)? Does anyone know of any library which can easily render something like this? It's surprisingly hard to find something which lets you fix left hand columns and also render as many columns as I need.
- prionassembly 6y ago
  Ah, finance.
- rowsncolumns 6y ago
  You could take a look at https://rowsncolumns.app https://rowsncolumns.app , You can render as many columns as you want since the grid supports windowing.
- robbiejs 6y ago
  Hi, The component actually did have fixed/frozen columns/rows in an earlier version, but I decided to leave out the feature for a v1. I plan to reintroduce it after more popular features have been implemented. DGXL is able to handle hundreds of columns. The reason why it says 60+ specifically is that, according to browser-vendors like Mozilla, a DOM node should ideally not have more than 60 child nodes - for performance/memory reasons.
  - infinite8s 6y ago
    Are columns virtualized as well? That could get over the child node restrictions for performance.
    - robbiejs 6y ago
      Yes. Let's say your data grid has 200 columns, but only 10 columns (DOM nodes) are rendered in the viewport. The other 190 columns are cached. When scrolling horizontally, column nodes are appended/preprended on-the-fly. The old ones are only removed if the scrolling stops (until that time, column nodes that are outside the viewport are just made invisible by setting their opacity to 0). If a user scrolls really fast without stopping in between, they might have 200 column nodes in the DOM. The DOM nodes are then only removed when scrolling stops. Performance wise I haven't seen any problems with 200 columns or more.
TAForObvReasons 6y ago
Congratulations on launching, but consider distilling a part of the project and making it available under a free and open source license like MIT or Apache or BSD. There are many commercial and open source products on the market, some more established and less expensive than your offering. From the business standpoint, it's easy to sell something like ag-grid because many developers have experience with its open source offering, so we know that we can find experienced people on the market to help if necessary. Your project doesn't benefit from that community and doesn't benefit from having a lower price point (it's comparable to what ag-grid charges)
- beojan 6y ago
  I expect he may be averse to choosing a permissive license like the ones you mention, but perhaps AGPL?
sgarrity 6y ago
How did you implement the scrolling such that it feels smooth/fast/native, but scrolls in one row/column steps (so you never see half a row)? CSS Scroll Snap? Nicely done.
- macNchz 6y ago
  That’s an interesting case because it’s certainly a cool effect, but it’s kind of a cumbersome UX on mobile. It makes it hard to keep track of the columns as you scroll up and down. At a glance it seems like both the Google Sheets and Numbers iOS apps have smooth scrolling instead of snapping.
  - robbiejs 6y ago
    You're absolutely right (see comment above). I initially created scroll snap to replicate desktop version of Excel & G. Sheets behavior. I agree that it is not the best option for smaller viewports/touch. It's on my todo-list to introduce smooth-scrolling as well, so that scrolling DGXL on touch will work closer to native apps.
- tobr 6y ago
  Is this considered a feature? I thought it was a limitation to deal with performance. I find it rather disorienting.
  - robbiejs 6y ago
    True, scroll snap does have some performance benefits: fewer moments to update the DOM. You're probably browsing the site on your phone, am I correct? I created scroll snap to replicate desktop version of Excel & G. Sheets behavior. I agree that it is not the best option for smaller viewports/touch. It's on my todo-list to introduce smooth-scrolling as well.
- robbiejs 6y ago
  Thanks! I'd to write a proper "How It's Made" article about it in the future, but this is basically how it's done: There is a blank DOM node "scrollArea" in front of all others that catches the native JS scroll event. It then converts these scroll offsets (scrollTop and scrollLeft) to cell/viewport coordinates, by default 40px actual pixels per row/column. So if the scrollArea has a scrollLeft of 40px and a scrollTop of 200px , an underlying DOM node that renders the cell values and column lines, will render at viewport position {x: 1, y: 5}. The other important part that makes it snappy, is that a viewport of let's say 20 rows by 10 columns does not actually consist of 200 DOM nodes. Only columns are DOM nodes. The values inside a column are made to look like rows by CSS white-space property. So it only updates 10 DOM nodes when scrolling.
lukeholder 6y ago
Vote for simple formulas like sum etc.
- robbiejs 6y ago
  Maybe one day, but no promises. I did experiment with formulas in an earlier version, and it was promising, but there's a lot of things that need to be exactly right. Also, I need to draw a line somewhere. I cannot turn the product into a spreadsheet, as I have chosen for performance as my main feature, which means it cannot do things like merged rows, merged columns, etc. So if I'd implement formulas, people might expect more & more features, which I then cannot deliver... (There are products out there that have basic formula support.)
programmertote 6y ago
Hi Robert, This looks like a really great (clean and performant) JS library for interacting with data grid. I'll definitely remember to try it for my next side project. A quick question: is there a way to make only some of the columns read-only in the grid? I looked through the doc [https://www.datagridxl.com/docs/setting-options https://www.datagridxl.com/docs/setting-options] and it seems like user actions for columns are all (applied to every column) or none. If DataGridXL.js allows assigning read-only to a subset of columns, it'd be great to add that in the doc with an example. Thanks for your hard work and especially for allowing others like me to try it for free!
- robbiejs 6y ago
  Hi, Thanks for your feedback! Right now there is no such option, but it's definitely on the todos of 2020. At this moment there are not many individual column options: the goal is to implement validation, formatting, read-only prop, etc. At this moment every column just displays raw values & everything's editable.
  - programmertote 6y ago
    Thank you for the reply, Robert! I have bookmarked the site and will be recommending my friends to try out Datagridxl.js in their projects. :)
    - robbiejs 6y ago
      Thanks, appreciate it very much!
gravypod 6y ago
Congrats on launching! This seems like a great product! I have seen use cases where something like this could come very in handy. I don't know if this is useful but I'd be worried about using this library because: the difficult to adhere to pricing scheme, the high cost for the level of market saturation, and lack of quality support. Since you're building a library, not a tool, whenever I hire an engineer they'll automatically be using this tool and I'd need to remember to send you more money. The only other products that I have to do this with are either: 1. Monthly subscriptions that automatically charge me the correct amount of money. 2. GitLab which tracks how much I owe the developer and charges me the correct amount of money the next time around. I'm concerned that I'll pay for this software, download a .js file, check it into my repo, hire a new developer, and completely forget they're using this product. The biggest difference between this tool and my currently paid-for software is that it has no "check-in" period. I could very easily imagine a scenario in which I violate your license. Here are two: 1. I, as an engineer on a single project in a large company, buy your software and use it in a product. I move on to other stuff and get asked to write new features after a long time completely forgetting your software was paid-for. Me and another engineer start working on the project. We now have 2 devs. 2. Another engineer sees me building a cool project. They copy my frontend as a starter for another feature. We now have 2 devs in a multiproject license. 3. We have the correct multi project license for the correct number of devs but we want to hire some contractors for some cheap work. Hiring these contractors just became a lot more expensive. As for the pricing, at 54,100 EUR ($62,444.87 USD) for a 50 person team, you're competing with a sizable chunk of an engineers salary. Depending on what part of the world you're in you can pay for 1 quarter to 1 years worth of an engineers time with this chunk of change. It seems you're setting yourself aside from the competition because of performance reasons. If that is the large differentiated factor I'd be thinking the following as an engineering manager: 1. Given the timeline (3 months to 1 year) can I build my own implementation of this product? 2. Given the timeline can I take an open source implementation that has more features, use it until there's a performance problem, then have one of my 10x engineers tweak it to make it perform better? 3. Can I find another paid-for version of this library that will be cheaper? In this very HN post there's another implementation of a similar product with a seemingly similar feature set that is substantially cheaper [0] that is also source available. So, when I'm crunching the numbers, and have to choose to Build, Tweak, or Buy at a cheaper price, it's hard to justify this product. What makes it even harder to justify the product is the support limitations. The main reason to never choose build or tweak or "buy the cheaper one" is because it won't save you any time. Your support page makes it seem like, however, I'll have to put a lot of time and effort into bending over backwards to make a support request that fits your model. This makes the comparison: 1. Build XYZ and support it 2. Tweak XYZ and support it internally 3. Buy your software and get very non-specific support [0] - https://rowsncolumns.app/pricing https://rowsncolumns.app/pricing
koheripbal 6y ago
When it comes to reporting, I always get asked if I can have grouped rows that can be expanded/collapsed - it's such a frequent request. Is that possible in your framework?
- robbiejs 6y ago
  Hi, that's not possible, sorry. DGXL is mainly meant to be an editable input component, it's not a data table for presentation purposes. Also see Features & Limits page: https://www.datagridxl.com/docs/features-limits https://www.datagridxl.com/docs/features-limits.

randtrain34 6y ago

How does that compare to https://github.com/paulhodel/jexcel https://github.com/paulhodel/jexcel ?

sacky 6y ago
one thing is that datagridxl.js does not support formulas but jexcel does
kanobo 6y ago
jexcel is great, it has more features (sorting, formulas, colors, etc)... but those same features are not very performant with many (>1000) rows since each cell is a html table cell. datagridxl looks promising if you need to display lots of data. I'm a fan of any open source data grid library so I'm happy both exists.
- iopuy 6y ago
  are both open source? click the buy button on datgridxl.js, only 800 euros!!
  - TAForObvReasons 6y ago
    jexcel still maintains an open source community edition https://github.com/paulhodel/jexcel https://github.com/paulhodel/jexcel , no such thing exists for this project.
  - robbiejs 6y ago
    Hi, you can use DGXL for free, as long as you keep the branding link visible and have no need for support.
- robbiejs 6y ago
  What I appreciate about Jexcel is their numerous input methods (like dropdowns and checkboxes). DGXL does not offer these features at this moment. Both Jexcel and Handsontable are quite excellent when it comes to the amount of features, but they do have the same downsides: their enthusiastic creators implement any feature that they can dream off, ingoring the effects on performance and a growing code base that gets more complex every time. If you're looking to create a spreadsheet app to compete with Excel or G. Sheets, don't look at DataGridXL. If you're looking for the fastest and most reliable editor for 2D or JSON data sets, choose DGXL :-)

hadrien01 6y ago

So from what I understand this works by displaying data on a JS canvas. How does that work for accessibility? Do screen-readers read the data as if it was an html table?

kanobo 6y ago
I haven't dug very deeply, but from what i can tell google sheets also uses a canvas too and it works with screen-readers somehow.
lights0123 6y ago
It uses <canvas>, but also has hacks for screen readers: open the demo and look for elements with the class of dgxl-innerColumn.
robbiejs 6y ago
Hi, it does not use canvas. It uses HTML. Sure, DGXL contains one or two canvas elements, but they're used for measuring strings length and drawing cell background colors. The actual values are all in HTML. The benefit is that you can use CTRL+F and values are found and selected. You can zoom the page and text will remain crisp. The values are not in a <table> tag however. <table> values are sorted y,x (rows first, columns second). DGXL sorts values x,y (columns first, rows second). I have to admit that I am not sure what that means for screen readers: I am not an accessibility-expert at this stage. What I do know is that HTML is better than canvas by default in this regard.
- whylo 6y ago
  Unfortunately screen reader support isn't great at the moment, but using HTML instead of canvas is definitely going to make it easier for you to improve. I'd encourage you to download the free NVDA screen reader (https://www.nvaccess.org/download/ https://www.nvaccess.org/download/) and compare DataGridXL with Excel, or Google Sheets with screen reader support enabled (Tools > Accessibility settings). Announcing the column, row and cell content as you navigate the sheet with the keyboard would be a great start. Google Sheets does this by updating the content of a visually hidden ARIA live region (https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Live_Regions https://developer.mozilla.org/en-US/docs/Web/Accessibility/A...) as you navigate.

darkmarmot 6y ago

Doesn't work for me in chrome.... because it seems to break with Ad Blockers... that could be a real killer for you.

bdcravens 6y ago
I'm not having the same experience (using uBlock Origin)
- darkmarmot 6y ago
  Ok, disabled it and I still get a big blank blob where the grid should be... looks like the js load keeps failing. oh well.
  - robbiejs 6y ago
    Really? What browser + OS are you on?

amanzi 6y ago

Looks great. I couldn't see any way to sort by column - is that possible?

lecarore 6y ago
In the docs they precisely tell that this is not supported https://www.datagridxl.com/docs/features-limits https://www.datagridxl.com/docs/features-limits
- robbiejs 6y ago
  Hi, you're right. At this time it's not supported, but we're working on it. Probably next week. The other features are still a definite "no" for now :-)
  - amanzi 6y ago
    Thanks for the update!
    - robbiejs 6y ago
      You're welcome! Did you see the demo? It has sorting now: https://www.datagridxl.com/demos/sorting-columns https://www.datagridxl.com/demos/sorting-columns
      - amanzi 6y ago
        Yes - that's perfect. So fast and smooth. I have a small side project on the cards that could use this, but unfortunately wouldn't be a paying customer though. Cheers.
        robbiejs 6y ago
        That's alright, no worries :-) Curious to know what you'll be making. Feel free to send me us an update at contact@datagridxl.com

matyunya 6y ago

Shameless plug! https://ellx.io/ https://ellx.io/ is a programmable spreadsheet with extended JavaScript for formulas (plus operator overloading and automatic async resolution)

deleted 6y ago
[deleted]

bennettfeely 6y ago

It looks really great and the one million cells demo is impressive, but that price is way out of reach.

lights0123 6y ago
The price only includes support and the ability to remove branding. You can use it sans source code with branding for free.
programmarchy 6y ago
Compared to a developer’s salary, seems like this is priced pretty well.
robbiejs 6y ago
Right now the free version offers the same features as the commercial version. As long as you're OK with displaying the branding link and DIY-support, you can use the product for free, as long as you like.

rowsncolumns 6y ago

Another plug - https://rowsncolumns.app https://rowsncolumns.app It's a canvas based SpreadSheet. The Grid works with React and Konva - https://konvajs.org/ https://konvajs.org/ You can see the demo here - https://rowsncolumns.app/demo https://rowsncolumns.app/demo And a whole bunch of features and upcoming roadmap - https://rowsncolumns.app/#features https://rowsncolumns.app/#features We are launching formula support with Web Workers soon.

coopsmgoops 6y ago
Genuinely curious. Why go with canvas over HTMl elements? Isn't it reinventing the wheel a bit for things like input fields
- rowsncolumns 6y ago
  Sure. Input elements are still HTML FYI, we dont use canvas to simulate that. I have been working with DataGrids for more than 4-5 years. So I consider myself at a position to compare HTML and Canvas performance We went with Canvas because of the following reasons 1. Scroll performance is much better than HTML 2. Drawing on canvas is cheap compared to modifying DOM or attributes 3. Streaming updates are much smoother in canvas as drawing is quick. I had used Canvas as an interface for high-frequency trading 4. Canvas is easy to work with. And with https://konvajs.org/ https://konvajs.org/, any React developer will find it at home 5. No more Browser bugs :) 6. Performance tuning is quicker with Canvas 7. In the future, we can decide to use WebGL (using PixiJS) Some problems with canvas IMO 1. There is no relative positioning :(. It sounds silly, but coming from HTML, any element can be positioned relative to its parent. 2. Styling/Pixel ratio/Stroke - can be hard to figure out first. And the 0.5px crisp stroke workaround on DPR 1 devices. Took me a long time to figure out
  - robbiejs 6y ago
    I wish you best of luck. I understand your decision to go with canvas. I have experimented with canvas quite a bit as well, as I could not get HTML DOM performance quite right initially. How I solved this for DataGridXL: Only columns are DOM nodes. Rows are not actually nodes, but values are spaced vertically using CSS and with a simple newline (\n) character in between. The grid lines are just that: they're grid lines that are repositioned using CSS animation when the user is scrolling. This means that when a user is scrolling, the DOM does not have to update by, let's say 20 rows x 10 columns = 200 DOM nodes. Only 10 column DOM nodes need to be redrawn. That's how DGXL works with DOM & HTML but is still in many cases faster than a canvas implementation. Plus it still is accessible. Try zooming the page or use CTRL+F. You can find and select any (visible) value inside the data grid. No problems there.

mememem 6y ago

€830? Seriously?

winrid 6y ago
That's not a lot for their target market.
robbiejs 6y ago
If that's too much for you at this time, you can always use the free version. As long as you display the branding link. Right now the free version has the same features are the commercial version.

captivechains 6y ago

Please improve the screen reader support

robbiejs 6y ago
Thanks, I have seen this suggestion a couple of times now in this thread. Will have to study it, as right now I am a non-expert when it comes to screen readers. Will make an effort to seriously improve this aspect!

quda 6y ago

the price is absolutely outrageous!

w-ll 6y ago

oh man javascript devs are looking at what winform devs have been getting away with for years... on top of the unimpressive feature set and price, they really dont have a good remote support... like Im just gonna send a json object with nearly 100 million rows.

pictur 6y ago

Who are you targeting with 800 euro?

robbiejs 6y ago
Do you think it's too little or too much? This is my first commercial product. I have looked at other professional grids like Handsontable & Ag-Grid and have decided to choose a similar price, just to have some reference. There will always be people that find it too expensive or that find it too cheap. Even though the product looks like a simple <table> tag; the reality is that I spent 2 years working on it. (I am almost embarrassed to admit it.) Let's say an employee of your company (or perhaps yourself) is a much better programmer than myself. He/she could perhaps build a similar data table in perhaps 6 months, including all these features that don't meet the eye: keyboard controls, context menus, touch events, virtual DOM implementation, clipboard support on all browsers and devices... That would cost an employer perhaps 6 months worth of programmer salary, which is, depending on where you are, at least $10,000+. Then 800 euros is not such a bad deal, I believe. At the same time, I hope it's affordable for solo makers as well. How would you price the product?
- pictur 6y ago
  I think not much. but I asked because I was wondering who could be a customer for this price.
  - robbiejs 6y ago
    I guess I'll just have to see what happens, who buys it and who does not, and tweak along the way :-)
    - pictur 6y ago
      achievements. please share the developments. your job deserves this money :)
      - 6y ago

jbverschoor 6y ago

Nice man. Dutch Design. Can't wait for features / extensions!

robbiejs 6y ago
Thanks! What features would you like to see implemented?
- jbverschoor 6y ago
  Probably a plugin system for datatype => renders/editors. ex: (numbers, datepickers, select, checkboxes, etc.)
  - robbiejs 6y ago
    Ah, that's something I would very much like to implement. Probably only in '21... More pressing stuff first. Until then, have a look at Jexcel, it implements numerous pickers/editors (not all of them mobile-friendly I believe).

vandermark 6y ago

Awesome! Clean design + nice UX. I would have used it in my previous project.

robbiejs 6y ago
Thanks! It would have been a great FIT for your project. Much appreciated Vandermark! ;-)

nurettin 6y ago

The features of a commercial grid that I'm currently using: * incremental updates, inserts, deletes * nested grids * formula based coloring of cells * column based filtering

robbiejs 6y ago
Hi. Can you explain what you mean by "incremental updates"? Regarding other bullet points: * Nested Grids: no * Formulas: no / not anytime soon * Column based filtering: not on top of the list, but definitely doable.
- nurettin 6y ago
  Hi, for an example, check out how the devxtreme datagrid uses a datasource object to manipulate the data in the grid in real time. Which means, instead of loading all the data into the grid before it is rendered at the time of declaration, the data can be appended, updated or deleted as it streams from a backend.
  - robbiejs 6y ago
    Ah, sounds good. Do you mean the grid keeps front-end and back-end data synced? DGXL does not offer that at this moment. You could probably recreate something like it by using getData and setData methods and implement some kind of AJAX communication.
    - nurettin 6y ago
      The grid itself doesn't proactively try to equalize frontend and backend data, but I utilize backend orm signals to generate websocket events which are then captured by a javascript callback in the frontend and sent to the grid. The grid then updates immediately reflecting the changes. There is no need to send the entire dataset, though, just the changes.
      - robbiejs 6y ago

deleted 6y ago

[deleted]

araker 6y ago

How does this compare to ag-grid? Https://ag-grid.com

robbiejs 6y ago
Ag-grid has a lot more features. Very mature, big team I'd guess. However, Ag-grid does not offer quick Excel-like editing. If you're looking for this type of editing, don't bet on Ag-grid.

kevas 6y ago

Beautiful work. Will be using

robbiejs 6y ago
Thanks kevas, I appreciate it!

ddgflorida 6y ago

Nice. I read a CSV file with one mutli-line column in the last field with no problem, but when I copied the data, refreshed the page, and copied to empty grid, now the multi-line field incorrectly was split to the next line.

robbiejs 6y ago
Hi! Thanks for sharing the issue. Mind sharing the CSV file and steps, so I can attempt to fix the issue? support@datagridxl.com.

robbiejs 6y ago

Hello everyone, Not sure if anyone is still reading this thread. Just wanted to express that I am very grateful for all the positive responses that we got in this thread and by e-mail. Also, good news: We just released a new minor version today that adds the much requested Sort Feature to the grid: https://www.datagridxl.com/demos/sorting-columns https://www.datagridxl.com/demos/sorting-columns.