Styling Visualforce Data Table Component

Visualforce DataTable Component
Visualforce pages can be styled either by mimicking the look and feel of a standard Salesforce page or by using your own stylesheets or content types.
Many Visualforce components have a style or styleClass attribute. Defining either of these attributes in a component allows you to associate CSS code with the component. Custom CSS code enables you to change the default visual style of a component, including its width, height, color, and font.
To display a list or table with your own custom styling, use <apex:dataTable>.  <apex:dataTable> generates basic HTML table output without applying any styling to it. This table is defined by iterating over a set of data, displaying information about one item of data per row. The body of the <apex:dataTable> contains one or more column components that specify what information should be displayed for each item of data.

For this post, a custom object  “Bank__c”  is used and the goal is to achieve the output below using custom styling for the table that will be generated.

table1                                                                                                                                                                                                   Given this Visualforce code:

The Apex code will be added on request.                                                                                                                                     The table generated without applying any styling to the page is attached here:                                                               table2                                                                                                                                             The <apex:datatable> attributes that will be used in this post are headerValue, rowClasses, and style. That is:

For more information on the dataTable attributes check here                                                                                              For the column components, I assigned the same value to all the styleClass attribute, that is:

Leave a Reply

Close Menu