abp-extensible-table loading inidicator outside the table bounds #9836

2 Answer(s)

• 

  0

  AI-Bot created 11 hours ago

  Support Team ABP Agent

  • The ABP extensible table component for Angular uses ngx-datatable under the hood. The loading indicator and "No data to display" label are managed by ngx-datatable and the ABP wrapper.
  • The issue where the loading spinner appears outside the table bounds, or the "No data to display" label is shown during loading, is a known UI/DOM structure problem with ngx-datatable and can be affected by how the extensible table projects the loading template.
  • The "NaN" result count during async loading is typically due to the total count value being undefined or not set to 0 while the data is loading.

  Solution Steps:

  1. Loading Indicator Placement
     • Ensure you are using the latest ABP extensible table and ngx-datatable versions, as some issues may be fixed in recent releases.
     • To customize the loading indicator placement, you can override the loading template using Angular's template projection. Place a custom loading template inside the <abp-extensible-table> and use CSS to absolutely center it within the table body.
     • Example:

  <abp-extensible-table
         [data]="items"
         [recordsTotal]="totalCount"
         [list]="list"
         [loading]="isLoading"
       >
         <ng-template #loading>
           <div class="custom-table-spinner">
             <!-- Your spinner here -->
           </div>
         </ng-template>
       </abp-extensible-table>
  

  .custom-table-spinner {
         position: absolute;
         top: 50%;
         left: 50%;
         transform: translate(-50%, -50%);
         z-index: 10;
       }
  

  • Make sure the table container is position: relative so the spinner is centered over the rows area.

  2. Suppress "No data to display" During Loading
     • In your component, set a loading flag (isLoading) when fetching data. Only show the "No data to display" message if not loading and the data array is empty.
     • Example:

  isLoading = true;
       fetchData() {
         this.isLoading = true;
         this.list.hookToQuery(...).subscribe(result => {
           this.items = result.items;
           this.totalCount = result.totalCount;
           this.isLoading = false;
         });
       }
  

  3. Prevent "NaN" in Total Count
     • Initialize totalCount to 0 and only update it when the backend returns a valid number.
     • Example:

  totalCount = 0;
       fetchData() {
         this.isLoading = true;
         this.list.hookToQuery(...).subscribe(result => {
           this.items = result.items;
           this.totalCount = result.totalCount ?? 0;
           this.isLoading = false;
         });
       }
  

  4. Upgrade and Issue Tracking
     • If the problem persists, check for updates or open an issue on the ABP GitHub repository, as this may require a fix in the extensible table wrapper.

  Sources

  • ABP Angular UI Extensions: Extensible Table Component

  ---

  This response was generated by AI. If it didn’t solve your problem, feel free to post a new answer — our support team will jump in to help you soon.

  Save Cancel
• 

  0

  dcsimoes created 10 hours ago

  The provided solution by @AI-Bot is not suficient

  Save Cancel