search

How To Sort Table in JavaScript

DataGrid Libraryarrow-up-right may be used as a sort-only JavaScript plugin. It may sort any HTML content, including DIVs, lists, or tables. Let's see how to sort a basic table with random data.

First, let's add a minimal HTML structure:

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <title>Sort HTML Table with DataGrid Library</title>
        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
    </head>
    <body>

    </body>
</html>

Now, let's add a table with some sample data. It will contain three columns - user first name, user last name, and age. Each column has an appropriate CSS class: .age, .first-name and .last-name.

Also, let's add some styles:

Now we need to add a DataGrid CSS to the HEAD of the document:

And additionally, we need to add the DataGrid script at the bottom of the document.

All we need to do now is to define what exactly should be sorted. Let's add the data-grid attribute to the <tbody> element of the table, and data-grid-item property to each <tr> element. Now the table will look like follows:

Now let's add a sort control HTML:

circle-info

You may find the detailed documentation of the sort dropdown control here.

The final step is to initialize the DataGrid library as follows:

That's all! The final HTML is:

PreviousFilter AND/OR Logic [NEW]NextHTML Table with Sortable Headers

Last updated