Table Component Properties Window

See Also | Tutorials

You see the Properties window for a Table component  when you select the outer part of the component on a page that you are editing in the Visual Designer, or you select the table part of this composite component in the Outline window.

When you select this component in the Visual Designer, you also see it in the Outline window, where you can select the part of the component you want to work with. The Table component consists of a set of one or more Row Group components, each of which has one or more Column components. Each column by default contains Static Text  components.

• Note: You can use the Table Layout dialog box to set many of these properties. Not only is that dialog box easier to use in some respects than individual Properties windows for the Table, Column, and Row Group components, but you can work more naturally with the table and all its columns there. To open the dialog box, right-click the table in the Visual Designer and choose Table Layout.

The Table part of this component has the following properties.

General

• id. Type: String
  The name of the Table component in the page bean and the JSP file.
   
  

Appearance

• augmentTitle. Type: boolean
  If selected, augments the title with the range of items currently displayed and the total number of items in the table. For example, (1-25 of 250). If the table is not paginated, the title is augmented only with the number of displayed items. If this property is not selected, no extra text displays in the title, so any values set for the itemsText and filterText properties are ignored.
   
  
• cellPadding. Type: String
  The number of pixels to add on all sides of the contents of each cell. Setting this property to 0 causes a default padding to be applied.
   
  
• cellSpacing. Type: String
  The spacing between cells in pixels. Setting this property to 0 causes a default spacing to be applied.
   
  
• clearSortButton. Type: boolean
  If selected, a Clear Table Sort button is displayed that the user can click to remove all sorting currently applied to the table, returning the table items to the order they were in when the page was initially rendered.
   
  
• deselectMultipleButton. Type: boolean
  If selected, a control is displayed that the user can click to uncheck a column of checkboxes. The control uses the ID given to the selectId property of the Column. For more information on this property, see Column Component Properties.
   
  
• deselectSingleButton. Type: boolean
  If selected, a control is displayed that the user can click to deselect a column of radio buttons when only a single table row can be selected at a time. The control uses the ID given to the selectId property of the Column. For more information on this property, see Column Component Properties.
   
  
• footerText. Type: String
  The text displayed for the table footer.
   
  
• itemsText. Type: String
  Text to add to the title of an unpaginated table. For example, if your table title is Critical and there are 20 items in the table, the default title would be Critical (20). If you specify the value of this property as alerts, the table title would be Critical (20 alerts).
  • Note: The augmentTitle property must be set as well, or this property will be ignored.
  
   
  
• lite. Type: boolean
  If selected, changes the table style to make the table appear visually less heavy, generally by omitting the shading around the table and in the title bar. Typically used in portlets.
   
  
• paginateButton. Type: boolean
  If selected, displays a control that enables users to switch between viewing all data on a single page, an unpaginated table, and seeing data in multiple pages, a paginated table.
   
  
• paginationControls. Type: boolean
  If selected, displays table pagination controls that enable users to change which page is displayed. The controls include an input field for specifying the page number, a Go button to go to the specified page, and buttons for going to the first, last, previous, and next page.
   
  
• selectMultipleButton. Type: boolean
  If selected, a control is displayed that the user can click to check an entire column of checkboxes, selecting all rows in the table. The control uses the ID given to the selectId property of the Column. For more information, see Column Component Properties.
   
  
• sortPanelToggleButton. Type: boolean
  If selected, a control is displayed the user can click to open and close the table sort panel.
   
  
• style. Type: String
  Cascading Style Sheet rules (CSS level 2) to be applied to the component. You can enter values directly or click the ellipsis (...) button to use the Style Editor.
  • Note: This property overrides any settings in the theme or the project CSS file for this component. If a style specified in this property does not appear to take effect, it is because an area of the component is obscured by a child component that has different style settings.
  
   
  For a list of CSS2 style attributes, see the web page at
  http://www.w3.org/TR/REC-CSS2/propidx.html
   
  
• styleClass. Type: String
  A space-separated list of CSS2 style classes to be applied when the component is rendered. The style classes must be defined in the project's style sheet or in the theme's CSS file. If you click the ellipsis button (...), you see a list of all styles you can add to this property. For information on adding CSS classes and rules to the project's cascading style sheet, see CSS Editor.
  • Note: See the note above under the style property description for an explanation of why a class added to this property might appear to have no effect on the component.
  • Note: If you add a CSS style class from the current theme to your project CSS file and you redefine the style class, the change affects all components that use this style class. However, you can add your own style classes to the project CSS file that redefine the default style classes, and then when you add them to this property, the changes affect only this instance of this component.

    For the defaulttheme.jar CSS style classes for this component, see Table Component CSS Classes.

  
   
  
• summary. Type: String
  Information about the Table's purpose or structure or both that is readable by a screen reader.
   
  
• title. Type: String
  The title displayed at the top of the table. When you first drop the table, you can edit the title directly.
   
  
• width. Type: int
  The width of the table in pixels or as a percentage of the page width. If this property is left blank, the table width is 100%.
   
  

Behavior

• toolTip. Type: String
  Text that displays as a tooltip if the mouse cursor hovers over the table.
   
  
• visible. Type: boolean
  Indicates whether or not the component can be seen by the user on the rendered HTML page. This property is selected by default. If you deselect this property, the component's HTML code is rendered on the page, but the component is not visible in the browser because it is hidden by a style setting. Because the HTML code is rendered, the component can still be processed on form submissions, and users who view source in the browser can see the HTML code. In addition, your web application can use client-side JavaScript to show or hide the component.
  • Note: If you need to completely hide the component, for example, because it contains sensitive information that certain users should not see, deselect the rendered property.
  
   
  

