I'm trying to use GridJS to sort/search an existing html table. But sorting isn't working. The search bar is ok.
Any idea ? I think it should be easy but i stuck there
const table = new gridjs.Grid({
search: true,
pagination: true,
sort: true,
resizable: true,
from: document.getElementById('myTable'),
}).render(document.getElementById('destination'));
<script src="https://cdnjs.cloudflare.com/ajax/libs/gridjs/6.0.6/gridjs.production.min.js"></script>
<link href="https://unpkg.com/gridjs/dist/theme/mermaid.min.css" rel="stylesheet"/>
<div id='destination'></div>
<table id="myTable">
<thead class="align-bottom">
<tr>
<th>Prénom</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<span>aaaa</span>
</td>
</tr>
<tr>
<td>
<span>bbbb</span>
</td>
</tr>
<tr>
<td>
<span>cccc</span>
</td>
</tr>
</tbody>
</table>
I found, the problem was the span. I just removed it.
const table = new gridjs.Grid({
search: true,
pagination: true,
sort: true,
resizable: true,
from: document.getElementById('myTable'),
}).render(document.getElementById('destination'));
<script src="https://cdnjs.cloudflare.com/ajax/libs/gridjs/6.0.6/gridjs.production.min.js"></script>
<link href="https://unpkg.com/gridjs/dist/theme/mermaid.min.css" rel="stylesheet"/>
<div id='destination'></div>
<table id="myTable">
<thead class="align-bottom">
<tr>
<th>Prénom</th>
</tr>
</thead>
<tbody>
<tr>
<td>
aaaa
</td>
</tr>
<tr>
<td>
bbbb
</td>
</tr>
<tr>
<td>
cccc
</td>
</tr>
</tbody>
</table>