Skip to content
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.

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

feat(ui5-table): add "loadMore" capability #2589

Merged
merged 4 commits into from
Dec 17, 2020
Merged

Conversation

ilhan007
Copy link
Member

@ilhan007 ilhan007 commented Dec 17, 2020

Change
Adds "loadMore" capability to the Table through a special row, displayed at the bottom as first part of the following requirement #2570 At later point, the loadMore capability will be available upon scroll as well.

Usage

  • set "has-more" to get the special row at the table's bottom
  • listen to the "load-more"event to load more rows, when the user presses the additional row
<ui5-table id="myTable" has-more></ui5-table>
myTable.addEventListener("load-more", function() {
    rowsToLoad.forEach(() => {
	tbl.appendChild(document.createElement('ui5-table-row'));
    );
});

Properties

  • hasMore - defines if the load more row will be displayed
  • loadMoreText - defines the main text of the load more row ("More" by default)
  • loadMoreSubtext - defines a subtext of the load more row (usually info about the number of rows - 4 of 10, 4/10, etc.)

Events

  • loadMore - fired when the load more row is pressed

Screenshot 2020-12-17 at 10 52 17 AM

Result
Screenshot 2020-12-17 at 10 52 28 AM

@@ -72,6 +112,20 @@ const metadata = {
showNoData: {
type: Boolean,
},

/**
* Defines if additonal row will be displayed at the bottom of the table.
Copy link
Contributor

Choose a reason for hiding this comment

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

I think this description is too technical (the implementation is with a row) but anyway we'll change this text once we add the growing feature as it would need to say "shows a more button or activates the even on scroll" then. I would suggest for now:

Defines if a "More" button will be displayed at the bottom of the table.
Pressing this button will fire the load-more event.

@ilhan007 ilhan007 merged commit 2e5d5cd into master Dec 17, 2020
@ilhan007 ilhan007 deleted the feat-add-show-more branch December 17, 2020 14:57
ilhan007 added a commit that referenced this pull request Feb 5, 2021
Adds growing capability to the Table upon user scroll (previously possible through "More" button - see the PR #2589). With this feature, the "load-more" event will be fired when the user scrolls to the table's end.

FIXES: #2570

BREAKING_CHANGES: "has-more" removed, use "growing" instead; "load-more-text" has been renamed to more-text; "load-more-subtext" has been renamed to "more-subtext"
ilhan007 added a commit that referenced this pull request Feb 8, 2021
Adds growing capability to the Table upon user scroll (previously possible through "More" button - see the PR #2589). With this feature, the "load-more" event will be fired when the user scrolls to the table's end.

FIXES: #2570

BREAKING_CHANGES: "has-more" removed, use "growing" instead; "load-more-text" has been renamed to more-text; "load-more-subtext" has been renamed to "more-subtext"
NHristov-sap pushed a commit to NHristov-sap/ui5-webcomponents that referenced this pull request Feb 9, 2021
Adds growing capability to the Table upon user scroll (previously possible through "More" button - see the PR SAP#2589). With this feature, the "load-more" event will be fired when the user scrolls to the table's end.

FIXES: SAP#2570

BREAKING_CHANGES: "has-more" removed, use "growing" instead; "load-more-text" has been renamed to more-text; "load-more-subtext" has been renamed to "more-subtext"
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

Successfully merging this pull request may close these issues.

None yet

2 participants