Skip to content

feat(ui5-table-group-row): introduce new component #3470

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 6 commits into from
Jun 29, 2021
Merged

feat(ui5-table-group-row): introduce new component #3470

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
f618f92
feat(ui5-table-group-row): New table row type to allow gropuing intro…
hristop Jun 25, 2021
67fffd1
Fixing some eslint errors
hristop Jun 25, 2021
dd779b4
Typos and small fixes
hristop Jun 25, 2021
ddd3506
Updating table test
hristop Jun 28, 2021
6cb11d3
Reflecting latest comments
hristop Jun 28, 2021
f5d2824
Removing unnecessary data attributes
hristop Jun 28, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions packages/main/bundle.common.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -74,6 +74,7 @@ import TabSeparator from "./dist/TabSeparator.js";
import Table from "./dist/Table.js";
import TableColumn from "./dist/TableColumn.js";
import TableRow from "./dist/TableRow.js";
import TableGroupRow from "./dist/TableGroupRow.js";
import TableCell from "./dist/TableCell.js";
import TextArea from "./dist/TextArea.js";
import TimeSelection from "./dist/TimeSelection.js";
Expand Down
7 changes: 5 additions & 2 deletions packages/main/src/Table.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,6 +18,7 @@ import {
LOAD_MORE_TEXT,
ARIA_LABEL_SELECT_ALL_CHECKBOX,
TABLE_HEADER_ROW_TEXT,
TABLE_ROW_POSITION,
} from "./generated/i18n/i18n-defaults.js";

