Re-writing the above problem...

I have a scenario where I am displaying a list of categorized items. For each category I am displaying a tab. Within each tab is a datatable that lists the items for that specific category. In the datatable I only render the column if the vehicleCategoryID matches the category for the tab selected. So if "Cars" has a categoryID of 1 and "Trucks" has a categoryID of 2 then when the first tab is selected I only render the column if the categoryID is 1. Notice I am using a single datatable here as it is much easier to create, manipulate, and read instead of the 7 different datatables I would have to create otherwise. At first glance this works great. When I click on the "Cars" tab I only see car models and when I click on the "Trucks" tab I see only truck models. The problem with this though is I noticed some odd spacing between some of the rows in the tables. Not horrible, but enough to throw the ui look off. Upon further inspection of the page source I found that the spacing between rows was caused by empty additional tags being added without any matching tags. This is when I realized that even though the columns were not being rendered due to how I specified the rendered attribute, the rows were still being rendered. I suppose I made a mistake in assuming that if no columns were rendered, the rows would not be rendered either. See the pseudo-code below for an example of what I am talking about.

My question is obviously has anyone easily worked around this issue and gotten the tags to not render. I was hoping for an easy solution as I need to deploy this application shortly, but I am open to any responses on the matter.



For example pseudo-code:

(datamodel "vehicleDataModel" contains all data for both "Cars" and "Trucks")
...



<h:outputText value="#{vehicleData.vehicleModel}" />






<h:outputText value="#{vehicleData.vehicleModel}" />



...