Use ellipsis in bootstrap table if number of characters exceeds 200

Question

I'd like to hide the text if the number of characters in columns exceeds 200. I'd to apply this condition to all columns in my table.

<table
  id="table"
  data-toolbar="#toolbar"
  data-search="true"
  data-show-refresh="true"
  data-show-toggle="true"
  data-show-fullscreen="true"
  data-show-columns="true"
  data-show-columns-toggle-all="true"
  data-detail-view="true"
  data-show-export="true"
  data-click-to-select="true"
  data-detail-formatter="detailFormatter"
  data-minimum-count-columns="2"
  data-show-pagination-switch="true"
  data-pagination="true"
  data-id-field="id"
  data-page-list="[5, 10, 25, 50, 100, all]"
  data-show-footer="true"
  data-response-handler="responseHandler">
  <thead>
    <tr>
      <th data-field="upload_date" data-sortable="true">Date</th>
      <th data-field="product_code" data-sortable="true">Code</th>
      <th data-field="Title" data-sortable="true">Title</th>
      <th data-field="Description" data-sortable="true">Description</th>
    </tr>
  </thead>
</table>

Answer 1

I've found an example of this working using the data-formatter attribute provided by the Bootstrap Table plugin.

I defined a function that strips the text if it over a certain amount of characters.

You can find an example of this here.

Add this to the column you want to set a limit on:

data-formatter="shortingText"

Finally, create the formatted function required, and set the character limit to what you like.

function shortingText(value) {
    if(value.length <= 50) {
        return value;
    }
    
    return value.substring(0, 50) + '...';
 }

See here for further reading.