// Template
Expand Down Expand Up @@ -377,7 +378,7 @@ const metadata = {
* @alias sap.ui.webcomponents.main.Table
* @extends sap.ui.webcomponents.base.UI5Element
* @tagname ui5-table
* @appenddocs TableColumn TableRow TableCell
* @appenddocs TableColumn TableRow TableGroupRow TableCell
* @public
*/
class Table extends UI5Element {
Expand Down Expand Up @@ -433,13 +434,15 @@ class Table extends UI5Element {
onBeforeRendering() {
const columnSettings = this.getColumnPropagationSettings();
const columnSettingsString = JSON.stringify(columnSettings);
const rowsCount = this.rows.length;

this.rows.forEach(row => {
this.rows.forEach((row, index) => {
if (row._columnsInfoString !== columnSettingsString) {
row._columnsInfo = columnSettings;
row._columnsInfoString = JSON.stringify(row._columnsInfo);
}

row._ariaPosition = this.i18nBundle.getText(TABLE_ROW_POSITION, index + 1, rowsCount);
row._busy = this.busy;
row.removeEventListener("ui5-_focused", this.fnOnRowFocused);
row.addEventListener("ui5-_focused", this.fnOnRowFocused);
Expand Down
12 changes: 12 additions & 0 deletions packages/main/src/TableGroupRow.hbs
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,12 @@
<tr
class="ui5-table-group-row-root"
part="group-row"
role="row"
aria-label={{ariaLabelText}}
tabindex="{{_tabIndex}}"
dir="{{effectiveDir}}"
>
<td colspan={{colSpan}}>
<slot></slot>
</td>
</tr>
153 changes: 153 additions & 0 deletions packages/main/src/TableGroupRow.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,153 @@
import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
import litRender from "@ui5/webcomponents-base/dist/renderer/LitRenderer.js";
import { fetchI18nBundle, getI18nBundle } from "@ui5/webcomponents-base/dist/i18nBundle.js";
import TableGroupRowTemplate from "./generated/templates/TableGroupRowTemplate.lit.js";
import TableMode from "./types/TableMode.js";

// Texts
import {
TABLE_GROUP_ROW_ARIA_LABEL,
} from "./generated/i18n/i18n-defaults.js";

// Styles
import styles from "./generated/themes/TableGroupRow.css.js";

/**
* @public
*/
const metadata = {
tag: "ui5-table-group-row",
slots: /** @lends sap.ui.webcomponents.main.TableGroupRow.prototype */ {
/**
* Defines the text of the component.
* <br>
* <b>Note:</b> Although this slot accepts HTML Elements, it is strongly recommended that you only use text in order to preserve the intended design.
*
* @type {Node[]}
* @slot
* @public
*/
"default": {
type: Node,
},
},
properties: /** @lends sap.ui.webcomponents.main.TableGroupRow.prototype */ {
/**
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Does the GroupRow support selection modes? If not probably you can remove this prop.
Or it's done because of the code in Table.js

 449: row.mode = this.mode;

Assigning the rows' "mode" field by the Table should not fail if the GroupRow does not have mode. And furthermore, it won't be re-rendered when the selection mode is change.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The mode is needed as we need to know the exact number of columns, which is +1 in case of multi select mode.

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

If you need it, then it's fine, thanks

* Defines the mode of the row
*
* <br><br>
* <b>Note:</b>
* Available options are:
* <ul>
* <li><code>None</code></li>
* <li><code>SingleSelect</code></li>
* <li><code>MultiSelect</code></li>
* </ul>
* @type {TableMode}
* @defaultvalue "None"
* @private
*/
mode: {
type: TableMode,
defaultValue: TableMode.None,
},
_columnsInfo: {
type: Object,
multiple: true,
},
_tabIndex: {
type: String,
defaultValue: "-1",
},
_busy: {
type: Boolean,
},
_ariaPosition: {
type: String,
defaultValue: "",
noAttribute: true,
},
},
};

/**
* @class
*
* <h3 class="comment-api-title">Overview</h3>
*
* The <code>ui5-table-group-row</code> component represents a group row in the <code>ui5-table</code>.
*
* <h3>CSS Shadow Parts</h3>
*
* <ui5-link target="_blank" href="https://developer.mozilla.org/en-US/docs/Web/CSS/::part">CSS Shadow Parts</ui5-link> allow developers to style elements inside the Shadow DOM.
* <br>
* The <code>ui5-table-group-row</code> exposes the following CSS Shadow Parts:
* <ul>
* <li>group-row - Used to style the native <code>tr</code> tag element.</li>
* </ul>
*
* @constructor
* @author SAP SE
* @alias sap.ui.webcomponents.main.TableGroupRow
* @extends sap.ui.webcomponents.base.UI5Element
* @tagname ui5-table-group-row
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Add the since tag here

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Done

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

1.0.0-rc.15

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Done

* @since 1.0.0-rc.15
* @public
*/
class TableGroupRow extends UI5Element {
static get metadata() {
return metadata;
}

static get styles() {
return styles;
}

static get render() {
return litRender;
}

static get template() {
return TableGroupRowTemplate;
}

constructor() {
super();
this.i18nBundle = getI18nBundle("@ui5/webcomponents");
}

get colSpan() {
return this._colSpan;
}

get ariaLabelText() {
return `${this.i18nBundle.getText(TABLE_GROUP_ROW_ARIA_LABEL)} ${this.innerText}. ${this._ariaPosition}`;
}

visibleColCount() {
let count = this._columnsInfo.reduce((acc, column) => {
return column.visible ? ++acc : acc;
}, 0);

if (this.mode === TableMode.MultiSelect) {
count++;
}

return count;
}

onBeforeRendering() {
if (!this._columnsInfo || this._columnsInfo.length === 0) {
return;
}
this._colSpan = this.visibleColCount();
}

static async onDefine() {
await fetchI18nBundle("@ui5/webcomponents");
}
}

TableGroupRow.define();

export default TableGroupRow;
8 changes: 7 additions & 1 deletion packages/main/src/TableRow.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -101,6 +101,11 @@ const metadata = {
_busy: {
type: Boolean,
},
_ariaPosition: {
type: String,
defaultValue: "",
noAttribute: true,
},
},
events: /** @lends sap.ui.webcomponents.main.TableRow.prototype */ {
/**
Expand Down Expand Up @@ -341,11 +346,12 @@ class TableRow extends UI5Element {
}

get ariaLabelText() {
return this.cells.map((cell, index) => {
const ariaLabel = this.cells.map((cell, index) => {
const columText = this.getColumnTextByIdx(index);
const cellText = this.getCellText(cell);
return `${columText} ${cellText}`;
}).join(" ");
return `${ariaLabel}. ${this._ariaPosition}`;
}

get ariaLabelRowSelection() {
Expand Down
6 changes: 6 additions & 0 deletions packages/main/src/i18n/messagebundle.properties
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -187,6 +187,12 @@ LOAD_MORE_TEXT=More
#XTXT Table's header row text.
TABLE_HEADER_ROW_TEXT=Header Row

#XACT Table row's position
TABLE_ROW_POSITION={0} of {1}

#XACT Table group row's aria label
TABLE_GROUP_ROW_ARIA_LABEL=Group header row.

#XACT ARIA label for selection checkbox
ARIA_LABEL_ROW_SELECTION=Item selection

Expand Down
34 changes: 34 additions & 0 deletions packages/main/src/themes/TableGroupRow.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,34 @@
:host {
display: contents;
}

:host([_busy]) .ui5-table-group-row-root {
opacity: 0.72;
pointer-events: none;
}

.ui5-table-group-row-root {
height: 2rem;
border-bottom: 1px solid var(--sapList_TableGroupHeaderBorderColor);
background-color: var(--sapList_TableGroupHeaderBackground);
color: var(--sapList_TableGroupHeaderTextColor);
font-family: "72override", var(--sapFontFamily);
font-size: var(--sapFontSize);
font-weight: normal;
}

.ui5-table-group-row-root:focus {
outline: var(--ui5_table_row_outline_width) dotted var(--sapContent_FocusColor);
outline-offset: -0.0625rem;
}

td {
word-break: break-word;
vertical-align: middle;
padding: .5rem .25rem .5rem 1rem;
text-align: left;
}

:host [dir="rtl"] td {
text-align: right;
}
107 changes: 107 additions & 0 deletions packages/main/test/pages/TableGrouping.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,107 @@
<!DOCTYPE html>
<html>

<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Web components Table</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<script data-ui5-config type="application/json">
{
"language": "EN"
}
</script>

<script src="../../webcomponentsjs/webcomponents-loader.js"></script>
<script src="../../resources/bundle.esm.js" type="module"></script>
<script nomodule src="../../resources/bundle.es5.js"></script>

</head>

<body style="background-color: var(--sapBackgroundColor);">

<ui5-title>Table with grouping:</ui5-title>
<ui5-table class="demo-table-single" id="groupedSingleTable">
<ui5-table-column id="column-1" slot="columns">
<ui5-label>City</ui5-label>
</ui5-table-column>
<ui5-table-column id="column-2" slot="columns" min-width="500" popin-text="Supplier">
<ui5-label>Supplier</ui5-label>
</ui5-table-column>
<ui5-table-column id="column-3" slot="columns" min-width="500" popin-text="Country" demand-popin>
<div class="column-content">
<ui5-label>Country</ui5-label>
</div>
</ui5-table-column>

<ui5-table-group-row>Country: Bulgaria</ui5-table-group-row>

<ui5-table-row>
<ui5-table-cell><span>Sofia</span></ui5-table-cell>
<ui5-table-cell><span>Sirenje EOOD</span></ui5-table-cell>
<ui5-table-cell><span>Bulgaria</span></ui5-table-cell>
</ui5-table-row>
<ui5-table-row>
<ui5-table-cell><span>Plovdiv</span></ui5-table-cell>
<ui5-table-cell><span>Kashkavali AD</span></ui5-table-cell>
<ui5-table-cell><span>Bulgaria</span></ui5-table-cell>
</ui5-table-row>
<ui5-table-group-row><span>Country: USA</span></ui5-table-group-row>
<ui5-table-row>
<ui5-table-cell><span>Dublin</span></ui5-table-cell>
<ui5-table-cell><span>J.M. Brothers</span></ui5-table-cell>
<ui5-table-cell><span>USA</span></ui5-table-cell>
</ui5-table-row>
<ui5-table-row>
<ui5-table-cell><span>Boston</span></ui5-table-cell>
<ui5-table-cell><span>J.M. Brothers</span></ui5-table-cell>
<ui5-table-cell><span>USA</span></ui5-table-cell>
</ui5-table-row>
</ui5-table>

<br>
<hr>
<br>

<ui5-title>MultiSelect Table with grouping:</ui5-title>
<ui5-table class="demo-table-multi" id="groupedMultiTable" mode="MultiSelect">
<ui5-table-column id="column-1" slot="columns">
<ui5-label>City</ui5-label>
</ui5-table-column>
<ui5-table-column id="column-2" slot="columns" min-width="500" popin-text="Supplier">
<ui5-label>Supplier</ui5-label>
</ui5-table-column>
<ui5-table-column id="column-3" slot="columns" min-width="500" popin-text="Country" demand-popin>
<div class="column-content">
<ui5-label>Country</ui5-label>
</div>
</ui5-table-column>

<ui5-table-group-row>Country: Bulgaria</ui5-table-group-row>
<ui5-table-row>
<ui5-table-cell><span>Sofia</span></ui5-table-cell>
<ui5-table-cell><span>Sirenje EOOD</span></ui5-table-cell>
<ui5-table-cell><span>Bulgaria</span></ui5-table-cell>
</ui5-table-row>
<ui5-table-row>
<ui5-table-cell><span>Plovdiv</span></ui5-table-cell>
<ui5-table-cell><span>Kashkavali AD</span></ui5-table-cell>
<ui5-table-cell><span>Bulgaria</span></ui5-table-cell>
</ui5-table-row>
<ui5-table-group-row>Country: USA</ui5-table-group-row>
<ui5-table-row>
<ui5-table-cell><span>Dublin</span></ui5-table-cell>
<ui5-table-cell><span>J.M. Brothers</span></ui5-table-cell>
<ui5-table-cell><span>USA</span></ui5-table-cell>
</ui5-table-row>
<ui5-table-row>
<ui5-table-cell><span>Boston</span></ui5-table-cell>
<ui5-table-cell><span>J.M. Brothers</span></ui5-table-cell>
<ui5-table-cell><span>USA</span></ui5-table-cell>
</ui5-table-row>
</ui5-table>


</body>

</html>
Loading