VisualEditor/Design/Table editor

This is an important development and should be put high in the priority list.

Table editing is difficult to do well. We want to do well.

Design Workflow[edit]

Allow users to add a new table and start adding content as quickly as possible.
Allow users to edit the table in context, without having to go into lots of menus.

1. Selecting table from toolbar
2. User is given a 4x4 table with top row as header by default, and cursor in the 1st cell. Control in top left will allow a user to drag the table, or set table-level options
3. Hovering or clicking in a cell reveals controls for that row and column
4. When a user clicks one of those controls, more controls are revealed. They can add a row above or below, delete the row, or click the cog icon for more options
5. Hovering over a add row icon shows a darker blue line indication where the row will be
6. A user has added a new row
7. A user is editing a column and has clicked on the cog icon to see more options. The user can make it a header or make it sortable
8. A variation of column/row controls, in which all actions are in one dropdown menu

1. Selecting table from toolbar
2. User is given a 4x4 table with top row as header by default, and cursor in the 1st cell. The small bars on the top and left allow users to access table editing options.
3. Hovering on a row bar.
4. Clicking on a row bar. This shows an arrow indication.
5. Clicking on the arrow or any part of this bar opens the menu.
6. A user can click and drag to select multiple columns or rows. They can access a menu to edit those multiple columns
7. Clicking on just one column