Building a Production-Grade Table Editor with React and XState — Adding Rows & Columns

Introduction In the previous blogpost, we build a table editor that used xstate’s state machine. We managed to build a schema driven architecture where schema was the source of truth for rendering things on the table-editor. This blog post continues the same architecture and focuses on building a feature that will help to add a row and column into the table. Addition of Row/Column Our table editor in the current state, is just a basic table that loads some defaults. Now let us try to make it interactive by introducing addition of row and column. The experience we are targeting should be such that it requires minimal effort for the user to add a row or a column into the table. I really liked notion’s UX of addition row and column: Based on the similar lines we will also be building a similar UX for our table-editor. I have already implemented it and here is how it looks: Here are the things we need to achieve this: Change in state machine for addition of row/column Handler UI around the