RichFaces <rich:dataGrid>
It is used to arrange data in a grid. We can update data of datagrid dynamically from the data model. It also supports header, footer, and caption facets.
This component is similar in function to the JavaServer Faces <h:panelGrid>.
Style classes and skin parameters
The following table contains the Style classes (selectors) and corresponding skin parameters for the dataGrid.
Class |
Function |
Skin Parameters |
Mapped CSS properties |
.rf-dg |
It is used to define styles for the grid. |
tableBackgroundColor
tableBorderWidth
|
background-color
border-left-width, border-top-width
|
.rf-dg-cap |
It is used to define styles for the grid caption. |
No skin parameters. |
|
.rf-dg-r |
It is used to define styles for a grid row. |
No skin parameters. |
|
.rf-dg-c |
It is used to define styles for a grid cell. |
tableBorderWidth |
border-bottom-width, border-right-width |
.rf-dg-nd-c |
It is used to define styles for a node cell. |
tableBorderColor |
border-bottom-color, border-right-color |
.rf-dg-th |
It is used to define styles for the grid header section. |
tableBorderColor |
border-bottom-color |
.rf-dg-h |
It is used to define styles for a grid header. |
No skin parameters. |
|
.rf-dg-h-f |
It is used to define styles for the first header. |
No skin parameters. |
|
.rf-dg-h-r |
It is used to define styles for a header row. |
No skin parameters. |
|
.rf-dg-h-c |
It is used to define styles for a header cell. |
tableBorderWidth |
border-bottom-width, border-right-width |
.rf-dg-f |
It is used to define styles for a grid footer. |
No skin parameters. |
|
.rf-dg-f-f |
It is used to define styles for the first footer. |
No skin parameters. |
|
.rf-dg-f-c |
It is used to define styles for a footer cell. |
tableFooterBackgroundColor
tableBorderWidth
|
background-color
border-bottom-width, border-right-width
|
Example
Here, in the following example, we are implementing <rich:dataGrid> component. This example contains the following files.
JSF File
// data-grid.xhtml
Managed Bean
// StudentRecord.java
Output:
|