Существует ли простой способ использования атрибутов th: data * и th: each вместе в Thymeleaf?

Question

Мое намерение состоит в том, чтобы получить объект внутри одной из строк таблицы, чтобы я мог переслать его в форму, используя простую функцию JavaScript. Я не знаком с jQuery, поэтому подумал, что я выберу максимально простой подход. Я думал об этом, используя атрибут th: data * в сочетании с th: each, например:

<tr th:each="employee : ${empDetailsList}" th:data-employee="${employee}">
    <td scope="row" th:text="${employee.id}">ID</td>
    <td scope="row" th:text="${employee.firstName}">firstName goes here</td>
    <td scope="row" th:text="${employee.lastName}">lastName goes here</td>
    <td scope="row" th:text="${employee.email}">email goes here</td>
    <td scope="row" th:text="${employee.username}">user name goes here</td>
    <td th:data-employee="${employee}">
        <button type="button" class="btn btn-info" th:onclick="showEditForm(this.getAttribute('data-employee'));">Details</button>
</tr>

Я также попробовал этот подход, переместив th: data-employee из тега 'tr' в тег 'td', но результат тот же:

<tr th:each="employee : ${empDetailsList}">
...
    <td th:data-employee="${employee}">
        <button type="button" class="btn btn-info" th:onclick="showEditForm(this.getAttribute('data-employee'));">Details</button>
</tr>

Функция JS:

function showEditForm(employee){
        console.log('Employee object here: ');
        console.log(employee.firstName);
        console.log(employee.lastName);     
    }

Как я уже говорил, я получаю одинаковый результат в обоих случаях. Ответ консоли браузера:

Employee object here:
TypeError: employee is null

Так, что я здесь не так делаю?