refactor(ui5-table): width property of column is removed (#784)

BREAKING CHANGE: width property of the ui5-table-column has been removed. Use CSS to give width to the columns. E.g. `<ui5-table-column style="width: 100px">...`
SAP · Sep 25, 2019 · dedb51e · dedb51e
1 parent 2f8a3ea
commit dedb51e
Show file tree

Hide file tree

Showing 6 changed files with 16 additions and 35 deletions.
diff --git a/packages/main/src/Table.js b/packages/main/src/Table.js
@@ -253,29 +253,13 @@ class Table extends UI5Element {
 		return this.columns.map((column, index) => {
 			return {
 				index,
-				width: column.width,
 				minWidth: column.minWidth,
 				demandPopin: column.demandPopin,
 				popinText: column.popinText,
 				visible: !this._hiddenColumns[index],
 			};
 		}, this);
 	}
-
-	get styles() {
-		const gridTemplateColumns = this.visibleColumns.reduce((acc, column) => {
-			return `${acc}minmax(0, ${column.width || "1fr"}) `;
-		}, "");
-
-		return {
-			main: {
-				"grid-template-columns": gridTemplateColumns,
-				position: this.stickyColumnHeader ? "sticky" : "",
-				top: this.stickyColumnHeader ? "0px" : "",
-				"z-index": this.stickyColumnHeader ? "1" : "",
-			},
-		};
-	}
 }
 
 Table.define();

diff --git a/packages/main/src/TableColumn.hbs b/packages/main/src/TableColumn.hbs
@@ -1,4 +1,4 @@
-<th scope="col" style="width: {{width}}">
+<th scope="col">
 	<div class="ui5-table-column-root">
 		<slot></slot>
 	</div>

diff --git a/packages/main/src/TableColumn.js b/packages/main/src/TableColumn.js
@@ -1,7 +1,6 @@
 import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
 import litRender from "@ui5/webcomponents-base/dist/renderer/LitRenderer.js";
 import Integer from "@ui5/webcomponents-base/dist/types/Integer.js";
-import CSSSize from "@ui5/webcomponents-base/dist/types/CSSSize.js";
 import TableColumnTemplate from "./generated/templates/TableColumnTemplate.lit.js";
 
 // Styles
@@ -66,17 +65,6 @@ const metadata = {
 			type: Boolean,
 		},
 
-		/**
-		 * Defines the width of the column. If you leave it empty, then this column covers the remaining space.
-		 *
-		 * @type {CSSSize}
-		 * @public
-		 */
-		width: {
-			type: CSSSize,
-			defaultValue: "auto",
-		},
-
 		/**
 		 * @protected
 		 */

diff --git a/packages/main/src/themes/TableCell.css b/packages/main/src/themes/TableCell.css
@@ -1,15 +1,22 @@
 :host {
 	display: contents;
+	font-family: var(--sapUiFontFamily,var(--sapFontFamily,"72","72full",Arial,Helvetica,sans-serif));
+	font-size: 0.875rem;
+	height: 100%;
+	box-sizing: border-box;
+	overflow: hidden;
+	color: var(--sapUiContentLabelColor);
 }
 
 td {
-	padding: 0.25rem;
-	vertical-align: middle;
+	padding: .5rem .25rem;
+	box-sizing: border-box;
 }
 
 :host([first-in-row]) td,
 .ui5-table-popin-row td {
 	padding-left: 1rem;
+
 }
 
 :host([first-in-row]) td {

diff --git a/packages/main/src/themes/TableColumn.css b/packages/main/src/themes/TableColumn.css
@@ -11,6 +11,8 @@ th {
 	background: var(--sapUiListHeaderBackground);
 	border-bottom: 1px solid var(--sapUiListBorderColor);
 	border: none;
+	width: inherit;
+	font-weight: normal;
 }
 
 .ui5-table-column-root {

diff --git a/packages/main/test/sap/ui/webcomponents/main/samples/Table.sample.html b/packages/main/test/sap/ui/webcomponents/main/samples/Table.sample.html
@@ -63,7 +63,7 @@ <h3>Basic Table</h3>
 
 			<ui5-table class="demo-table" id="tbl">
 				<!-- Columns -->
-				<ui5-table-column slot="columns" width="12em">
+				<ui5-table-column slot="columns" style="width: 12rem">
 					<span style="line-height: 1.4rem">Product</span>
 				</ui5-table-column>
 
@@ -95,7 +95,7 @@ <h3>Basic Table</h3>
 
 <ui5-table class="demo-table" id="table">
 	<!-- Columns -->
-	<ui5-table-column slot="columns" width="12em">
+	<ui5-table-column slot="columns" style="width: 12rem">
 		<span style="line-height: 1.4rem">Product</span>
 	</ui5-table-column>
 
@@ -124,7 +124,7 @@ <h3>Table with No Data</h3>
 		<div class="snippet flex-column">
 			<ui5-table class="demo-table" no-data-text="No Data" show-no-data>
 				<!-- Columns -->
-				<ui5-table-column slot="columns" width="12em">
+				<ui5-table-column slot="columns" style="width: 12rem">
 					<span style="line-height: 1.4rem">Product</span>
 				</ui5-table-column>
 
@@ -148,7 +148,7 @@ <h3>Table with No Data</h3>
 
 		<pre class="prettyprint lang-html"><xmp>
 <ui5-table class="demo-table" no-data-text="No Data" show-no-data>
-	<ui5-table-column slot="columns" width="12em">
+	<ui5-table-column slot="columns" style="width: 12rem">
 		<span style="line-height: 1.4rem">Product</span>
 	</ui5-table-column>