Table block: Make adding rows and columns more intuitive

[richtabor]

What problem does this address?

The current implementation of adding rows and columns to the Table block is not intuitive.

As-is, a user is required to leave the currently selected cell, enter the block toolbar, then select one of the available controls. None of those controls provide enough context on where the row, or column, will be inserted/deleted even.

I want to break this down into two main focuses (this issue is focused on the first):

• Make adding rows and columns more intuitive.
• Add a control layer for rows and columns.

What is your proposed solution?

• Add an "Add column" inserter that renders when hovering (maybe focus) on a cell within the last column. New columns are always added at the end.

• Add an "Add row" inserter that renders when hovering (maybe focus) on a cell within the last row. New rows are always added to the bottom.

Current

Proposal

CleanShot.2023-03-22.at.11.57.02.mp4

CleanShot.2023-03-22.at.12.01.12.mp4

Notes

• Don't mind the flashing from the prototype.
• We should use the slight animation employed elsewhere for the inserter.
• We could maybe use the square inserter, though it may introduce confusion with the block inserter.
• I'm not solving for inserting of rows/columns within the table (before/after), but rather adding more columns quickly/easily. I'd expect the current block toolbar control to remain for the time being.

[faisal-alvi]

Adding some kind of highlight to the cell before a user leaves it to enter the block toolbar would be a satisfactory solution and we might not need to add new inserters at the ends. The following gif demonstrates the red border that is applied to the cell, which helps users identify the cursor's position. It's essential to ensure that this highlighting is removed when the user selects another area.