Accessibility

• tabIndex. Type: String
  Optionally specifies the position of the component in the tab order of the document, determining when the component will get focus if the user tabs through the document. The value must be an integer between 0 and 32767.
   
  

JavaScript

• deselectMultipleButtonOnClick. Type: String
  Scripting code executed when the user clicks the Deselect Multiple button. See the deselectMultipleButton property described above.
  • Note: Use the JavaScript setTimeout() function to invoke the script to ensure that the checkboxes are unchecked immediately.
  
   
  
• deselectSingleButtonOnClick. Type: String
  Scripting code executed when the user clicks the Deselect Single button. See the deselectSingleButton property described above.
  • Note: Use the JavaScript setTimeout() function to invoke the script to ensure that the radio button is unset immediately.
  
   
  
• onClick. Type: String
  JavaScript to be executed when the user clicks the component.
   
  
• onDblClick. Type: String
  JavaScript to be executed when the user double-clicks the component.
   
  
• onKeyDown. Type: String
  JavaScript to be executed when the component has focus and a key is pressed.
   
  
• onKeyPress. Type: String
  JavaScript to be executed when the component has focus and a key is pressed and released.
   
  
• onKeyUp. Type: String
  JavaScript to be executed when the component has focus and a key is released.
   
  
• onMouseDown. Type: String
  JavaScript to be executed when the mouse cursor is over the component and the user presses down on the mouse button.
   
  
• onMouseMove. Type: String
  JavaScript to be executed when the user moves the mouse cursor within the component.
   
  
• onMouseOut. Type: String
  JavaScript to be executed when the user moves the mouse cursor away from the component after it has been over the component.
   
  
• onMouseOver. Type: String
  JavaScript to be executed when the user moves the mouse cursor onto the component.
   
  
• onMouseUp. Type: String
  JavaScript to be executed when the mouse cursor is over the component and the user releases the mouse button.
   
  
• selectMultipleButtonOnClick. Type: String
  Scripting code executed when the user clicks the Select Multiple button. See the selectMultipleButton property described above.
   
  

Advanced

• extraActionBottomHtml. Type: String
  Extra HTML code to be appended to the <td> tag that is rendered for the bottom action bar. Only use code that is valid for a <td> element. The code you specify is inserted without being checked for validity. For example, you might set this property to the following value:
   
     style='myActionBarStyle'
   
  
• extraActionTopHtml. Type: String
  Extra HTML to be appended to the <td> tag used for the top action bar. Only use code that is valid for a <td> element. The code you specify is inserted without being checked for validity. For example, you might set this property to the following value:
   
     style='myActionBarStyle'
   
  
• extraFooterHtml. Type: String
  Extra HTML to be appended to the <td> tag that is rendered for the table footer. Only use code that is valid for a <td> element. The code you specify is inserted without being checked for validity. For example, you might set this property to the following value:
   
     nowrap='nowrap'
   
  
• extraPanelHtml. Type: String
  Extra HTML to be appended to the <td> tag that is rendered for an embedded panel. Only use code that is valid for a <td> element. The code you specify is inserted without being checked for validity.
   
  
• extraTitleHtml. Type: String
  Extra HTML to be appended to the <caption> tag that is rendered for the table title. Only use code that is valid for a <td> element. The code you specify is inserted without being checked for validity. For example, you might set this property to the following value:
   
     style='myTitleStyle'
   
  
• hiddenSelectedRows. Type: boolean
  If selected, indicates that there might be selected rows currently hidden from view.
   
  In most cases, rows should be unselected when no longer in view. For example, the user selects rows of the table and navigates to another page, or the user applies a filter or sort that hides previously selected rows from view. By deselecting the hidden rows, you prevent the user from invoking an action on rows that are not displayed.
   
  This property applies to cases when maintaining the selected state of unseen rows across table pages is necessary. When this property is selected, text is displayed in the table title and footer to indicate the number of selected rows that currently are hidden from view. This title and footer is also displayed with a count of 0 when there are no hidden selections to make the user aware of the possibility of hidden selections.
   
  When this property is not selected, on paginated tables, the descending sort button for the select column is disabled to prevent a sort action from moving selected rows to a page other than the current page.
   
  
• internalVirtualForm. Type: boolean
  If selected, the table should use an internal virtual form that enables all table children to be submitted. An internal virtual form is equivalent to enclosing the table component in its own HTML form, separate from other components on the same page. For example, a required text field and a table are on the same page. If the user clicks a table sort button when the required text field has no value, the sort action is never invoked because a value is required from the text field and validation fails. Putting the table in a virtual form enables the sort action to be invoked because the text field is not processed when the user clicks the sort button.
   
  
• rendered. Type: boolean
  If selected, the component is to be rendered and processed on any subsequent page submission. If not selected, the Column and its contents (child components of the Column) do not appear on the page at all, not even as hidden components. If this property is not selected (false), it overrides the rendered properties of any child components.
   
  You can bind this property to a JavaBeans property that determines when the component does get rendered. For example, an airline reservation form might show a Column for frequent flyers and not show it for the general public. To bind this property, click the ellipsis button (...) to the right of the property and choose Use Binding in the dialog box.
   
  

See Also

Table Component

Working With Components

Component Tasks: Quick Reference

Tutorials

Delving Into Components Tutorial

Using Table Components Tutorial

About Stylesheets and Component Layout

Understanding Scope and Managed Beans