<div class="page-wrapper">
<div class="table-widget">
<div class="widget-header">
<div class="header-titles">
<h2>Team Members</h2>
<p>Manage your team members and their account permissions here.</p>
</div>
<div class="header-actions">
<div class="search-box">
<svg class="search-icon" viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<circle cx="11" cy="11" r="8"></circle>
<line x1="21" y1="21" x2="16.65" y2="16.65"></line>
</svg>
<input type="text" class="search-input" placeholder="Search members...">
</div>
<button class="theme-toggle" id="theme-btn" aria-label="Toggle Theme">
<svg class="sun-icon" viewBox="0 0 24 24" width="20" height="20" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<circle cx="12" cy="12" r="5"></circle>
<line x1="12" y1="1" x2="12" y2="3"></line>
<line x1="12" y1="21" x2="12" y2="23"></line>
<line x1="4.22" y1="4.22" x2="5.64" y2="5.64"></line>
<line x1="18.36" y1="18.36" x2="19.78" y2="19.78"></line>
<line x1="1" y1="12" x2="3" y2="12"></line>
<line x1="21" y1="12" x2="23" y2="12"></line>
<line x1="4.22" y1="19.78" x2="5.64" y2="18.36"></line>
<line x1="18.36" y1="5.64" x2="19.78" y2="4.22"></line>
</svg>
</button>
<button class="primary-btn">Add Member</button>
</div>
</div>
<div class="table-container">
<table class="data-table">
<thead>
<tr>
<th class="cell-check">
<input type="checkbox" class="cb-input" id="select-all">
</th>
<th>Name</th>
<th>Title</th>
<th>Status</th>
<th>Last Active</th>
<th class="cell-action"></th>
</tr>
</thead>
<tbody>
<!-- Row 1 -->
<tr>
<td class="cell-check">
<input type="checkbox" class="cb-input row-checkbox">
</td>
<td>
<div class="user-profile">
<img src="https://placehold.co/40x40/3b82f6/ffffff?text=JS" alt="Avatar" class="avatar">
<div class="user-info">
<span class="user-name">Jane Smith</span>
<span class="user-email">jane.smith@example.com</span>
</div>
</div>
</td>
<td>
<div class="role-info">
<span class="role-title">Lead Designer</span>
<span class="role-dept">Product</span>
</div>
</td>
<td>
<span class="badge badge-active">Active</span>
</td>
<td class="text-muted">Just now</td>
<td class="cell-action">
<button class="action-btn">
<svg viewBox="0 0 24 24" width="20" height="20" fill="currentColor">
<circle cx="12" cy="12" r="2"></circle>
<circle cx="12" cy="5" r="2"></circle>
<circle cx="12" cy="19" r="2"></circle>
</svg>
</button>
</td>
</tr>
<!-- Row 2 -->
<tr>
<td class="cell-check">
<input type="checkbox" class="cb-input row-checkbox">
</td>
<td>
<div class="user-profile">
<img src="https://placehold.co/40x40/10b981/ffffff?text=MR" alt="Avatar" class="avatar">
<div class="user-info">
<span class="user-name">Michael Ross</span>
<span class="user-email">michael.ross@example.com</span>
</div>
</div>
</td>
<td>
<div class="role-info">
<span class="role-title">Frontend Engineer</span>
<span class="role-dept">Engineering</span>
</div>
</td>
<td>
<span class="badge badge-pending">In Review</span>
</td>
<td class="text-muted">2 hours ago</td>
<td class="cell-action">
<button class="action-btn">
<svg viewBox="0 0 24 24" width="20" height="20" fill="currentColor">
<circle cx="12" cy="12" r="2"></circle>
<circle cx="12" cy="5" r="2"></circle>
<circle cx="12" cy="19" r="2"></circle>
</svg>
</button>
</td>
</tr>
<!-- Row 3 -->
<tr>
<td class="cell-check">
<input type="checkbox" class="cb-input row-checkbox">
</td>
<td>
<div class="user-profile">
<img src="https://placehold.co/40x40/f59e0b/ffffff?text=ED" alt="Avatar" class="avatar">
<div class="user-info">
<span class="user-name">Emma Davis</span>
<span class="user-email">emma.davis@example.com</span>
</div>
</div>
</td>
<td>
<div class="role-info">
<span class="role-title">Marketing Director</span>
<span class="role-dept">Marketing</span>
</div>
</td>
<td>
<span class="badge badge-active">Active</span>
</td>
<td class="text-muted">Yesterday</td>
<td class="cell-action">
<button class="action-btn">
<svg viewBox="0 0 24 24" width="20" height="20" fill="currentColor">
<circle cx="12" cy="12" r="2"></circle>
<circle cx="12" cy="5" r="2"></circle>
<circle cx="12" cy="19" r="2"></circle>
</svg>
</button>
</td>
</tr>
<!-- Row 4 -->
<tr>
<td class="cell-check">
<input type="checkbox" class="cb-input row-checkbox">
</td>
<td>
<div class="user-profile">
<img src="https://placehold.co/40x40/ef4444/ffffff?text=WL" alt="Avatar" class="avatar">
<div class="user-info">
<span class="user-name">William Lee</span>
<span class="user-email">will.lee@example.com</span>
</div>
</div>
</td>
<td>
<div class="role-info">
<span class="role-title">Data Analyst</span>
<span class="role-dept">Data</span>
</div>
</td>
<td>
<span class="badge badge-offline">Offline</span>
</td>
<td class="text-muted">3 days ago</td>
<td class="cell-action">
<button class="action-btn">
<svg viewBox="0 0 24 24" width="20" height="20" fill="currentColor">
<circle cx="12" cy="12" r="2"></circle>
<circle cx="12" cy="5" r="2"></circle>
<circle cx="12" cy="19" r="2"></circle>
</svg>
</button>
</td>
</tr>
</tbody>
</table>
</div>
<div class="widget-footer">
<p class="pagination-info">Showing 1 to 4 of 24 results</p>
<div class="pagination">
<button class="page-btn nav-btn" disabled>
<svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="15 18 9 12 15 6"></polyline></svg>
</button>
<button class="page-btn active">1</button>
<button class="page-btn">2</button>
<button class="page-btn">3</button>
<button class="page-btn nav-btn">
<svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="9 18 15 12 9 6"></polyline></svg>
</button>
</div>
</div>
</div>
</div>
Back to Snippets
Advanced Data Grid Table UI JS
Integrate a stunning, enterprise-grade data grid into your dashboard. Features include smooth light and dark mode variants, user avatars, status badges, and flawless responsiveness.
128