<mvc:View
	controllerName="sap.m.sample.TableColumnWidth.Table"
	xmlns:l="sap.ui.layout"
	xmlns:mvc="sap.ui.core.mvc"
	xmlns:core="sap.ui.core"
	xmlns="sap.m">
	<MessageStrip
		text="Set the width of at least one column to auto or the fixedLayout property of the table to Strict."
		type="Success"
		class="sapUiSmallMargin"
		showIcon="true"/>
	<Table
		id="table"
		mode="MultiSelect"
		items="{
			path: 'products>/ProductCollection'
		}"
		columns="{
			path: 'clone>/'
		}">
		<headerToolbar>
			<Toolbar>
				<Title text="Products (Correct Usage)" level="H2"/>
				<ToolbarSpacer />
				<CheckBox text="Strict Layout" select="onCheckBoxSelect"/>
			</Toolbar>
		</headerToolbar>
		<columns>
			<Column width="{clone>width}" styleClass="{clone>styleClass}" demandPopin="{clone>demandPopin}" minScreenWidth="{clone>minScreenWidth}" popinDisplay="WithoutHeader">
				<Input value="{clone>width}" description="{clone>header}"/>
			</Column>
		</columns>
		<items>
			<ColumnListItem vAlign="Middle" type="Navigation">
				<cells>
					<Text text="{products>Name}" wrapping="false" />
					<Text text="{products>SupplierName}" wrapping="false"/>
					<Text text="{products>Description}" wrapping="false" />
				</cells>
			</ColumnListItem>
		</items>
	</Table>
	<MessageStrip
		text="Do not try to give percent width to all columns even if it reaches 100% total column width."
		type="Error"
		class="sapUiLargeMarginTop sapUiSmallMargin"
		showIcon="true"/>
	<Table
		mode="MultiSelect"
		items="{
			path: 'products>/ProductCollection'
		}"
		columns="{
			path: 'columns>/'
		}">
		<headerToolbar>
			<OverflowToolbar>
				<Title text="Products (Wrong Usage)" level="H2"/>
			</OverflowToolbar>
		</headerToolbar>
		<columns>
			<Column width="{columns>width}" styleClass="{columns>styleClass}" demandPopin="{columns>demandPopin}" minScreenWidth="{columns>minScreenWidth}" popinDisplay="WithoutHeader">
				<Input value="{columns>width}" description="{columns>header}"/>
			</Column>
		</columns>
		<items>
			<ColumnListItem vAlign="Middle" type="Navigation">
				<cells>
					<Text text="{products>Name}" wrapping="false" />
					<Text text="{products>SupplierName}" wrapping="false"/>
					<Text text="{products>Description}" wrapping="false" />
				</cells>
			</ColumnListItem>
		</items>
	</Table>
</mvc:View>