javascriptcssgridjs

GridJs isn't sorting column when converting from HTML table

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>

Solution

  • 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>