Table with Inline Action Buttons Template

Empower users to manage data directly from the list with clear, inline action buttons in every row.

Essential for any admin panel or CRUD (Create, Read, Update, Delete) interface, this design provides an intuitive way for users to interact with individual items.

Get Source Code → Preview →

About this "Action Buttons" Table

This template moves actions from a single, page-level location to the context of each data row. This vastly improves workflow efficiency for common tasks like editing, deleting, or viewing an item. The template places a set of small, icon-based buttons in the last column of the table, ensuring they are always available next to the item they control.

The JavaScript uses an efficient "event delegation" pattern. Instead of adding a separate click listener to every single button, it adds just one listener to the entire table body. When a click occurs, it checks if the target was a button and then identifies which row was clicked and which specific action was requested. Each row uses a data-id attribute to uniquely identify the data record, which is passed to the action handler.

Key Features:

Contextual Actions: Buttons are placed directly in the row, making their function unambiguous.
Improved Workflow: Speeds up data management tasks by reducing clicks and navigation.
Space-Efficient Icon Buttons: Uses SVG icons to keep the buttons small and universally understood.
Efficient Event Handling: Demonstrates a best-practice JavaScript pattern (event delegation) for optimal performance.

Implementation Notes:

The included JavaScript shows how to capture the "click" event and identify which item and action were chosen, showing an alert() for demonstration. To implement this in your application, you would replace these alerts with your own logic, such as:

Making an API call to a server to delete an item.
Opening a modal window with an editing form.
Redirecting the user to a detailed view page.

Code

Here's the full code, including the HTML for the buttons and JavaScript for handling clicks:

</style>

<table class="actions-table" id="myActionsTable">
    <thead>
        <tr>
            <th scope="col">Page Title</th>
            <th scope="col">Author</th>
            <th scope="col">Date Published</th>
            <th scope="col" class="cell-actions">Actions</th>
        </tr>
    </thead>
    <tbody>
        
        <tr data-id="post-101">
            <td>Getting Started with CSS</td>
            <td>Admin</td>
            <td>2019-08-15</td>
            <td class="cell-actions">
                <div class="actions-container">
                    <button class="action-button btn-edit" title="Edit">
                        
                        <svg viewBox="0 0 24 24" fill="currentColor"><path d="M3 17.25V21h3.75L17.81 9.94l-3.75-3.75L3 17.25zM20.71 7.04c.39-.39.39-1.02 0-1.41l-2.34-2.34c-.39-.39-1.02-.39-1.41 0l-1.83 1.83 3.75 3.75 1.83-1.83z"></path></svg>
                    </button>
                    <button class="action-button btn-delete" title="Delete">
                        
                        <svg viewBox="0 0 24 24" fill="currentColor"><path d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z"></path></svg>
                    </button>
                </div>
            </td>
        </tr>
        <tr data-id="post-102">
            <td>The Power of Flexbox</td>
            <td>Peter Griffin</td>
            <td>2023-07-12</td>
            <td class="cell-actions">
                <div class="actions-container">
                    <button class="action-button btn-edit" title="Edit"><svg viewBox="0 0 24 24" fill="currentColor"><path d="M3 17.25V21h3.75L17.81 9.94l-3.75-3.75L3 17.25zM20.71 7.04c.39-.39.39-1.02 0-1.41l-2.34-2.34c-.39-.39-1.02-.39-1.41 0l-1.83 1.83 3.75 3.75 1.83-1.83z"></path></svg></button>
                    <button class="action-button btn-delete" title="Delete"><svg viewBox="0 0 24 24" fill="currentColor"><path d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z"></path></svg></button>
                </div>
            </td>
        </tr>
        <tr data-id="post-103">
            <td>Understanding JavaScript Promises</td>
            <td>Admin</td>
            <td>2025-05-10</td>
            <td class="cell-actions">
                <div class="actions-container">
                    <button class="action-button btn-edit" title="Edit"><svg viewBox="0 0 24 24" fill="currentColor"><path d="M3 17.25V21h3.75L17.81 9.94l-3.75-3.75L3 17.25zM20.71 7.04c.39-.39.39-1.02 0-1.41l-2.34-2.34c-.39-.39-1.02-.39-1.41 0l-1.83 1.83 3.75 3.75 1.83-1.83z"></path></svg></button>
                    <button class="action-button btn-delete" title="Delete"><svg viewBox="0 0 24 24" fill="currentColor"><path d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z"></path></svg></button>
                </div>
            </td>
        </tr>
    </tbody>
</table>

// Add a single event listener to the whole table body
    table.querySelector('tbody').addEventListener('click', function(e) {
        // Find the button that was clicked using closest()
        const actionButton = e.target.closest('.action-button');
        
        if (actionButton) {
            const row = actionButton.closest('tr');
            const rowId = row.getAttribute('data-id');

// Check which action was clicked
            if (actionButton.classList.contains('btn-edit')) {
                // *** REPLACE THIS with your edit logic ***
                alert(`Edit action triggered for item: ${rowId}`);
            } else if (actionButton.classList.contains('btn-delete')) {
                // *** REPLACE THIS with your delete logic ***
                if (confirm(`Are you sure you want to delete item: ${rowId}?`)) {
                    alert(`Deleting item: ${rowId}`);
                    // In a real app, you would make an API call and then remove the row:
                    // row.remove();
                }
            }
        }
    });
}

// Initialize the functionality
enableActionButtons('myActionsTable');
</script>

View Output