in my previous question I asked how to define initial sorting order, but I noticed that sorting is not correct with data-reactid attributes. I use bootstrap table with react.js, which generates data-reactid attributes.
jsfiddle - table with data-reactid attributes, sorting is not correct
If you order "CustomerN" column, sequence of rows is not correct.
jsfiddle - table without data-reactid attributes, sorting is correct
html
<table class="table table-striped table-bordered table-hover" cellspacing="0" id="table3" data-show-columns="true" data-show-multi-sort="true">
<thead>
<tr>
<th data-field="CustomerName" data-sortable="true">CustomerN</th>
<th data-field="ProjectName" data-sortable="true">ProjectN</th>
<th data-field="ProjectType" data-sortable="true">ProjectT</th>
<th data-field="ProjectDetails" data-sortable="true">ProjectD</th>
</tr>
</thead>
<tbody>
<tr>
<td data-customer-id="49" data-reactid=".0.1.0.1.1.1.$51.1:$0"><a data-reactid=".0.1.0.1.1.1.$51.1:$0.0">Quiksilver</a></td>
<td>Services SOW #1</td>
<td>Project | T&M</td>
<td>"Vix eu erant doctus delenit, et copiosae indoctum accommodare eum."
</td>
</tr>
<tr>
<td data-customer-id="80" data-reactid=".0.1.0.1.1.1.$71.1:$0"><a data-reactid=".0.1.0.1.1.1.$71.1:$0.0">asdasd</a></td>
<td>Services SOW #1</td>
<td>Project | T&M</td>
<td>
"Ad quodsi luptatum expetenda eum, sed ludus dicam"
</td>
</tr>
<tr>
<td data-customer-id="40" data-reactid=".0.1.0.1.1.1.$66.1:$0"><a data-reactid=".0.1.0.1.1.1.$66.1:$0.0">dell</a></td>
<td>Services SOW #1</td>
<td>Project | T&M</td>
<td>"Inani fabulas nominavi sea no."
</td>
</tr>
<tr>
<td data-customer-id="30" data-reactid=".0.1.0.1.1.1.$1.1:$0"><a data-reactid=".0.1.0.1.1.1.$1.1:$0.0">dell</a></td>
<td>Services SOW #1</td>
<td>Project | T&M</td>
<td>"Inani fabulas nominavi sea no."
</td>
</tr>
<tr>
<td data-customer-id="10" data-reactid=".0.1.0.1.1.1.$54.1:$0"><a data-reactid=".0.1.0.1.1.1.$54.1:$0.0">Rip Curl</a></td>
<td>Services SOW #1</td>
<td>Project | T&M</td>
<td>"Inani fabulas nominavi sea no."
</td>
</tr>
<tr>
<td data-reactid=".0.1.0.1.1.1.$2.1:$0" data-customer-id="2"><a data-reactid=".0.1.0.1.1.1.$2.1:$0.0">Java</a></td>
<td>Services SOW #1</td>
<td>Project | T&M</td>
<td>"Inani fabulas nominavi sea no."
</td>
</tr>
</tbody>
</table>
javascript
$(function(){
$('#table3').bootstrapTable(
{"sortName": "CustomerName","sortOrder":"asc"});
});
If you debug the problem code using developer tools, you will realize that the values used for sorting are not the actual customer names, but the entire <a href=""...>dell</a>. Since you are using default sorter, the string comparison considers entire string to be used for comparison. The data-reactid is not clashing with boostraptable library but it has side effects due to the value assigned to this attribute. While doing comparison for sorting, since the beginning of the string is similar, the change in data-reactid is determining the position of element.
There are two approaches to solve this problem.
a tag. E.g. <a data-value="dell" data-reactid...></a>