dynamic nested data tables

best markup structure

[benihana]

Im trying to come with the best structure for the following data tables.

Basically each row initially is a data from a shopping basket, with an ID, a date, number of items, retailer, total price etc.

So far so good.

However, we need the ability for users to be able to click on a given row to dril down and display more detail - i.e. each individual product name, price etc. This needs to happen inline, ideally using ajax to make it fast and slick.

It seems to me that when expanded, the selected baskets data has become like an indivual table, with the main basket row being similar to the headers, that exists within he main table.

I cannot see how to mark this up to represent parent>child relationship between the baskets and the individual items, particuarily as the only the basket data is displayeed by default.

Hope im being clear.
Ideas welcomed.
Ben

[fside]

That's a very broad and general question. I'm not sure what you're asking, But I'll guess. You're not describing a floating box/table layout, so typical now, but more a line-oriented treeview. If it's a treeview, the hierarchy is obvious. And you can open and close levels as you wish.

But if you are using boxes and thumbnail images, you might have a floater of a fixed size, perhaps, that pops up from the item and which displays more and more detailed info, except that you can't back out. You close, and start top-down again. One way to work out would just be to provide a nav-path, like you see even here in the 'blue line', above. Then you click back on each level.

[benihana]

I perhaps havent made it clear what im trying to do.

Its not page layout and nothing to do with floats.

Its a data table where each row can have 0 or more child rows.