Data Table

Arkadiusz Idzikowski staff commented 4 years ago

Currently, there is no event that will notify about sort direction.

If you observe any problems with performance, please take a look at this guide: https://mdbootstrap.com/docs/angular/tables/sort/#performance

Did you import FontAwesome styles in angular.json file?

AFA pro premium commented 4 years ago

yes ,I imported the FontAwesome styles into angular.json file but still it is coming question marks any suggestion on this.

AFA pro premium commented 4 years ago

How Data table pagination come with first last and number combination what is the properties for that can u suggest me please ?

Arkadiusz Idzikowski staff commented 4 years ago

@AFA We would need some more information about the code you used and your project configuration (package.json, angular.json, app.module). Please edit your first post and add some examples.

As for the second question, could you describe the problem in more details?

AFA pro premium commented 4 years ago

For 2nd question in the Angular datatable pagination the pagination is coming two arroes one forward and one backward but in need 4 arrows for go to fast and last page directly, this is not working in my end. 2.Another thing in the pagination there is any option of formatting the pagination like (First 1,2,3... Last) Pagination will come like the mentioned format.

AFA pro premium commented 4 years ago

Search --> Name Email Phone Number Company Site Address City State Zip Contact Owner Lead Status Job Title Lead Source Created Date Last Activity Date Last Contacted Previous Owner {{allContactlistData.length}} Selected Assign Edit--> Delete Create Tasks--> Create Tasks Accept Enroll in Sequence --> More Action Another action --> --> = mdbTablePagination.firstItemIndex && i < mdbTablePagination.lastItemIndex" scope="row"> {{bindAllContact.contactname | slice :0:1}} {{bindAllContact.contactname}} Preview = mdbTablePagination.firstItemIndex && i < mdbTablePagination.lastItemIndex">{{bindAllContact.email}} = mdbTablePagination.firstItemIndex && i < mdbTablePagination.lastItemIndex">{{bindAllContact.phonenumber | phone}} = mdbTablePagination.firstItemIndex && i < mdbTablePagination.lastItemIndex">{{bindAllContact.company}} = mdbTablePagination.firstItemIndex && i < mdbTablePagination.lastItemIndex">{{bindAllContact.siteaddress}} = mdbTablePagination.firstItemIndex && i < mdbTablePagination.lastItemIndex">{{bindAllContact.city}} = mdbTablePagination.firstItemIndex && i < mdbTablePagination.lastItemIndex">{{bindAllContact.state}} = mdbTablePagination.firstItemIndex && i < mdbTablePagination.lastItemIndex">{{bindAllContact.zip}} = mdbTablePagination.firstItemIndex && i < mdbTablePagination.lastItemIndex">{{bindAllContact.contactowner}} = mdbTablePagination.firstItemIndex && i < mdbTablePagination.lastItemIndex">{{bindAllContact.leadstatus}} = mdbTablePagination.firstItemIndex && i < mdbTablePagination.lastItemIndex">{{bindAllContact.jobtitle}} = mdbTablePagination.firstItemIndex && i < mdbTablePagination.lastItemIndex">{{bindAllContact.leadsource}} = mdbTablePagination.firstItemIndex && i < mdbTablePagination.lastItemIndex">{{bindAllContact.createddate | date:'shortDate'}} = mdbTablePagination.firstItemIndex && i < mdbTablePagination.lastItemIndex"> .. = mdbTablePagination.firstItemIndex && i < mdbTablePagination.lastItemIndex"> .. = mdbTablePagination.firstItemIndex && i < mdbTablePagination.lastItemIndex">{{bindAllContact.prevowner}}

  </tbody>
  <tfoot class="grey lighten-5 w-100">
    <tr>
      <td colspan="16">
        <mdb-table-pagination [tableEl]="tableEl" paginationAlign="" [searchDataSource]="allContactlist" (nextPageClick)="onNextPageClick($event)" (previousPageClick)="onPreviousPageClick($event)"></mdb-table-pagination>
      </td>
    </tr>
  </tfoot>
</table>

Ts Code //New Table Added @ViewChild(MdbTableDirective, { static: true }) mdbTable: MdbTableDirective; @ViewChild(MdbTablePaginationComponent, { static: true }) mdbTablePagination: MdbTablePaginationComponent; @ViewChild('row', { static: true }) row: ElementRef;

elements: any = []; headElements = ['Contact Id', 'Contact Name', 'Email', 'Phone Number', 'Company', 'Siteaddress' , 'City', 'State', 'Zip', 'Contact Owner', 'Lead Status', 'Jobtitle', 'Lead Source', 'Created Date', 'Last Activity Date', 'Last Contacted', 'Previous Owner'];

searchText: string = ''; previous: string;

maxVisibleItems: number = 8; firstItemIndex: any; lastItemIndex: any; @HostListener('input') oninput() { this.mdbTablePagination.searchText = this.searchText; }

if (getresult.length > 0) { this.responseData = getresult; for (var i = 0; i < this.responseData.length; i++) { this.allContactlist.push(this.responseData[i]) } } this.mdbTable.setDataSource(this.allContactlist); this.allContactlist = this.mdbTable.getDataSource(); this.previous = this.mdbTable.getDataSource();

//New Table Added searchItems() { const prev = this.mdbTable.getDataSource();

if (!this.searchText) {
  this.mdbTable.setDataSource(this.previous);
  this.allContactlist = this.mdbTable.getDataSource();
}

if (this.searchText) {
  this.allContactlist = this.mdbTable.searchLocalDataBy(this.searchText);
  this.mdbTable.setDataSource(prev);
}

this.mdbTablePagination.calculateFirstItemIndex();
this.mdbTablePagination.calculateLastItemIndex();

this.mdbTable.searchDataObservable(this.searchText).subscribe(() => {
  this.mdbTablePagination.calculateFirstItemIndex();
  this.mdbTablePagination.calculateLastItemIndex();
});

} onNextPageClick(data: any) { this.firstItemIndex = data.first; this.lastItemIndex = data.last; }

onPreviousPageClick(data: any) { this.firstItemIndex = data.first; this.lastItemIndex = data.last; } ngAfterViewInit() { this.mdbTablePagination.setMaxVisibleItemsNumberTo(this.maxVisibleItems); this.firstItemIndex = this.mdbTablePagination.firstItemIndex; this.lastItemIndex = this.mdbTablePagination.lastItemIndex; this.mdbTablePagination.calculateFirstItemIndex(); this.mdbTablePagination.calculateLastItemIndex(); this.cd.detectChanges(); }

AFA pro premium commented 4 years ago

How to place the search box on the right side of + Add Contact button on the top line.

AFA pro premium commented 4 years ago

Below scroll is not working so how it will work on the above code and please check that image also on the pagination four arrow are not coming another thing is if we will not put the pagination then on scroll how to load the data like lazy loading on data table.

Arkadiusz Idzikowski staff commented 4 years ago

@AFA Please add a formatted code to your first post or send a simple demo app on which we will be able to reproduce the problems to a.idzikowski@mdbootstrap.com. The code you pasted in the comment is unreadable.

The buttons and search input are not part of the MDB component, these elements have open HTML structure and you can customize its classes to adjust the appearance and position to your needs (for example using flexbox) or bootstrap grid: https://mdbootstrap.com/docs/angular/layout/grid-usage/.

To load new data dynamically you need to update the source data array. Angular will only detect a change if you create a new table object (for example by using spread operator data = [...newData]), adding new rows with push won't work in this case.