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