【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で各行の高さを定義します。
ソースは以下となります。

```xml: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>
```
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2719619/6daa73cf-f2ba-2dde-9003-d2abf05189e2.png)







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

<table>
<caption>sap.ui.tableにおけるver.1.119 以降非推奨な旧プロパティ及び代替となる推奨プロパティ一覧</caption>
<thead>
<tr><th>旧<br>プロパティ</th><th colspan="2">新（ver.1.119 から利用可能）<br>プロパティ  ／ 使用するクラス</th><th>概要</th></tr>
</thead>
<tbody>
<tr><td>visibleRowCountMode</td><td>rowMode</td><td>sap.ui.table.Table</td><td>行モード</td></tr>
<tr><td>visibleRowCount</td><td>rowCount</td><td>sap.ui.table.rowmodes.Fixed または
sap.ui.table.rowmodes.Interactive</td><td>最初に表示される行の数</td></tr>
<tr><td>fixedRowCount</td><td>fixedTopRowCount</td><td>sap.ui.table.rowmodes.Auto または
sap.ui.table.rowmodes.Fixed または
sap.ui.table.rowmodes.Interactive</td><td>上部に固定されている行の数</td></tr>
<tr><td>fixedBottomRowCount</td><td>fixedBottomRowCount</td><td>sap.ui.table.rowmodes.Auto または
sap.ui.table.rowmodes.Fixed または
sap.ui.table.rowmodes.Interactive</td><td>下部に固定されている行の数</td></tr>
<tr><td>rowHeight</td><td>rowContentHeight</td><td>sap.ui.table.rowmodes.Auto または
sap.ui.table.rowmodes.Fixed または
sap.ui.table.rowmodes.Interactive</td><td>行の高さ</td></tr>
<tr><td>minAutoRowCount</td><td>minRowCount</td><td>sap.ui.table.rowmodes.Auto または
sap.ui.table.rowmodes.Interactive
</td><td>表示される行の最小数</td></tr>
</tbody>
</table>