Filter On Left, For Table (Data) On Right

I have some user types set up in my system and need to list them according to the attached image (created using balsamiq, great wireframing tool btw):

I need the filter on the left, with the data grid/table on the right

What would be great is if the data grid on the right is in fact an area which itself refreshes (and not the whole page gets refreshed), I’m guessing with jquery?

But just to start with, even if the page needs to be entirely refreshed that’s OK and maybe a good place to start I’m thinking. More important is that the layout is as in the screenshot.

Any help / tips on how to get started would be greatly appreciated, as I literally have no idea :s


Have you already started with the rest of the side if not have a look at yii-bootstrap and twitter bootstrap itself. Its a very good css framework and adds cross browser support for most browsers. then with spans you should easily be able move to the column layout with out issues.

Hi gvanto,

I recommend you to follow the logical structure of the gii-generated "admin" page.

The filter ("advanced search" form) is on top, instead of left, and is initially hidden from the user.

But all the difference is just as small as that. The search form will update only the grid in an ajax manner.

As to the appearance of the page, you can do anything you like.

Thanks guys for the replies. Softark yes this is what I thought would be the best as well, just wasn’t quite sure. Thanks will attempt this.