libgdx, table in scrollpane

Question

I'm trying to make a shop for my game. In this shop, there should be 2 scroll pannel : one with your iventory's stuff, the other one with what the dealer sells.

(It 'd like to make it this way) http://i.stack.imgur.com/5gLUr.jpg

So at first, I tried to put a list in my ScrollPane, but I can't put both image of my weapons and text in those. So I tried to put a table in my ScrollPane : as long as I have stuff in my inventory, I add cells with the item's texture, another one with the name of the weapon, ...) But there's no way I found to select the table ...

So I'm a bit confused : if I use a List, I can't put texture and make it look fancy, but with Tables, I can't select the items ...

Have you guys got any ideas of how I should do that ?

Thanks !

EDIT : Here is some code, but no everything since it's pretty ugly !

Table test3 = new Table(skin2);
    for(WeaponElement weapon : GameScreen.dataLoader.getWeaponArray()){

            Image img = new Image(new Texture(weapon.getIconPath()));
            test3.add(img).width(32);
            test3.add().width(10);
            test3.add(weapon.getName()).align(Align.left).row();

    }

    panelShop = new ScrollPane(test3, skin2);
    panelShop.layout();

So basically, I add all my weapons into my test3 table rows add it into my ScrollPane, but i'd like to make them selectable, with I can do by using lists but if I do so, I can't use anymore tables to make it look great...

Answer 1

What about using Buttons to push? The example below shows a table with one button a row. Use a Button with the text you want to display and add a picture beside it.

Table scrollableTable = new Table(skin);
scrollableTable.setBounds(0, 0, Gdx.graphics.getWidth(), Gdx.graphics.getHeight());

for(WeaponElement weapon : GameScreen.dataLoader.getWeaponArray()){
    final TextButton button = new TextButton(wapon.name, skin, "default");
    button.addListener(new ClickListener() {
        @Override
        public void clicked(InputEvent event, float x, float y) {
            // do stuff
        });
    scrollableTable.add(button).center();

    // add a picture
    Image img = new Image(new Texture(weapon.getIconPath()));
    scrollableTable.add(img).width(32);

    // finish a row
    scrollableTable.row();
}

Answer 2

Try Tree ui component and use it as table. It is selectable and accepts Actor as node (use Table as row layout). See com.badlogic.gdx.tests.TestTree ( link ) example.