
Show HN: Datagridxl.js – No-nonsense fast Excel-like data table library - robbiejs
https://datagridxl.com
======
robbiejs
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!

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

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

~~~
janci
There is a bug that is caused directly by this whitespace hack. If you copy
two lines of text and paste it to one cell, it displays as two cells and
shifts the column content below the affected cell (if the affected cell is in
the viewport)

~~~
robbiejs
I am not sure if this is actually a bug, that will probably also happen when
pasting those two lines to Excel or G. Sheets. Correct me if I'm wrong.

~~~
janci
Yes, it is possible to paste cells in excel and shift cells below in Excel.
But here the cells are shifted if the corrupted cell is visible and shift back
if it's not. Definitely a bug.

~~~
robbiejs
Ah I think I know what you mean now. I think you mean when you paste multi-
line text inside the cell value editor! You're right, thanks for spotting it!

This does not happen when you paste when the editor is not open, am I correct?

~~~
janci
Yes, exactly.

~~~
robbiejs
Hi janci, just letting you know that the bug has been fixed. Thank you for
spotting it!

The current solution that I came up with: replace \n with Return HTML-entity.
Not sure if that is the best solution for you (or anybody else) but at least
it prevents the unwanted shift of column contents.

Thanks again!

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

~~~
xyzzy_plugh
On mobile it _looks_ like a spreadsheet but seems entirely unresponsive to,
for example, selecting a cell.

~~~
robbiejs
For a moment I thought you were talking about DataGridXL, but your comment is
on the canvas grid?

I actually made quite an effort to make DGXL work on touch screens. It's not
there yet. It's basically read-only on touch for now, but you should have no
problem selecting cells and copying values.

~~~
dkersten
For me, DGXL on iOS lets me select and scroll beautifully, but I cannot
actually edit (I guess because the cells aren’t text fields, the device
doesn’t know to open the on screen keyboard). So it works very well for output
but doesn’t work for input.

~~~
robbiejs
You're right, the editor does not open on touch screens in this version.

It's still possible to enable editing on touch screen, but it asks for a
custom <input> element on the page that interacts with the grid, using methods
setCellValues & getCellValues. It's certainly possible. Will put up a demo for
it when I find the time.

~~~
dkersten
I just saw you actually do say its readonly in your documentation:
[https://www.datagridxl.com/docs/touchscreen-
support](https://www.datagridxl.com/docs/touchscreen-support)

That solution would actually work perfectly well for me: tap a cell and an
edit widget pops up.

------
randtrain34
How does that compare to
[https://github.com/paulhodel/jexcel](https://github.com/paulhodel/jexcel) ?

~~~
kanobo
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
are both open source? click the buy button on datgridxl.js, only 800 euros!!

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

------
hadrien01
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?

~~~
robbiejs
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
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/A...](https://developer.mozilla.org/en-
US/docs/Web/Accessibility/ARIA/ARIA_Live_Regions)) as you navigate.

~~~
robbiejs
That you for this valuable advice! I have to admit that I have never worked on
accessibility before (apart from writing meaningful HTML). Will definitely
look at improving screen reader support when I get to it.

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

~~~
lights0123
The price only includes support and the ability to remove branding. You can
use it sans source code with branding for free.

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

~~~
lecarore
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
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
Thanks for the update!

~~~
robbiejs
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
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
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

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

------
ddgflorida
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
Hi! Thanks for sharing the issue. Mind sharing the CSV file and steps, so I
can attempt to fix the issue? support@datagridxl.com.

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

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

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

------
jbverschoor
Nice man. Dutch Design.

Can't wait for features / extensions!

~~~
robbiejs
Thanks! What features would you like to see implemented?

~~~
jbverschoor
Probably a plugin system for datatype => renders/editors. ex: (numbers,
datepickers, select, checkboxes, etc.)

~~~
robbiejs
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).

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

~~~
bdcravens
I'm not having the same experience (using uBlock Origin)

~~~
darkmarmot
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
Really? What browser + OS are you on?

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

