Datatable

Examples and patterns for tables using Bootstrap 5.3's table classes and styling.

Data Table

Table with toolbar for searching and pagination (markup only).
# Name Email Role Created Actions
1 Emma Watson emma@example.com Admin 2024-01-12
2 John Doe john@example.com User 2024-02-25
3 Lisa Ray lisa@example.com Manager 2024-03-05 
											<div class="input-group">
    <input type="search" class="form-control" placeholder="Search..." aria-label="Search">
    <button class="btn btn-outline-secondary" type="button">Search</button>
</div>
<select class="form-select w-auto"><option>10</option><option>25</option><option>50</option><option>100</option></select>

<div class="table-responsive">
    <table class="table table-striped table-hover mb-0 align-middle">
        <thead>
            <tr>
                <th scope="col"><input type="checkbox" aria-label="select all"></th>
                <th scope="col">#</th>
                <th scope="col">Name</th>
                <th scope="col">Email</th>
                <th scope="col">Role</th>
                <th scope="col">Created</th>
                <th scope="col">Actions</th>
            </tr>
        </thead>
        <tbody>
            <tr><td><input type="checkbox"></td><td>1</td><td>Emma Watson</td><td>emma@example.com</td><td>Admin</td><td>2024-01-12</td><td><div class="btn-group btn-group-sm" role="group"><button class="btn btn-outline-primary">Edit</button><button class="btn btn-outline-danger">Delete</button></div></td></tr>
            <tr><td><input type="checkbox"></td><td>2</td><td>John Doe</td><td>john@example.com</td><td>User</td><td>2024-02-25</td><td><div class="btn-group btn-group-sm" role="group"><button class="btn btn-outline-primary">Edit</button><button class="btn btn-outline-danger">Delete</button></div></td></tr>
            <tr><td><input type="checkbox"></td><td>3</td><td>Lisa Ray</td><td>lisa@example.com</td><td>Manager</td><td>2024-03-05</td><td><div class="btn-group btn-group-sm" role="group"><button class="btn btn-outline-primary">Edit</button><button class="btn btn-outline-danger">Delete</button></div></td></tr>
        </tbody>
    </table>
</div>

<nav aria-label="Page navigation">
    <ul class="pagination mb-0">
        <li class="page-item disabled"><a class="page-link" href="#">Previous</a></li>
        <li class="page-item active"><a class="page-link" href="#">1</a></li>
        <li class="page-item"><a class="page-link" href="#">2</a></li>
        <li class="page-item"><a class="page-link" href="#">Next</a></li>
    </ul>
</nav>