rowsncolumns

Thank you :)

Thank you. Appreciate it.

Hi, The data is rendered in canvas. When you are editing, you will see an html text input. Custom cell editors can be used too.

We are planning to use Aria Live Region to support a11y

https://developer.mozilla.org/en-US/docs/Web/Accessibility/A...

Hi HN,

I am the developer behind SpreadSheet Grid. It's a React Library for users who want to develop an Excel-like DataGrid in their application.

The reality is it's very hard to get users off Microsoft Excel, and especially during these times, it's good to have an online Excel viewer and editor in your, private and secure.

Demo - https://rowsncolumns.app/demo

1. The library is built using React, and due to its declarative nature, it is very easy to customise and integrate it within your app

2. It is fast. Canvas is used for rendering.

3. Supports Autofilters, Frozen rows, columns, data validation, conditional formatting etc

4. Custom cell renderer

5. Formula support is coming soon with web worker support

6. Grouping Columns and Rows is coming soon

We support 2 licenses. Non-commercial use (FREE) and Commercial use (USD 199 with 1 year support)

Would love to answer any questions you have :)

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 < 0 ? Math.max(0, columnStart - 1) : Math.min(columnStart, columnCount - 1);

const columnWidth = getColumnWidth( nextColumnIndex );

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

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.

You could take a look at https://rowsncolumns.app , You can render as many columns as you want since the grid supports windowing.

Yeah. We may use learnings from Google Sheets on Mobile to design mobile interactions.

Cell Editing will be moved to the bottom

Cell-selection handles will be changed.

Formatting Toolbar will be displayed On-demand

Few more enhancements to make it touch friendly. We didnt receive any requests yet for mobile-support. When we do, it will be in our roadmap

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/, 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

Another plug - https://rowsncolumns.app

It's a canvas based SpreadSheet. The Grid works with React and Konva - https://konvajs.org/

You can see the demo here - https://rowsncolumns.app/demo

And a whole bunch of features and upcoming roadmap - https://rowsncolumns.app/#features

We are launching formula support with Web Workers soon.

Hi, I wanted to share a JavaScript project that I have been working on during the quarantine period.

https://rowsncolumns.app/

It's an Excel/Google Sheets-esque Grid that can be used in your React projects. Some of the features are

1. High performance using canvas 2. Custom Cell renderers and editors 3. Windowing - Only visible cells are renderers 4. Frozen columns and rows 5. Autofilter 6. Import/Export from excel and csv files 7. Styling, Conditional formatting..

I have been working on DataGrids for the last 3 years professionally and I have always wanted to create a product around this.

Hope you like it. Would love to get some feedback :)