Hacker News Board Hacker News, browsed like a classic message board
Live data from Hacker News

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

datagridxl.com

Post reply on HN
Print view View original

61–70 of 136 posts

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

#62

Post by robbiejs »

lecarore wrote: post #16
amanzi wrote: post #13

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

In the docs they precisely tell that this is not supported https://www.datagridxl.com/docs/features-limits

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 :-)

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

#63

Post by robbiejs »

darkmarmot wrote: post #22
bdcravens wrote: post #12

Earlier quoted context omitted.

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

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.

Really? What browser + OS are you on?

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

#65

Post by rowsncolumns »

robbiejs wrote: post #56
rowsncolumns wrote: post #35

Earlier quoted context omitted.

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…

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 lin…

Interesting. Wonder how you can get cell level control for styling when you are rendering text nodes. Positioning elements by line-height may not be the best way.

Canvas can be made fully accessible and screen reader friendly. See how Google Sheets has done. But yes, its not natively accessible like HTML.

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

#66

Post by robbiejs »

m1sta_ wrote: post #10
robbiejs wrote: post #2

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 Virtua…

An example using formulas (as javascript lambda functions) would be cool.

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

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

#67

Post by robbiejs »

rowsncolumns wrote: post #65
robbiejs wrote: post #56

Earlier quoted context omitted.

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 lin…

Interesting. Wonder how you can get cell level control for styling when you are rendering text nodes. Positioning elements by line-height may not be the best way. Canvas can be made fully accessible and screen reader friendly. See how Google Sheets has done. But yes, its not natively accessible like HTML.

That's the biggest trade-off I had to make. DXGL does not implement HTML markup in cells: see Features & Limits (https://www.datagridxl.com/docs/features-limits).

That's why I try to make it clear that DGXL is meant for input, editing values. It's not meant for templating or making tables look all pretty for presentation means.

It was a tough decision I had to make, but in the end I am very happy with it. If people are looking for a data table with 100+ features (including markup), I will gladly refer them to 100 other products. But if they're looking for performance & reliability, I am quite convinced that DGXL is the best choice really.

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

#68

Post by rowsncolumns »

sgarrity wrote: post #20
robbiejs wrote: post #2

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 Virtua…

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.

If a user is trying to scroll horizontally, we can get the delta and get the scroll direction. Find the column width of the next/prev column and update the scroll property. An implementation can look like:

const nextColumnIndex = scrollDeltaX const columnWidth = getColumnWidth( nextColumnIndex );

scrollBar.scrollLeft += (scrollDeltaX < 0 ? -1 : 1) * columnWidth;

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

#69

Post by whylo »

robbiejs wrote: post #60
hadrien01 wrote: post #6

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?

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 tag however. values are sorted y,x (rows first, columns second).…

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/) 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...) as you navigate.
Post reply on HN