Hierarchical tableselect

The forms a tree is administered through, which are the two places a table lists a hierarchy: the terms of a vocabulary and the links of a menu. Three tables, because the shape takes two elements to build. The first is a real tableselect over a tree of terms, so the column of check boxes and the select all cell in the header are the ones the element builds, with a row selected, a row disabled and the indentation markers a row carries per level. The second is the overview form of a menu: a table whose rows are form elements, so each one holds the state of a link, its weight, its parent and an operations dropbutton, the whole table is draggable, and the check box column has to be built by hand because it cannot be asked of the element there. The third is the same element with multiple turned off, which is the picker: radio buttons instead of check boxes, no select all cell, and the rows a link may not be moved under disabled. Nothing is saved, and the trees are made up, so the page renders the same on every site.

A tree in a tableselect

The element itself: a table of check boxes over rows that are data rather than form elements. The column and the "select all" cell in the header are added by the element, and the hierarchy is the one thing it knows nothing about -- the indentation is markup the row carries in its first cell, exactly as the overview form of a vocabulary builds it. Two rows are selected to begin with, and one is disabled, which is the state most easily forgotten: a row whose check box cannot be reached still has to line up with the column above it.

Action

	Name	Status	Items	Operations
Update Design	Design	Published	24	Edit Translate Delete
Update Typography	Typography	Published	9	Edit Translate Delete
Update Colour	Colour	Published	7	Edit Translate Delete
Update Contrast	Contrast	Published	3	Edit Translate Delete
Update Development	Development	Published	31	Edit Translate Delete
Update Front end	Front end	Published	18	Edit Translate Delete
Update Back end	Back end	Unpublished	13	Edit Translate Delete
Update Accessibility	Accessibility	Published	11	Edit Translate Delete

A tree in a table, with a column of check boxes

The overview form of a menu, which is the same tree in the other element: a #type table whose rows are form elements, so each one carries the state of a link, the weight it is ordered by, the parent it hangs off and its operations, and the whole table can be dragged. The check box column here is built by hand rather than asked of #tableselect, because the two cannot be combined: the check box of a row would be submitted under the name of the row itself, which is the name the weight and the parent of that row are already submitted under. What a theme sees is nearly the same column either way -- a "select all" cell in the header, and a check box in the first cell of every row -- next to the drag handle, the indentation and the hidden fields that make a tree out of a flat table. Nearly, because the cell holding a check box is given a class here and left bare by the element above, which is a difference in core rather than in the example, and one worth knowing before a column like this is styled on one table and checked on the other. The indentation sits in that first cell as well, rather than on the title beside it, because the first cell is the only place tabledrag looks: the handle is put after the last marker it finds there, and prepended to the cell when it finds none, so with the markers left on the title the handle stayed at the left edge of every row however deep the row sat. Moving them costs the title column its indentation and steps the check boxes in instead, which is the trade a table makes by putting a select column in front of the one that carries the tree.

Action

	Menu link	Enabled	Weight	Operations
Select Home	Home	Enable Home	Weight for Home	Edit Translate Delete
Select About us	About us	Enable About us	Weight for About us	Edit Translate Delete
Select Our team	Our team	Enable Our team	Weight for Our team	Edit Translate Delete
Select History	History	Enable History	Weight for History	Edit Translate Delete
Select The founding	The founding	Enable The founding	Weight for The founding	Edit Translate Delete
Select Services	Services	Enable Services	Weight for Services	Edit Translate Delete
Select Consulting	Consulting	Enable Consulting	Weight for Consulting	Edit Translate Delete
Select Training	Training	Enable Training	Weight for Training	Edit Translate Delete
Select Workshops	Workshops	Enable Workshops	Weight for Workshops	Edit Translate Delete
Select Contact	Contact	Enable Contact	Weight for Contact	Edit Translate Delete

One row of the tree, chosen

The same element with #multiple turned off, which is what a picker is: the check boxes become radio buttons and the "select all" cell in the header goes away, because selecting every row of a list you may only pick one of means nothing. The tree being picked from is the menu above, so it is a link that is being given a new parent, and the rows the link may not be moved under -- itself, and everything below it -- are disabled. A theme that only ever sees the multiple variation of this element misses both differences.

	Menu link	Level the moved link would sit at
	Main navigation	Top level
	Home	Level 2
	About us	Level 2
	Our team	Level 3
	History	Level 3
	The founding	Level 4
	Services	Level 2
	Consulting	Level 3
	Training	Level 3
	Workshops	Level 4
	Contact	Level 2

The same trees in the tables that have no such column -- dragged, grouped into regions, or simply printed -- are on the hierarchical tables example. The menu overview form and the terms overview form as core really builds them, without the column of check boxes this example puts in front of them, are on the menu and taxonomy overview example.