This tag is used to create table on the page. The component is rendered as an html <table> element. UIColumn child components are responsible for rendering columns of the table. In these columns you can put any type of component like input text box, output text, command button etc.<h:column> tag is used to create column. There can be many column tags within dataTable tag. You can set header and footer in this table. For this <f:facet> tag is used. data table component and its children column component can use header and footer facet.
We can associate this table element to backing bean. So we can obtain data from this backing bean and display it on the table. Association of backing bean can also be helpful for event handling purpose. Suppose we inserted command button in columns of the table then event handling can be applied here. If you want to customize the table then cascading stylesheet (CSS) can be used. This will help you to enhance the appearance of the table's headers, footer, rows, columns.
This section provides you the code to which uses this
tag and some of its attributes. It uses backing bean that supplies data to the
data table to be rendered to the cells of the columns of the table.
code description :
Rendered Output :
In this example we have used <h:dataTable> tag. This <h:dataTable> tag has many attributes to give form and shape to the table and getting data from backing bean's attribute to display this data to the columns of the table. <f:facet> tag is used to create a header and a
footer for a dataTable component and it can create the same for columns also. So in this example we have used facet tag in dataTabe tag to create header and footer of the table component and in column tag also to create header for column. In this example, "This is 'dataTable' demo" is the header and "The End" is the footer for the table and "id" "name" "phone" "city" "pin" are headers for columns. In his example we have populated data to the table from bean named "TableBean". It contains an attribute "perInfoAll" that is an array of objects of type "perInfo" class which contains some attributes like id, name, phone, city, pin that is to be displayed on the table. In the value attribute of dataTable tag, we have specified the binding expression to bind this component to the bean (
and value specified in var attribute is used to populate data to the column of
the table from attributes defined in class perInfo (
The code for the bean has been given below (remember to specify it in faces-cocfig.xml
HTML Source Code:
<html> <body> <form id="_id0" method="post" action="/dt/data.jsf;jsessionid =B95AF7B5F7D80BCB5638B91AC8154C33" enctype="application/x-www-form-urlencoded"> <br><br><br> <table id="_id0:dt1" bgcolor="#F1F1F1" border="10" cellpadding="5" cellspacing="3" dir="LTR" frame="hsides" rules="all" summary="This is a JSF code to create dataTable." width="50%"> <thead> <tr><th colspan="5" scope="colgroup">This is 'dataTable' demo</th></tr> <tr> <th scope="col">id</th> <th scope="col">name</th> <th scope="col">phone</th> <th scope="col">city</th> <th scope="col">pin</th> </tr> </thead> <tfoot> <tr><td colspan="5">The End</td></tr> </tfoot> <tbody> <tr> <td>101</td> <td>CHANDAN</td> <td>9891444444</td> <td>aaa</td> <td>11111</td> </tr> <tr> <td>102</td> <td>RAVI</td> <td>9911666666</td> <td>bbb</td> <td>22222</td> </tr> <tr> <td>103</td> <td>JOHN</td> <td>9313888888</td> <td>ccc</td> <td>33333</td> </tr> <tr> <td>104</td> <td>ANDREW</td> <td>9911222222</td> <td>ddd</td> <td>44444</td> </tr> </tbody> </table> <br><br> <input type="hidden" name="_id0" value="_id0" /> </form> </body> </html>
This tag has some attributes. These are listed below :
- none No side, Default Value
- above Top side only
- below Bottom side only
- hsides Top and bottom sides only
- vsides Right and left sides only
- lhs Left hand side only
- rhs Right hand side only
- box All four sides
- border All four sides
If you are facing any programming issue, such as compilation errors or not able to find the code you are looking for.
Ask your questions, our development team will try to give answers to your questions.