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
TypeScript
React Spreadsheet: Layered Data
Last time, I created a reference implementation of the
SpreadsheetDatainterface, including support for editing. Connect it to myVirtualSpreadsheetfront end, and boom, you have an editable empty spreadsheet. -
React Spreadsheet
InfiniSheet
React Spreadsheet: Editable Data
We’re on a roll, steadily filling out the Infinisheet architecture diagram with actual implementations. I’ve created a React based spreadsheet frontend that reads data via a common spreadsheet data interface.
-
React Spreadsheet
React Spreadsheet: Release Ready
Last time, I left you with a laundry list of things to do next. In the end, I decided to try and do all of them, with the unifying theme of getting
react-spreadsheetready to release. -
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
TypeScript
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.