Horizontal scroll to a table with 'Fake Headers'

Hi
I have created a table with ‘Fake Headers’ based on
this
eaxmple.
Typing in the Text Fields (the fake headers) apply a filter to the table below.

Here is how it looks when the Window is loaded (the fake headers are ‘VM Name’ and ‘IP’) - table_1.png

After I apply a filter (I type ‘test’ in the VM Name header) only one entry is shown in the table (which is OK) - table_2.png

Now I type ‘zzz’ and no records shown in the table (which is OK ) - table_3.png

Now I clear the ‘VM Name’ text field and all records are shown (which is OK) - table_4.png


However
Horizontal scroll is shown under the table.
I do not want this scroll
- I want the table to return to its initial width.

[i]
[b]

[/b]The images are shown in a sequence below.
[/i]

Here is the code:



	private VerticalLayout getTableLayout(VerticalLayout layout) {
		
		final int vmNameWidth = 150;
		final int IPWidth = 150;
		
		final HorizontalLayout filtersInputLayout = getFiltersInputPanel(vmNameWidth,IPWidth);
		layout.addComponent(filtersInputLayout);

		final Table table = initVMsTable(vmNameWidth,IPWidth);
		
		VerticalLayout tableLayout = new VerticalLayout();
		tableLayout.addComponent(filtersInputLayout);
		tableLayout.addComponent(table);
		return tableLayout;
	}

	private HorizontalLayout getFiltersInputPanel(int vmNameWidth, int iPWidth) {
		HorizontalLayout filtersInputPanel = new HorizontalLayout();
		filtersInputPanel.setSpacing(false);
		final List<FilterBundle> filterBundels = new ArrayList<FilterBundle>();
		filterBundels.add(new FilterBundle(VM_PROPERTY_NAME,VM_PROPERTY_NAME,vmNameWidth));
		filterBundels.add(new FilterBundle(VM_PROPERTY_IP,VM_PROPERTY_IP,iPWidth));
		for (FilterBundle filterBundle : filterBundels) {
			TextField textField = getTextField(filterBundle);
			filtersInputPanel.addComponent(textField);
		}
		return filtersInputPanel;

	}


private Table initVMsTable(int vmNameWidth, int IPWidth) {
		RHEVMUIServices UIServices = (RHEVMUIServices) SpringService.getApplicationContext().getBean("RHEVMUIServices");
		IndexedContainer container = UIServices.getVMsContainer();
		vmsTable.setContainerDataSource(container);
		vmsTable.setPageLength(container.size() <= VMS_TABLE_MAX_PAGE_SIZE ?  container.size() : VMS_TABLE_MAX_PAGE_SIZE);

		vmsTable.setEditable(false);
		vmsTable.setFooterVisible(false);
		vmsTable.setSelectable(true);
		vmsTable.setMultiSelect(false);
		

		vmsTable.setColumnWidth(VM_PROPERTY_NAME, vmNameWidth);
		vmsTable.setColumnWidth(VM_PROPERTY_IP, IPWidth);

		vmsTable.setColumnHeaderMode(Table.COLUMN_HEADER_MODE_HIDDEN);
		vmsTable.setWidth(null);
		return vmsTable;
	}



Thanks

Avishay
12152.png
12153.png
12154.png
12155.png

I would try to set a explicit width for the table, something like

vmsTable.setWidth((vmNameWidth + IPWidth) + "px");

instead of

vmsTable.setWidth(null);