Search code examples
htmlthymeleaf

Add button to thyme leaf table

Hello I hope you are all well,

I'm trying to figure out how to add a button next to a thymeleaf expression in my table, so that I do not have to create a new column for something that barely take up any space. I'm not sure whether or not this is doable tho.

My current HTML looks like this:

<div class="row">
    <div th:if=${!#lists.isEmpty(taskList)} class="taskTable">
        <table class="showTasks">
            <tr>
                <th>Task name</th>
                <th>Amount of Hours</th>
                <th>Amount of Employees</th>
                <th>Start date</th>
                <th>End date</th>
                <th></th>
            </tr>
            <tr th:each="task : ${taskList}">
                <form action="deleteTask" method="post">
                    <input type="hidden" th:value="${task.taskID}" name="test">
                    <td th:text="${task.taskName}"></td>
                    <td th:text="${task.taskHours}"></td>
                    <td th:text="${task.taskEmployees}"></td>
                    <td th:text="${task.startDate}"></td>
                    <td th:text="${task.endDate}"></td>
                    <td> <input type="image" src="delete.png"  alt="Submit" class="deleteTaskBtn"></td>
                </form>
            </tr>
        </table>
    </div>
</div>

I'd rather like the button being on the same column as my endDate column, but I can't seem to make both the end date it self appear and the delete button.

In my head I thought it'd be something like this:


<td th:text="${task.endDate}"> <input type="image" src="delete.png"  alt="Submit" class="deleteTaskBtn"> </td>

So that it would appear as: End Date X

But obviously that's not right. I kinda struggle with the thymeleaf syntax at some points. Maybe this is an easy fix, I really don't know.

It looks like this right now: Example of issue

Solution

  • As the answer to your question, the Thymeleaf implementation may look like the following ...

    <td><span th:text="${task.endDate}"></span> <input type="image" src="delete.png"  alt="Submit" class="deleteTaskBtn"> </td>

    But I would consider using CSS style for the last column in your table (see your original HTML posted) and limit the width of this column to a pre-defined size (say 20px or so). As simple as that.