enhanced-table

Adds column resizing and sorting to a <table>. Add a number property to the <th> of a column to sort numbers.

      code
      
        <style>
  table {
    border-collapse: collapse;
  }
  table, th, td {
    border: solid 1px var(--color);
  }
  th, td {
    padding: 0.3em;
  }
  tbody tr:nth-child(odd) {
    background-color: var(--color-bg-down);
  }
</style>
<enhanced-table>
  <table>
    <thead>
      <tr>
        <th>String</th>
        <th number="">Integer</th>
        <th number="">Float</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Alice</td>
        <td>12</td>
        <td>0.34</td>
      </tr>
      <tr>
        <td>Bob</td>
        <td>2</td>
        <td>1.56</td>
      </tr>
      <tr>
        <td>Cecile</td>
        <td>1</td>
        <td>0.89</td>
      </tr>
      <tr>
        <td>David</td>
        <td>6</td>
        <td>0.63</td>
      </tr>
    </tbody>
  </table>
</enhanced-table>

      
    


  
    
        String
        Integer
        Float
      

    
        Alice
        12
        0.34
      

        Bob
        2
        1.56
      

        Cecile
        1
        0.89
      

        David
        6
        0.63
      

  