【SAPUI5】sap.ui.tableのrowModeで行設定をする

はじめに

sap.ui.tableのプロパティで、一部version 1.119以降非推奨となっているものが存在します。
例えば、テーブルの行の高さや表示行数を定義する際、
テーブルタグにプロパティのrowHeightやvisibleRowCountを設定しますが、
これらは非推奨の対象です。※1が対象
今記事では新たな設定方法として推奨されているrowModeを使用してテーブル設定を行ってみました。

※１　ver.1.119 以降非推奨なプロパティ
・visibleRowCountMode
・visibleRowCount
・fixedRowCount
・fixedBottomRowCount
・rowHeight
・minAutoRowCount

rowModeに関して

rowModeのタイプは以下の３つとなっています。例えば、テーブルタグにrowMode="Fixed"と設定することで適用されます。
こちらは従来のvisibleRowCountModeの設定方法と同じです。

タイプ	概要
Auto	テーブルスペースに表示可能な行数を自動的に設定
Fixed	固定数の行を設定（デフォルトは10行）
Interactive	リサイズボタンをドラッグすることで表示行数を設定

そして、rowModeの各クラスを使ってテーブル行を詳細に設定します。
・sap.ui.table.rowmodes.Auto
・sap.ui.table.rowmodes.Fixed
・sap.ui.table.rowmodes.Interactive

rowModeでテーブル設定

ではrowModeを使用して実際にテーブル設定を行っていきます。

今回はテーブル固定で、最初の表示行を5行、各行の高さを50pxに設定してみます。
sap.ui.table.rowmodes.Fixedのクラスを使用します。
Fixedクラスのプロパティ：rowCountで行数を定義、rowContentHeightで各行の高さを定義します。
ソースは以下となります。

Main.view.xml

<mvc:View
	controllerName="sap.ui.table.sample.ColumnResizing.Controller"
	xmlns="sap.ui.table"
	xmlns:mvc="sap.ui.core.mvc"
	xmlns:m="sap.m"
	xmlns:r="sap.ui.table.rowmodes"
	height="100%">
	<m:Page
		showHeader="false"
		class="sapUiContentPadding">
		<m:content>
			<Table
				id="table"
				rows="{tableData>/products}"
				rowMode="Fixed">
			     <rowMode>
 	            	<r:Fixed rowCount="5" rowContentHeight="50px"/>
                 </rowMode>
				<columns>
					<Column>
						<m:Label text="{i18n>name}" />
						<template>
							<m:Text text="{tableData>name}" wrapping="false" />
						</template>
					</Column>
					<Column>
						<m:Label text="{i18n>id}" />
						<template>
							<m:Text text="{tableData>id}" wrapping="false" />
						</template>
					</Column>
					<Column>
						<m:Label text="{i18n>birthDate}" />
						<template>
							<m:Text text="{tableData>birthDate}" wrapping="false" />
						</template>
					</Column>
			    	<Column>
						<m:Label text="{i18n>office}" />
						<template>
							<m:Text text="{tableData>office}" wrapping="false" />
						</template>
					</Column>
				</columns>
			</Table>
		</m:content>
	</m:Page>
</mvc:View>

まとめ

今回話題に挙げたプロパティを表にまとめてみました

sap.ui.tableにおけるver.1.119 以降非推奨な旧プロパティ及び代替となる推奨プロパティ一覧

旧 プロパティ	新（ver.1.119 から利用可能） プロパティ ／ 使用するクラス		概要
visibleRowCountMode	rowMode	sap.ui.table.Table	行モード
visibleRowCount	rowCount	sap.ui.table.rowmodes.Fixed または sap.ui.table.rowmodes.Interactive	最初に表示される行の数
fixedRowCount	fixedTopRowCount	sap.ui.table.rowmodes.Auto または sap.ui.table.rowmodes.Fixed または sap.ui.table.rowmodes.Interactive	上部に固定されている行の数
fixedBottomRowCount	fixedBottomRowCount	sap.ui.table.rowmodes.Auto または sap.ui.table.rowmodes.Fixed または sap.ui.table.rowmodes.Interactive	下部に固定されている行の数
rowHeight	rowContentHeight	sap.ui.table.rowmodes.Auto または sap.ui.table.rowmodes.Fixed または sap.ui.table.rowmodes.Interactive	行の高さ
minAutoRowCount	minRowCount	sap.ui.table.rowmodes.Auto または sap.ui.table.rowmodes.Interactive	表示される行の最小数