Ctrlk
For the complete documentation index, see llms.txt. This page is also available as Markdown.

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:

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