Mam prostego cruda ktory wyswietla mi dane w tabeli, nizej wyswietlam kod ktory generuje widok z lista tych filmow, zastanawiam sie jak dodac sortowanie w kazdej z kolumn?

 <!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head th:replace="layout :: head"></head>
<body>
<nav th:replace="layout :: header"></nav>

<div class="container main-content list">
    <div th:if="${success}" class="row alert alert-success alert-dismissible">
        <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span
                aria-hidden="true">&times;</span></button>
        <span th:text="${success}"></span>
    </div>

    <th:block th:if="${#lists.isEmpty(movies)}">
        <h3 th:text="#{greeting.header}"></h3>
    </th:block>

    <th:block th:unless="${#lists.isEmpty(movies)}">
        <div class="row">
            <a th:href="@{/create}" class="btn btn-success pull-left">
                <span class="glyphicon glyphicon-plus" th:text="#{add}"></span>
            </a>
            <form class="form-inline pull-right" action="#" th:action="@{/search}" method="GET">
                <div class="form-group">
                    <input type="text" class="form-control" name="q"
                           placeholder="..."/>
                </div>
                <button type="submit" class="btn btn-primary" th:text="#{search}"></button>
            </form>
        </div>
        <div class="row">
            <table class="table table-bordered table-hover">
                <thead>
                <tr>

                    <th>ID</th>

                    <th th:text="#{name}"></th>
                    <th th:text="#{type}"></th>
                    <th th:text="#{date}"></th>
                    <th th:text="#{length}"></th>
                    <th th:text="#{rate}"></th>
                    <th th:text="#{watch}">?</th>
                    <th th:text="#{edit}">Edytuj</th>
                    <th th:text="#{delete}">Usuń</th>

                </tr>
                </thead>
                <tbody>
                <tr th:each="movie,iterStat : ${movies}">
                    <td th:text="${iterStat.count}"></td>
                    <td th:text="${movie.name}"></td>
                    <td th:text="${movie.type}"></td>
                    <td th:text="${movie.date}"></td>
                    <td th:text="${movie.length}"></td>
                    <td th:text="${movie.rate}"></td>
                    <td th:text="${movie.watch}"></td>


                    <td><a th:href="@{/{id}/edit(id=${movie.id})}"><span
                            class="glyphicon glyphicon-pencil"></span></a></td>
                    <td><a th:href="@{/{id}/delete(id=${movie.id})}"><span
                            class="glyphicon glyphicon-trash"></span></a></td>
                </tr>
                </tbody>
            </table>
        </div>
    </th:block>
</div>
<!-- /.container -->

<footer th:replace="layout :: footer"></footer>
</body>
</html>