~~~
infinite8s
My issue with most grids (and charting libraries for that matter) is that the
API is push based (ie they all have some kind of API like setData, etc),
instead of pull based (where the grid utilizes an adapter model with simple
functions like getRowCount, getColumnCount, getData(row, column) and you can
build subclasses that adapt to any data model you have). This means that it's
really difficult to implement highly performant grids that support changing
data, more data than can fit in the current viewport, etc. It also makes it
difficult to share large datasets between different views - ie a chart and
table both showing the same data, or two tables showing different sections of
the same dataset, without multiple copies of the data in memory.

~~~
robbiejs
Not 100% sure what you mean, but it sounds like a "server-side first" approach
(if that word exists). As grid & chart libs are always built by (front-end)
Javascript experts, you'll always see a front-end first approach.

However, have a look at this Codepen example:
[https://codepen.io/datagridxl/pen/XWXGGGq?editors=0010](https://codepen.io/datagridxl/pen/XWXGGGq?editors=0010).
It combines amCharts and DataGridXL. Update any value in the grid and see the
chart adjust. Quite snappy right?

------
kevas
Beautiful work. Will be using

~~~
robbiejs
Thanks kevas, I appreciate it!

------
araker
How does this compare to ag-grid?

Https://ag-grid.com

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

------
captivechains
Please improve the screen reader support

~~~
robbiejs
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!

------
pictur
Who are you targeting with 800 euro?

~~~
robbiejs
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?

~~~
dkersten
Handsontable has a lot more features, though. Maybe your unique selling points
are enough, I don’t know, just on paper handsontable appears to provide a lot
more for the price. I’m not suggesting you change it, just something to be
aware of for your marketing.

For me, personally, handsontable was too expensive too though (I’m just one
guy self funding my project) so ended up going with an open source table
component instead.

~~~
robbiejs
It all depends on what somebody is looking for: a sortable data table for
presentation, a table (structure) editor, a spreadsheet, a data grid? All
these things look very similar, but they require different approaches really.

You'll always lose on one of the other. Ag-Grid and DataTables are perfect for
presentation, not so much for Excel-like editing. Handsontable & Jexcel try to
implement all features of Excel, at the cost of performance & bugs.

I have to make sure that in my marketing I make very clear that my product
won't be able to do X,Y and Z, but it's the best at A,B and C. To prevent
disappointed buyers.

I hope I am doing that with my Features & Limits page:
[https://www.datagridxl.com/docs/features-
limits](https://www.datagridxl.com/docs/features-limits). (Column sorting will
be implemented soon by the way. Ignore what the page says.)

I am thinking to add some interactive comparison pages like: DataGridXL vs
Handsontable, DataGridXL vs Ag-Grid, DataGridXL vs DataTables, etc... to
really show & describe the differences between the products.

Anyway, you're always welcome to use the free version. It only requires that
you keep the branding link visible, which might not be too bad for your app

~~~
dkersten
> You'll always lose on one of the other.

Absolutely agree and the open source alternatives tend to do one or two things
only (while HoT, DGXL etc seem to offer a lot more in a single package), so
for me, it came down to deciding what exactly do I need and if I need
something else, maybe I need to use a different one for that.

> I have to make sure that in my marketing

I don't think you need to do too much over what you already have. Maybe put a
bit more emphasis on why the "Reliable" part matters. The little blurb on your
page about not messing up the DOM isn't really selling it to me, I just looked
at it and thought "yeah ok whatever", but this and performance seem to be two
of your main distinguishing factors, so I'd lean on them more. Focus on what
makes DGXL special. That's just me though.

> Anyway, you're always welcome to use the free version.

I may give it a try. For my main use case, I think the branding is a bit too
in-your-face (it would look out of place inside the rest of my web app --
maybe you can provide multiple styles to pick from, just thinking out loud),
but overall it looks great so its definitely getting bookmarked.

In any case, great work!

~~~
robbiejs
Thanks for your feedback, really appreciate it! I think you're right that the
"Reliable" feature might not tell the user much.

Perhaps I need to show GIFs of other products to show the numerous ways these
products get messy. Anyway, just an idea. Will think about it more, very good
point.

You're allowed to adjust the color & type of the branding link, as long as it
remains visible :-)

~~~
dkersten
Ah, great, I will try it out when I get time! Thanks.

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

