GeezerVison is showing www.mediawiki.org — VisualEditor/Design/Table editor - MediaWiki
| This page is obsolete. It is being retained for archival purposes. It may document extensions or features that are obsolete and/or no longer supported. Do not rely on the information here being up-to-date. |
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
Goals
- 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
Version 2
-
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
Other table editors
DesiredPossible Functionality
- Create table
- Delete table
- Resize table column widths
- Rows
- Toggle table cells/table headings
- Add row before
- Add row after
- Duplicate row
- Reorder rows (drag sort)
- Delete row
- Columns
- Toggle table cells/table headings
- Add column before
- Add column after
- Duplicate column
- Reorder columns (drag sort)
- Delete column
- Cells
- Toggle table cell/table heading
- Merge right
- Merge left
- Merge up
- Merge down
- Split into rows
- Split into columns
- Change background color (highlight) (eg. w:World Series Most Valuable Player Award)
- Right-, left-, and center-aligned content
- Any element
- edit style and attributes of the element