Semantic-UI Table Sortable Variation

Last Updated : 17 Mar, 2022

Semantic UI is an open-source framework that uses CSS and jQuery to build great user interfaces. It is the same as a bootstrap for use and has great different elements to use to make your website look more amazing. It uses a class to add CSS to the elements.

Tables are an easy way to organize a lot of data. A table is an arrangement of data in rows and columns, or possibly in a more complex structure. Tables are widely used in communication, research, and data analysis. Tables are useful for various tasks such as presenting text information and numerical data. It can be used to compare two or more items in the tabular form layout. Tables are used to create databases. An HTML table and a Semantic UI table both are the same structurally.

Sortable variation of Semantic UI Tables allows a user to sort contents by clicking on a table header.

Semantic UI Table Sortable Variation Class:

sortable: This class enables the sorting of contents by clicking on a table header.

Syntax:

<table class="ui sortable table">
    <tr>
        <td></td>
        ...
    </tr>
    ...
</table>

Example 1: This is a basic example illustrating table sortable variation created using Semantic UI.

HTML

<!DOCTYPE html> 
<html> 
<head> 
    <title>Semantic UI Table Sortable Variation</title> 
    <link href= 
"https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css" 
          rel="stylesheet" /> 
    <script src= 
"https://code.jquery.com/jquery-3.1.1.min.js"
            crossorigin="anonymous"> 
    </script> 
    <script src= 
"https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.js"> 
    </script> 
    <script src= 
"https://semantic-ui.com/javascript/library/tablesort.js"> 
     </script> 
</head> 
<body> 
    <center> 
        <h1 class="ui green header">GeeksforGeeks</h1> 
        <strong>Semantic UI Table Sortable Variation</strong> 
    </center> 
    <table class="ui sortable table"> 
        <thead> 
            <tr> 
                <th>Names</th> 
                <th>Maths Marks</th> 
                <th>Physics Marks</th> 
                <th>Chemistry Marks</th> 
                <th>Computer Marks</th> 
            </tr> 
        </thead> 
        <tbody> 
          <tr> 
            <td>Ravi</td> 
            <td>48</td> 
            <td>84</td> 
            <td>63</td> 
            <td>77</td> 
          </tr> 
          <tr> 
            <td>Srihita</td> 
            <td>55</td> 
            <td>97</td> 
            <td>74</td> 
            <td>49</td> 
          </tr> 
          <tr> 
            <td>Naveen</td> 
            <td>85</td> 
            <td>85</td> 
            <td>41</td> 
            <td>67</td> 
          </tr> 
          <tr> 
            <td>Tomar</td> 
            <td>85</td> 
            <td>31</td> 
            <td>45</td> 
            <td>44</td> 
          </tr> 
      </tbody> 
    </table> 
    <script> 
        $('.sortable.table').tablesort(); 
    </script> 
</body>     
</html>

Output:

Semantic-UI Table Sortable Variation

Example 2: This is a basic example illustrating collapsed striped table sortable variation created using Semantic UI.

HTML

<!DOCTYPE html> 
<html> 
<head> 
    <title>Semantic UI Table Sortable Variation</title> 
    <link href= 
"https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css" 
          rel="stylesheet" /> 
    <script src= 
"https://code.jquery.com/jquery-3.1.1.min.js"
            crossorigin="anonymous"> 
    </script> 
    <script src= 
"https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.js"> 
    </script> 
    <script src= 
"https://semantic-ui.com/javascript/library/tablesort.js"> 
     </script> 
</head> 
<body> 
    <center> 
        <h1 class="ui green header">GeeksforGeeks</h1> 
        <strong>Semantic UI Table Sortable Variation</strong> 
    </center> 
    <table class="ui sortable celled table"> 
      <thead> 
          <tr> 
              <th>Names</th> 
              <th>Maths Marks</th> 
              <th>Physics Marks</th> 
              <th>Chemistry Marks</th> 
              <th>Computer Marks</th> 
          </tr> 
      </thead> 
      <tbody> 
        <tr> 
          <td>Ravi</td> 
          <td>48</td> 
          <td>84</td> 
          <td>63</td> 
          <td>77</td> 
        </tr> 
        <tr> 
          <td>Srihita</td> 
          <td>55</td> 
          <td>97</td> 
          <td>74</td> 
          <td>49</td> 
        </tr> 
        <tr> 
          <td>Naveen</td> 
          <td>85</td> 
          <td>85</td> 
          <td>41</td> 
          <td>67</td> 
        </tr> 
        <tr> 
          <td>Tomar</td> 
          <td>85</td> 
          <td>31</td> 
          <td>45</td> 
          <td>44</td> 
        </tr> 
    </tbody> 
  </table> 
  <script> 
      $('.sortable.table').tablesort(); 
  </script> 
</body>     
</html>