Datatables - wrap row content

Jan Louw pro commented 5 years ago

Hi,

I've added the following style to the table column that requires "wrapping", and it works:

style="word-break: break-all"

Just not sure if this is the best solution.

Regards

Arkadiusz Idzikowski staff commented 5 years ago

Could you provide some more details so we can reproduce this problem on our end? I just added long text to every table row and it is wrapped correctly, there is no horizontal scroll (tested on Datatables example from documentation).

Jan Louw pro commented 5 years ago

Hi,

This is my code, that is inside mdb-card-body.

The last td has my workaround. Without the style, the column does not wrap, causing horizontal scrolling. I'm using FireFox 75.0.

  <table mdbTable #tableEl="mdbTable" small="true" stickyHeader="true" hover="true" striped="true" responsive="true" class="z-depth-1" >
    <thead class="sticky-top">
      <tr>
        <th *ngFor="let head of headElements; let i = index" scope="col">{{head}} </th>
      </tr>
    </thead>
    <tbody #row>
      <tr mdbTableCol *ngFor="let el of elements; let i = index">
        <td *ngIf="i+1 >= mdbTablePagination.firstItemIndex && i < mdbTablePagination.lastItemIndex" scope="row">{{el.activityFormDate}}</td>
        <td *ngIf="i+1 >= mdbTablePagination.firstItemIndex && i < mdbTablePagination.lastItemIndex">{{el.activityFormTimeSpend}}</td>
        <td *ngIf="i+1 >= mdbTablePagination.firstItemIndex && i < mdbTablePagination.lastItemIndex">{{el.activityFormActCat}}</td>
        <td *ngIf="i+1 >= mdbTablePagination.firstItemIndex && i < mdbTablePagination.lastItemIndex" style="word-break: break-all">{{el.activityFormDetails}}</td>
      </tr>
    </tbody>
    <tfoot class="grey lighten-5 w-100">
      <tr>
        <td colspan="8">
          <mdb-table-pagination [tableEl]="tableEl" paginationAlign="" [searchDataSource]="elements"></mdb-table-pagination>
        </td>
      </tr>
    </tfoot>
  </table>

Regards

Arkadiusz Idzikowski staff commented 5 years ago

Can you update you first post with the full html/ts code that will allow to reproduce this problem on our end? It would be much easier to find the cause of this problem and a good solution.

Jan Louw pro commented 5 years ago

Hi Arkadiusz, Apologies for only replying now.

I've re-looked at my issue, and realize that the horizontal scrolling only comes into effect when there are no 'white spaces' in column 4 of my example. The workaround style I've added effectively causes "word wrapping" of the column. Not sure if this is something MDBDataTable should be catering for. In my case, the data collected would always have white spaces, thus it's correctly presented in MDBDataTable.

Regards