search

Double Sort (Multiple Column Ordering)

DataGrid library allows sorting on multiple columns at the same time. Let's see an example with double sorting a list of DIV elements.

Let's add a basic HTML structure:

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Double Sort (Multiple Column Ordering)</title>
        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />

        <!-- Demo page CSS -->
        <link href="styles.css" rel="stylesheet" />

    </head>
    <body>

        <div class="wrapper">
            <div class="item header">
                <div>Name</div>
                <div>Birth Year</div>
            </div>

            <!-- items to sort -->
            <div class="data">
                <div class="item">
                    <div class="name">Arch</div>
                    <div class="year">1956</div>
                </div>

                <div class="item">
                    <div class="name">Birdie</div>
                    <div class="year">1987</div>
                </div>

                <div class="item">
                    <div class="name">Denver</div>
                    <div class="year">1976</div>
                </div>

                <div class="item">
                    <div class="name">Arch</div>
                    <div class="year">1955</div>
                </div>

                <div class="item">
                    <div class="name">Oberon</div>
                    <div class="year">1965</div>
                </div>

                <div class="item">
                    <div class="name">Heath</div>
                    <div class="year">2013</div>
                </div>

                <div class="item">
                    <div class="name">Filippo</div>
                    <div class="year">1973</div>
                </div>

                <div class="item">
                    <div class="name">Kip</div>
                    <div class="year">1940</div>
                </div>

                <div class="item">
                    <div class="name">Filippo</div>
                    <div class="year">1972</div>
                </div>

                <div class="item">
                    <div class="name">Oberon</div>
                    <div class="year">1967</div>
                </div>

                <div class="item">
                    <div class="name">Kip</div>
                    <div class="year">1939</div>
                </div>

                <div class="item">
                    <div class="name">Arch</div>
                    <div class="year">1957</div>
                </div>

                <div class="item">
                    <div class="name">Filippo</div>
                    <div class="year">1971</div>
                </div>

                <div class="item">
                    <div class="name">Kip</div>
                    <div class="year">1941</div>
                </div>

                <div class="item">
                    <div class="name">Oberon</div>
                    <div class="year">1966</div>
                </div>
            </div>
        </div>
    </body>
</html>

Page styles could be:

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.

Now we need to define what exactly should be sorted. Let's add the data-grid attribute to the div that wraps data and the data-grid-item property to each data element. Now the HTML will look like follows:

Now let's replace table headers with Sort Button controls. Please note that data-id should have different values:

circle-info

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

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

That's all! The final HTML is:

PreviousHow to Filter HTML Table By Multiple Columns

Last updated