apex:panelGrid

Renders an HTML table element in which each component found in the body of the <apex:panelGrid> is placed into a corresponding cell in the first row until the number of columns is reached. At that point, the next component wraps to the next row and is placed in the first cell.

Note that if an <apex:repeat> component is used within an <apex:panelGrid> component, all content generated by the <apex:repeat> component is placed in a single <apex:panelGrid> cell. The <apex:panelGrid> component differs from <apex:dataTable> because it does not process a set of data with an iteration variable.

Example

1<apex:page>
2    <apex:panelGrid columns="3" id="theGrid">
3        <apex:outputText value="First" id="theFirst"/>
4        <apex:outputText value="Second" id="theSecond"/>
5        <apex:outputText value="Third" id="theThird"/>
6        <apex:outputText value="Fourth" id="theFourth"/>
7    </apex:panelGrid>
8</apex:page>

The example above renders the following HTML:

1<table id="theGrid">
2    <tbody>
3        <tr>
4            <td><span id="theFirst">First</span></td>
5            <td><span id="theSecond">Second</span></td>
6            <td><span id="theThird">Third</span></td>
7        </tr>
8        <tr>
9            <td><span id="theFourth">Fourth</span></td>
10        </tr>
11    </tbody>
12</table>

Attributes

Attribute Name	Attribute Type	Description	API Version	Access
`bgcolor`	String	The background color of the rendered HTML table.	10.0	global
`border`	Integer	The width of the frame around the rendered HTML table, in pixels.	10.0	global
`captionClass`	String	The style class used to display the caption for the rendered HTML table, if a caption facet is specified. This attribute is used primarily to designate which CSS styles are applied when using an external CSS stylesheet.	10.0	global
`captionStyle`	String	The style used to display the caption for the rendered HTML table, if a caption facet is specified. This attribute is used primarily for adding inline CSS styles	10.0	global
`cellpadding`	String	The amount of space between the border of each table cell and its contents. If the value of this attribute is a pixel length, all four margins are this distance from the contents. If the value of the attribute is a percentage length, the top and bottom margins are equally separated from the content based on a percentage of the available vertical space, and the left and right margins are equally separated from the content based on a percentage of the available horizontal space.	10.0	global
`cellspacing`	String	The amount of space between the border of each table cell and the border of the other cells surrounding it and/or the table’s edge. This value must be specified in pixels or percentage.	10.0	global
`columnClasses`	String	A comma-separated list of one or more CSS classes associated with the table’s columns. If more than one CSS class is specified, the classes are applied in a repeating fashion to all columns. For example, if you specify columnClasses=“classA, classB”, then the first column is styled with classA, the second column is styled with classB, the third column is styled with classA, the fourth column is styled with classB, and so on.	10.0	global
`columns`	Integer	The number of columns in this panelGrid.	10.0	global
`dir`	String	The direction in which the generated HTML component is read. Possible values include “RTL” (right to left) or “LTR” (left to right).	10.0	global
`footerClass`	String	The style class used to display the footer (bottom row) for the rendered HTML table, if a footer facet is specified. This attribute is used primarily to designate which CSS styles are applied when using an external CSS stylesheet.	10.0	global
`frame`	String	The borders drawn for this table. Possible values include “none”, “above”, “below”, “hsides”, “vsides”, “lhs”, “rhs”, “box”, and “border”. If not specified, this value defaults to “border”. See also the rules attribute.	10.0	global
`headerClass`	String	The style class used to display the header for the rendered HTML table, if a header facet is specified. This attribute is used primarily to designate which CSS styles are applied when using an external CSS stylesheet.	10.0	global
`id`	String	An identifier that allows the panelGrid component to be referenced by other components in the page.	10.0	global
`lang`	String	The base language for the generated HTML output, for example, “en” or “en-US”. For more information on this attribute, see the W3C specifications.	10.0	global
`onclick`	String	The JavaScript invoked if the onclick event occurs–that is, if the user clicks the panel grid.	10.0	global
`ondblclick`	String	The JavaScript invoked if the ondblclick event occurs–that is, if the user clicks the panel grid twice.	10.0	global
`onkeydown`	String	The JavaScript invoked if the onkeydown event occurs–that is, if the user presses a keyboard key.	10.0	global
`onkeypress`	String	The JavaScript invoked if the onkeypress event occurs–that is, if the user presses or holds down a keyboard key.	10.0	global
`onkeyup`	String	The JavaScript invoked if the onkeyup event occurs–that is, if the user releases a keyboard key.	10.0	global
`onmousedown`	String	The JavaScript invoked if the onmousedown event occurs–that is, if the user clicks a mouse button.	10.0	global
`onmousemove`	String	The JavaScript invoked if the onmousemove event occurs–that is, if the user moves the mouse pointer.	10.0	global
`onmouseout`	String	The JavaScript invoked if the onmouseout event occurs–that is, if the user moves the mouse pointer away from the panel grid.	10.0	global
`onmouseover`	String	The JavaScript invoked if the onmouseover event occurs–that is, if the user moves the mouse pointer over the panel grid.	10.0	global
`onmouseup`	String	The JavaScript invoked if the onmouseup event occurs–that is, if the user releases the mouse button.	10.0	global
`rendered`	Boolean	A Boolean value that specifies whether the component is rendered on the page. If not specified, this value defaults to true.	10.0	global
`rowClasses`	String	A comma-separated list of one or more CSS classes associated with the table’s rows. If more than one CSS class is specified, the classes are applied in a repeating fashion to all rows. For example, if you specify columnRows=“classA, classB”, then the first row is styled with classA, the second row is styled with classB, the third row is styled with classA, the fourth row is styled with classB, and so on.	10.0	global
`rules`	String	The borders drawn between cells in the table. Possible values include “none”, “groups”, “rows”, “cols”, and “all”. If not specified, this value defaults to “none”. See also the frames attribute.	10.0	global
`style`	String	The style used to display the panelGrid component, used primarily for adding inline CSS styles.	10.0	global
`styleClass`	String	The style class used to display the panelGrid component, used primarily to designate which CSS styles are applied when using an external CSS stylesheet.	10.0	global
`summary`	String	A summary of the table’s purpose and structure for Section 508 compliance.	10.0	global
`title`	String	The text to display as a tooltip when the user’s mouse pointer hovers over this component.	10.0	global
`width`	String	The width of the entire table, expressed either as a relative percentage to the total amount of available horizontal space (for example, width=“80%”), or as the number of pixels (for example, width=“800px”).	10.0	global

Facets

Facet Name	Description	API Version
`caption`	The components that appear in the caption for the table. Note that the order in which a caption facet appears in the body of a panelGrid component does not matter, because any facet with name=“caption” will control the appearance of the table’s caption.	10.0
`footer`	The components that appear in the footer row for the table. Note that the order in which a footer facet appears in the body of a panelGrid component does not matter, because any facet with name=“footer” will control the appearance of the final row in the table.	10.0
`header`	The components that appear in the header row for the table. Note that the order in which a header facet appears in the body of a panelGrid component does not matter, because any facet with name=“header” will control the appearance of the first row in the table.	10.0

See Also

apex:panelGroup