1 Table Plugin

The Table Plugin will allow you to edit tables within your contents. You can do pretty much everything that you’d expect from editing tables, like adding and deleting rows and columns as well as merging and splitting cells. You can use the tab key to jump from one cell to the next.

2 Functional Description

The Table plugin allows you to create, edit and delete a table, add or delete single rows or columns, define headers etc.

2.1 Create a table and make it WAI accessible

In order to create a table move a cursor to your desired position, open the “Insert” tab in the Aloha Editor and click on the Table button. Now choose how many rows and columns you want to have via moving the mouse over the grid and click on the last marked cell and create the table. The whole table is wrapped into a <table> tag and each row consists of <tr> and each cell of a <td> tag. Every table has a WAI (Web Accessibility Initiative) icon which will turn green if a summary is added.

2.2 Selecting text and cells

• Dragging the mouse in a single cell will select contents (but not the cell itself)
• Dragging the mouse over multiple cells will select a “rectangular” cell-range covering the area between the start position and the current position (see note below about Internet Explorer)
• Clicking into cells while holding the SHIFT-key will add the cell to the selected cell-range, which will then cover the “rectangular” area between the first and the last SHIFT-clicked cell.
• Clicking into the grey area above a column will select the column
• SHIFT-Clicking into the grey area above a column will extend the current column selection to cover the area between the first and last SHIFT-clicked column
• Clicking or SHIFT-clicking the grey area besides a row will select the row similar to selection of columns

2.3 Add and delete rows and columns

Move the mouse pointer into the grey area beside or above the row or column (the mouse standard pointer turn into a little black arrow) and click. To mark two or more rows or columns just press shift and hold it down while clicking beside other rows or columns to mark them as well. Now you can click on the desired button to add a cell or row before or after or delete the selected rows.

2.4 Table headline

To format a row or column as a headline select the row or column and click on the table header button in Aloha Editor. To delete the header formatting, select the row or column and click the button again.

2.5 Merge and split cells

In order to merge two or more cells select the desired cells, rows or columns and click the merge cells button at the Aloha Editor. The content of all cells will be displayed in on cell. To split cells just select the cells, rows or column and click the split cells button.

2.6 Resizing rows and columns

Table columns and rows can be resized using drag & drop. When hovering over a cells bottom or right edge the cursor will change to indicate that the cell can be resized.

The width of columns can be set in pixel or percent. Please use the colResize option in your configuration to specify either true/“px” for pixel values or “%” for percent values.

To enable table resizing the following options are available:

Aloha.settings.plugins.table: {
	// allow resizing the table width (options: "px", false, default: false)
	tableResize: true,
	// allow resizing the column width. (options: "px", "%",  false, default: false)
	colResize: true,
	// allow resizing the row height (options: "px", false, default: false)
	rowResize: true
};

To reset a table’s size, after it has been resized, use the “reset size” button from the toolbar.

2.7 Table layout

Each cell, row or column can have an individual style applied. You only have to select the cells, rows or columns and choose one layout from the table layout list.

2.8 Table caption & summary

To add a caption to a table click inside of one cell and click the button table caption. A summary may be added by using the according field in the sidebar.

3 Configuration settings

The table configuration allows for some special settings:

Aloha.settings.plugins: {
	table: {
		// all elements with no specific configuration are not allowed to insert tables
	    config : [ 'table' ],

		editables: {
			'#one': [ 'table' ],
			'#two': [ ]
		},
		// the table summary is editable in the sidebar
		summaryinsidebar : true,
		// the following settings allow the user to apply specific classes to
		// either the whole table or a column or row. The name is used as a
		// class attribute, while the iconClass is applied as a class attribute
		// to style the buttons.
		//
		// The full list of options are as follows:
		// - name:		a unique name for the style (required)
		// - tooltip:	a tooltip string for the button
		// - iconClass:	the css class of the icon to use for the toggle button.
		//				If not set, defaults to 'aloha-icon-<name>'.
		// - cssClass:	the css class to toggle on the table/row/cell.
		//				If not set, defaults to the value of `name`.
		tableConfig : [
			{ name:'hor-minimalist-a' },
			{ name:'box-table-a' },
			{ name:'hor-zebra' },
		],
		// the following settings define CSS classes applicable to entire columns, rows or single cells:
		// - name:       the CSS class to be added
		// - icon:       the icon name for the dropdown entry
		// - iconHollow: flag whether the icon should be displayed hollow or filled
		// - label:      the label to display in the dropdown
		columnConfig : [
				{ name: 'table-style-align-left',  icon: 'format_align_left', iconHollow: false, label: 'Align left' },
				{ name: 'table-style-align-right', icon: 'format_align_right', iconHollow: false, label: 'Align right' }
		],
		rowConfig : [
				{ name: 'table-style-align-left',  icon: 'format_align_left', iconHollow: false, label: 'Align left' },
				{ name: 'table-style-align-right', icon: 'format_align_right', iconHollow: false, label: 'Align right' }
		],
		cellConfig : [
				{ name: 'table-style-align-left',  icon: 'format_align_left', iconHollow: false, label: 'Align left' },
				{ name: 'table-style-align-right', icon: 'format_align_right', iconHollow: false, label: 'Align right' }
		],
		// allow resizing the table width (options: "px", false, default: false)
		tableResize: true,
		// allow resizing the column width. (options: "px", "%",  false, default: false)
		colResize: true,
		// allow resizing the row height (options: "px", false, default: false)
		rowResize: true,
		// default classes may be assigned to tables, rows and cells. The value should be a string containing a class
		// name (or multiple space-separated class names) which will be automatically applied.
		//
		// When a row or cell is a header, then the "regular" default class will not be applied, only the "header"
		// default class. If a certain class should apply to a row or cell in both header and regular states, then
		// that class should be included in both states, e.g.:
		//
		// defaultRowClass: 'table-row',
		// defaultHeaderRowClass: 'table-row header-row'
		//
		// add a class to all tables
		defaultClass: 'table-responsive'
		// add a class to all rows
		defaultRowClass: 'c-table__row',
		// add a class to all header rows
		defaultHeaderRowClass: 'c-table__row c-table__header',
		// add a class to all cells
		defaultCellClass: 'c-table__cell',
		// add a class to all header cells
		defaultHeaderCellClass: 'c-table__cell c-table__header'
	}
};

4 Components

• table – insert a table into the content
• addrowbefore – adds a row before the current row
• addrowafter – adds a row after the current row
• deleterow – deletes the current row
• deletecolumn – deletes the current column
• rowheader – turns current row into a row of headers
• columnheader – turns current column into a column of headers
• romergecells – merge all cells within this row
• rowsplitcells – split merged cells within this row
• columnmergecells – merge all cells within this column
• columnsplitcells – split merged cells within this column
• addcolumnleft – add a column left of the current column
• addcolumnright – add a column right of the current column
• tablemergecells – merge selected cells
• tablesplitcells – split selected cells
• mergecells – merge selected cells
• splitcells – split selected cells
• tablecaption – input field which allows you to add a caption to the table
• naturalfit – removes defined widths and heights from rows and columns

Chapters

1. Table Plugin

2. Functional Description

   • Create a table and make it WAI accessible

   • Selecting text and cells

   • Add and delete rows and columns

   • Table headline

   • Merge and split cells

   • Resizing rows and columns

   • Table layout

   • Table caption & summary

3. Configuration settings

4. Components