Adding and configuring a data table

Show Me

With the Data Table component, you can display data from a database or other data source in a table format.

There are several ways to add a data table to a Faces JSP file:

• Drag a Data Table component from the Faces Components drawer on the palette to a Faces JSP page, add columns to the table, add Faces components to the columns, and then bind data to the table and the components it contains. You can use the Value field in various Properties views to bind data. This is the most difficult way to add a data table to a page.

• Drag a relational record list from the Data drawer on the palette to a page. The "Add Relational Record List" wizard opens. This wizard allows you to add a data table to the page and bind it to data from a relational record list. Make sure to check the Add data controls option in the wizard so that a data table is added to the page.

• Drag an existing relational record list from the Page Data view to the page. The "Insert Record List" wizard opens. This is the way that the following steps describe.

To automatically add a data table that is bound to an existing relational record list:

1. Open a Faces JSP file.

2. Open the Page Data View (Window > Show view > Page Data).

3. Drag an existing relational record list in the Page Data view to the Faces JSP file. The "Insert Record List" wizard opens.

   Note: If you do not have an existing relational record list, right-click within the Page Data view and choose New > Relational Record List. The "Add Relational Record List" wizard opens.

4. Next to Data control to create, select the type of data table you want to create. The default is a multi-column data table so that you have one row for each data entry.

5. Under Columns to display, check the columns you want to appear in the data table. You can also change the accessibility label and change the default control type (for example, you can change an input field to a combo box field).

6. Click Options for additional accessibility options.

7. Click Finish. The data table is added to the page.

8. To set additional properties for the data table:
   • At the Properties view for the data table (dataTable), add a header and footer to the data table by checking Show header and Show footer. A header displays along the top of the data table and a footer along the bottom of the data table. Each contains a Panel Box component to which you can drag other Faces components. For example, you can drag an Output component onto the Panel Box component to give the data table a name.

   • At the Display option tab of the Properties view for the data table, you can set a way for users to page through the table if it contains a large number of records. For example, if you click Add a Web style pager, a pager is created in the footer of the data table. The pager displays a series of page numbers with hyperlinks to the appropriate pages

   • At the Row actions tab of the Properties view for the data table, you can add actions that execute when a row on a table is clicked or add an action that executes on selected rows in a table.

To learn more about adding and configuring data tables and about relational record lists, do the following tutorial: Displaying dynamic information on Web pages with JavaServer Faces

 

Related concepts

Data table components
Data access for Faces components

 

Related tasks

Creating Faces applications - overview
footer. A header is displayed along the top of the data table and a footer along the bottom of the data table. You can drag other Faces components to the header and footer. For example, if you want a title for the table and an image next to the title, you can drag an Output component and an Image component to the header.">Adding a header and footer to a data table
Managing columns in a data table
Adding paging to a data table
Enabling row selection for a data table
Adding row category support to a data table
Adding row edit to a data table
Associating row actions with a data table
parameter from one Faces JSP page to another. Several Faces components, such as command buttons or command hyperlinks, can help you do this">Passing parameters with a data table

Related reference
Faces components reference
Faces attributes reference