-
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 Virtual Scroll
React Virtual Scroll 0.6.x : Consciously Uncoupling
As we discovered last time, traditional virtual scrolling implementations don’t work properly. Both React and the Chrome browser prioritize responsiveness when scrolling. New frames can be displayed before virtualized components have a chance to render updated content. Content appears torn or goes blank.
-
React Virtual Scroll
React Glitchy Virtual Scroll: Deep Dive
How can this be happening? I’m doing everything in my power to ensure that the visible content in my virtualized components is rendered before the browser paints. I’m using the legacy React render method which ensures that the DOM is updated immediately when an event is handled. I’ve restructured my spreadsheet component to ensure that everything is rendered before React returns to the event loop.
-
React Virtual Scroll
React Virtual Scroll : Scroll Options and Display List
It’s time for more enhancements to
react-virtual-scrolldriven by requirements fromreact-spreadsheet. If that seems a bit dull, don’t worry, things get wild by the time we reach the end. -
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 Virtual Scroll
React Virtual Scroll 0.5.0 : Render Props
The 0.4.0 release of
react-virtual-scrollfocused on customization. Since then, I’ve learnt a lot from usingVirtualGridandVirtualListas building blocks for myreact-spreadsheetpackage. In particular, I learnt that the custom container component props introduced in 0.4.0 aren’t a good fit with modern React. -
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.