【sapui5】sap.m.Tableとsap.ui.table.Tableの違いについて

# はじめに
　担当する案件によって、使用するテーブルが異なることに疑問を抱きました。
どういう違いがあり、どう使いわけたらよいか気になったため、sap.m.Tableとsap.ui.table.Tableの違いを調査し、ここに記します。

# sap.m.Tableとsap.ui.table.Tableの違い
　sap.m.Tableとsap.ui.table.Tableの異なる点について、以下にまとめました。

#### 表：sap.m.Tableとsap.ui.table.Tableの異なる点
|  | sap.m.Table | sap.ui.table.Table |
|:-----------|:------------|:------------|
|ColumnHeaders|ソート機能がついていない|ソート機能がついている|
| ScrollContainer |設定していないと横スクロールができない|設定していなくても横スクロールができる|
| growing       | 設定できる  | 設定できない |
| HeaderToolbar, ColumnHeaders, InfoToolbar | 固定できる※1 | 固定できる※2 |
| ソート, ダウンロード, 列設定  | 設定できる※3 | 設定できる※3 |


※1："sap.ui.layout.form.SimpleForm"を取り入れている場合、固定できなくなる
※2："sap.ui.layout.form.SimpleForm"を取り入れている場合でも、固定できる
※3：ソースコードがsap.m.tableとsap.ui.table.Tableで異なるため注意
（※3については、以下にソースコード記載）

###### ソート
sap.m.Table：itemsを使用
sap.ui.table.Table：rowsを使用


例：

```sap.m.TableのMain.controller.js
handleSortDialogConfirm: function (oEvent) {
	var oTable = this.byId("tableId"),
	mParams = oEvent.getParameters(),
	oBinding = oTable.mBindingInfos.items.binding,
	sPath,
	bDescending,
	aSorters = [];

	sPath = mParams.sortItem.getKey();
	bDescending = mParams.sortDescending;
	aSorters.push(new sap.ui.model.Sorter(sPath, bDescending));
	oBinding.sort(aSorters);
}
```

```sap.ui.table.TableのMain.controller.js
handleSortDialogConfirm: function (oEvent) {
	var oTable = this.byId("tableId"),
	mParams = oEvent.getParameters(),
	oBinding = oTable.mBindingInfos.rows.binding,
	sPath,
	bDescending,
	aSorters = [];

	// 以下の処理はsap.m.tableと同様のため、省略
}
```

###### ダウンロード

sap.m.Table：itemsを使用
sap.ui.table.Table：rowsを使用

例：

```sap.m.TableのMain.controller.js
onDownloadIcon: function (oEvent) {
	var aCols, oRowBinding, oSettings, oSheet, oTable;
	this._oTable = this.byId("tableId");
	oTable = this._oTable;
	oRowBinding = oTable.mBindingInfos.items.binding;

	aCols = this.createColumnConfig();
	var oModel = oRowBinding.getModel();

	oSettings = {
		workbook: {
			columns: aCols,
			hierarchyLevel: "Level"
		},
		dataSource: oModel.oData.rows,
		fileName: this.getTitleText("ファイルのタイトル") + ".xlsx",
		worker: false 
	};
			
	oSheet = new Spreadsheet(oSettings);
	oSheet.build().finally(function () {
		oSheet.destroy();
	});
}
```

```sap.ui.table.TableのMain.controller.js
onDownloadIcon: function (oEvent) {
	var aCols, oRowBinding, oSettings, oSheet, oTable;
	this._oTable = this.byId("tableId");
	oTable = this._oTable;
	oRowBinding = oTable.mBindingInfos.rows.binding;

	// 以下の処理はsap.m.tableと同様のため、省略
}
```

###### 列設定

sap.m.Table：activate()が必要。resetPersDataを使用。
sap.ui.table.Table：activate()が不要。delPersDataを使用。

例：

```sap.m.TableのMain.controller.js
this._oTPC = new TablePersoController({
	table: this.byId("tableId"),
	componentName: "001",
	persoService: PersoService
}).activate();
```

```sap.m.tableのPersoService.js
resetPersData: function () {
	var oDeferred = new jQuery.Deferred();
	var oInitialData = {
		_persoSchemaVersion: "1.0",
		aColumns: [
			{
				//	componentName-テーブルID-1つ目のカラム
				id: "001-tableId-userId",
				order: 0,
				text: "userId",
				visible: true
			},
			{
				//	componentName-テーブルID-2つ目のカラム
				id: "001-tableResult-userName",
				order: 1,
				text: "userName",
				visible: true
			},
			{
			
			// 省略
			
			}
	};

	this._oBundle = oInitialData;

	oDeferred.resolve();
	return oDeferred.promise();
}
```

```sap.ui.table.TableのMain.controller.js
this._oTPC = new TablePersoController({
	table: this.byId("tableId"),
	componentName: "001",
	persoService: PersoService
});
```

```sap.ui.table.TableのPersoService.js
delPersData : function () {
	var oDeferred = new jQuery.Deferred();
	oDeferred.resolve();
	return oDeferred.promise();
}
```

# まとめ
　この調査をきっかけに、よりテーブルのことを理解できました。
どちらのテーブルを使用しようか悩んだ際、ご参考になれば幸いです。

# 参考
https://sapui5.hana.ondemand.com/#/entity/sap.m.Table/sample/sap.m.sample.TableViewSettingsDialog
https://sapui5.hana.ondemand.com/#/entity/sap.ui.export.Spreadsheet