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 growing on scroll #2593

Merged
merged 14 commits into from
Feb 5, 2021
Merged

Conversation

ilhan007
Copy link
Member

@ilhan007 ilhan007 commented Dec 17, 2020

Background
Adds "loadMore" capability to the Table upon user scroll (previously possible trough "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:

  • hasMore removed, use growing instead
  • loadMoreText has been renamed to moreText
  • loadMoreSubtext has been renamed to moreSubtext

API Changes

  • added growing from type TableGrowingType with 3 options:
    -- "None" - growing is off (default)
    -- "Scroll" - Table's load-more is fired upon user scrolls to the table's end
    -- "Button" - Table's load-more is fired upon pressing a "More" button
  • added busy - when set the table's opacity is reduced and busy indicator shown
  • removed hasMore (in favour of growing)
  • loadMoreText renamed to moreText
  • loadMoreSubtext renamed to moreSubtext

Usage

  • set growing to "Scroll" to make the table tracks the user scrolling (not supported in IE)
  • set growing to "Button" to get the special "More" button(row) at the table's bottom
  • set busy to show/hide busy indicator over the table.
  • set moreText if you need custom text within the "More" button
  • set moreSubtext if you need additional description within the "More" button
  • listen to the load-more event to load more rows, when the user presses the additional row

Example

<ui5-table id="myTable" growing="Button" more-text="Load more" more-subtext="4 of 10"></ui5-table>
<ui5-table id="myTable" growing="Scroll"></ui5-table>
myTable.addEventListener("load-more", function() {

   // show busy indicator
    myTable.busy = true; 
    
    // load new entries
    rowsToLoad.forEach(() => {
	tbl.appendChild(document.createElement('ui5-table-row'));
    );
    
    // hide busy indicator
     myTable.busy = false; 
});

Busy Indicator placement

  • For modern browsers we make use of position: sticky to how the busy indicator always in the center of the Table while user scrolls.
  • For IE, we use position: absolute (as sticky is not supported), which will show the busy indicator in the center, but when the table becomes longer, the busy indicator will be scrolled out.

Copy link
Contributor

@vladitasev vladitasev left a comment

Choose a reason for hiding this comment

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

I like the API (having an enum instead of 2 booleans)!
We could probably discuss the names and we can merge

packages/main/src/Table.js Outdated Show resolved Hide resolved
packages/main/src/types/TableGrowingType.js Outdated Show resolved Hide resolved
packages/main/src/Table.js Outdated Show resolved Hide resolved
@ilhan007 ilhan007 merged commit 87520c2 into master Feb 5, 2021
@ilhan007 ilhan007 deleted the feat-table-growing-scroll branch February 5, 2021 08:02
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
Projects
None yet
Development

Successfully merging this pull request may close these issues.

ui5-table: growing on scroll
3 participants