【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