The Infinisheet apps all use react-spreadsheet for their main UI. This package contains a React component built on react-virtual-scroll that implements the classic Spreadsheet UI we all know and love. The component retrieves the data needed to render the spreadsheet on demand, using the spreadsheet-data interface.
-
React Spreadsheet
React Spreadsheet: Edit Ready
It’s been a couple of months since I last worked on features for my scalable React spreadsheet component. I got distracted by adding Playwright and Storybook to my arsenal of development tools. The next step is to add all my components to Storybook and publish it as part of my documentation set.
-
React Spreadsheet
React Spreadsheet: Decoupled Rendering
I rebuilt my
react-virtual-scrollpackage from the ground up. I couldn’t make traditional virtual scrolling work properly with the new React 18 rendering API or Chrome’s GPU accelerated compositor. So I switched to an approach that decoupled rendering of a window onto a virtualized grid from scrolling it. -
React Spreadsheet
React Spreadsheet: Event Handling
Last time we got basic selection with a focus cell working. The only way of selecting something is by typing a cell reference into an input box.
-
React Spreadsheet
React Spreadsheet: Selection and Focus
I’m about to add support for editing data in my React spreadsheet component. Before I can do that, I need to be able to select the cell I want to edit. Before I can do that, I need to add some grid lines to make it easier to see where the cell boundaries are.
-
React Spreadsheet
Spreadsheets
Spreadsheet Data Model
Last time, we defined a minimal data interface and hooked it up to
VirtualSpreadsheet. Now I need to get a better understanding of the standard spreadsheet data model so that I can flesh out the interface to match. -
React Spreadsheet
Spreadsheet Data Interface
Last time, I got fed up with the hardcoded placeholder content in my react-spreadsheet component. Time to make a start on the spreadsheet data interface that my component will use to retrieve content for display.
-
React Spreadsheet
React Spreadsheet Infinite Scrolling
Last time, I left you feeling rather constrained by my starting spreadsheet size of 100 rows and 26 columns. This is the same starting size as Google Sheets. Like Google Sheets, I could have explicit buttons that add additional rows and columns. However, I don’t like that behavior. The UI acts as if rows and columns were precious, giving them out begrudgingly.
-
React Spreadsheet
Spreadsheets
Spreadsheet Column Naming
Last time, I ported some spreadsheet-ish sample code into my new stub
react-spreadsheetpackage, and called it a spreadsheet. Unsurprisingly, it’s not very good. Time to start iterating. -
React Spreadsheet
Introducing React Spreadsheet
I seem to have spent the past few weeks repeatedly finding reasons not to get my
react-spreadsheetpackage off the ground. That changes today. First, a quick reminder of the big picture.