Colspan in tables

I’m currently reading through the code for VScrollTable and its enclosed classes. I’m mostly trying to familiarise myself with it before I jump in and write a component extending Table.

The first thing I’d like to do is allow for a colspan to be set on a cell. I’ve found that there’re a couple of addCell() methods that I can override that will set up the DOM for the cell. This is almost certainly where I’d need to add the colspan attribute, however it seems my only option to add this in would be to sub class VScrollRow and cut’n’paste the code in these methods in to my sub class as they set up the DOM as I can’t find a way to access the resultant nor inject my own stuff in as the DOM is being constructed.

Would there be another way to access the “td” element or inject stuff in without having to cut’n’paste the addCell() implementations?

The next job from there will be to make sure the cell widths work which colspan’d cells. I think I can do this by subclassing VScrollTableBody and overriding its setColWidth() method making it aware of spanning cells. I suspect this is pretty straight forward as I can use getRowByRowIndex() method to get my extension of VScrollRow with the extra cell info.

As far as I can tell, that’ll be all that I need to deal with for colspans, but I’m sure I’ll encounter more in testing.

Am I on the right track here?


Well I’ve done this bit and it’s more or less working. There’re still some bugs, but I think I’m pretty close. I don’t have the code in front of me, but I realised that I needed to do it a different way. My reimplementation of addCell records the cell that it produced in an array along with details about whether the column has been replaced by a colspan’d row. This way when setColWidth() is called on a cell that isn’t actually there it can be added to the colspan’d cell

I am using Vaadin for a relatively complicated application in the medical industry, and our current UI designs require me to create what looks like a table that supports colspans for specific rows. I don’t want to use a GridLayout for the whole thing as I lose some of the built in functionality of the Table. I was getting ready to start extending vaadin classes for my own custom component when I found your post. Did you finally get this working perfectly? If so, do you have any tips?

I’ve made some good progress, but I’ve been on holidays for the last few weeks. I’ll be continuing my work sometime in the next few weeks and would be happy to share what I have with you. I do plan to eventually wrap this up in to an add-on, but that could take a while :wink: In the meantime I’m happy to email you what I have.

hey royce,

it’s great that you have tried for this colspan stuff…
can you mail me that stuff…

i want the behavior of table to be some what
Like This

ok…will it be possible to do one thing…

as you know I want table inside the table which is not possible right now

so if i put all the column headers of the Main table(suppose 4 rows) and Nested table(suppose 3 rows) into one table (total 7 rows )…

so after doing this will it be possible to put 4 columns to be grouped into one row and remaining 3 columns to be grouped into another row below it…

Ashwin, I’d be happy to, but give me your email address :wink:

I’m going to be working on this again 4 days out of the next week unless my priorities are suddenly changed. I’m keen to pop this in to the add on directory, hopefully I’ll have something in the next week or two for you to download =D