Back to Snippets

Advanced Data Grid Table UI JS

A team members table with a search field, an add button, per row checkboxes and a theme switch. It is a real table element, so it stays readable to screen readers and pastes cleanly into a spreadsheet.

The header checkbox sets every row checkbox to match itself. Ticking rows one at a time walks the whole set and only leaves the header checked when all of them are, so the header never claims a state the rows below do not have.

Theming is a token swap. Every color is a CSS custom property, and a dark class on the body redefines that block, so one class flips the whole table and the toggle stays three lines of JavaScript. The table sits in a wrapper with overflow-x auto, so narrow screens scroll it sideways instead of crushing the columns. Search and sorting are not wired up yet, so treat the input as presentation for now.

209

#javascript

#css

#table

#data grid

#dashboard

#ui

#dark mode

#responsive

#saas

Run /HTML *CSS ()JS Output Console0 Live Updates Focus

*, *::before, *::after {
  box-sizing: border-box;
}

/* Base Light Theme */
:root {
  --page-bg: #f1f5f9;
  --card-bg: #ffffff;
  --text-main: #0f172a;
  --text-sub: #475569;
  --text-muted: #94a3b8;
  --border-color: #e2e8f0;
  --row-hover: #f8fafc;
  --primary-color: #3b82f6;
  --primary-hover: #2563eb;
  
  --badge-active-bg: #dcfce7;
  --badge-active-text: #166534;
  --badge-pending-bg: #fef3c7;
  --badge-pending-text: #92400e;
  --badge-offline-bg: #f1f5f9;
  --badge-offline-text: #475569;
}

/* Dark Theme Variant */
body.dark-theme {
  --page-bg: #020617;
  --card-bg: #0f172a;
  --text-main: #f8fafc;
  --text-sub: #cbd5e1;
  --text-muted: #64748b;
  --border-color: #1e293b;
  --row-hover: #1e293b;
  
  --badge-active-bg: rgba(22, 163, 74, 0.2);
  --badge-active-text: #4ade80;
  --badge-pending-bg: rgba(217, 119, 6, 0.2);
  --badge-pending-text: #fbbf24;
  --badge-offline-bg: rgba(71, 85, 105, 0.2);
  --badge-offline-text: #94a3b8;
}

body {
  font-family: system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  background: var(--page-bg);
  color: var(--text-main);
  margin: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  padding: 40px 20px;
  transition: background-color 0.3s ease, color 0.3s ease;
}

.page-wrapper {
  width: 100%;
  max-width: 1100px;
}

.table-widget {
  background: var(--card-bg);
  border: 1px solid var(--border-color);
  border-radius: 16px;
  box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.05);
  overflow: hidden;
  transition: background-color 0.3s ease, border-color 0.3s ease;
}

.widget-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 24px;
  border-bottom: 1px solid var(--border-color);
  flex-wrap: wrap;
  gap: 20px;
}

.header-titles h2 {
  margin: 0 0 8px 0;
  font-size: 1.25rem;
  font-weight: 600;
}

.header-titles p {
  margin: 0;
  color: var(--text-sub);
  font-size: 0.9rem;
}

.header-actions {
  display: flex;
  align-items: center;
  gap: 16px;
}

.search-box {
  position: relative;
  display: flex;
  align-items: center;
}

.search-icon {
  position: absolute;
  left: 12px;
  color: var(--text-muted);
}

.search-input {
  background: transparent;
  border: 1px solid var(--border-color);
  border-radius: 8px;
  padding: 10px 10px 10px 40px;
  color: var(--text-main);
  font-size: 0.95rem;
  font-family: inherit;
  width: 250px;
  transition: border-color 0.2s ease;
}

.search-input:focus {
  outline: none;
  border-color: var(--primary-color);
}

.theme-toggle {
  background: transparent;
  border: 1px solid var(--border-color);
  color: var(--text-main);
  border-radius: 8px;
  width: 42px;
  height: 42px;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  transition: background-color 0.2s ease;
}

.theme-toggle:hover {
  background: var(--row-hover);
}

.primary-btn {
  background: var(--primary-color);
  color: #ffffff;
  border: none;
  border-radius: 8px;
  padding: 10px 20px;
  font-size: 0.95rem;
  font-weight: 500;
  cursor: pointer;
  transition: background-color 0.2s ease;
}

.primary-btn:hover {
  background: var(--primary-hover);
}

.table-container {
  width: 100%;
  overflow-x: auto;
}

.data-table {
  width: 100%;
  border-collapse: collapse;
  min-width: 800px;
}

.data-table th, .data-table td {
  padding: 16px 24px;
  text-align: left;
  border-bottom: 1px solid var(--border-color);
}

.data-table th {
  background: var(--row-hover);
  color: var(--text-sub);
  font-weight: 600;
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  position: sticky;
  top: 0;
  z-index: 10;
}

.data-table tbody tr {
  transition: background-color 0.2s ease;
}

.data-table tbody tr:hover {
  background: var(--row-hover);
}

.data-table tbody tr:last-child td {
  border-bottom: none;
}

.cell-check {
  width: 60px;
}

.cb-input {
  width: 18px;
  height: 18px;
  accent-color: var(--primary-color);
  cursor: pointer;
}

.user-profile {
  display: flex;
  align-items: center;
  gap: 16px;
}

.avatar {
  border-radius: 50%;
  object-fit: cover;
}

.user-info {
  display: flex;
  flex-direction: column;
}

.user-name {
  font-weight: 600;
  font-size: 1rem;
}

.user-email {
  color: var(--text-sub);
  font-size: 0.85rem;
  margin-top: 2px;
}

.role-info {
  display: flex;
  flex-direction: column;
}

.role-title {
  font-weight: 500;
}

.role-dept {
  color: var(--text-sub);
  font-size: 0.85rem;
  margin-top: 2px;
}

.badge {
  padding: 6px 12px;
  border-radius: 20px;
  font-size: 0.8rem;
  font-weight: 600;
  display: inline-block;
}

.badge-active {
  background: var(--badge-active-bg);
  color: var(--badge-active-text);
}

.badge-pending {
  background: var(--badge-pending-bg);
  color: var(--badge-pending-text);
}

.badge-offline {
  background: var(--badge-offline-bg);
  color: var(--badge-offline-text);
}

.text-muted {
  color: var(--text-muted);
  font-size: 0.95rem;
}

.cell-action {
  text-align: right;
  width: 80px;
}

.action-btn {
  background: transparent;
  color: var(--text-muted);
  border: none;
  cursor: pointer;
  padding: 8px;
  border-radius: 6px;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: all 0.2s ease;
}

.action-btn:hover {
  background: var(--border-color);
  color: var(--text-main);
}

.widget-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 24px;
  border-top: 1px solid var(--border-color);
  flex-wrap: wrap;
  gap: 16px;
}

.pagination-info {
  margin: 0;
  color: var(--text-sub);
  font-size: 0.9rem;
}

.pagination {
  display: flex;
  gap: 8px;
}

.page-btn {
  background: transparent;
  border: 1px solid var(--border-color);
  color: var(--text-main);
  width: 36px;
  height: 36px;
  border-radius: 8px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-weight: 500;
  cursor: pointer;
  font-family: inherit;
  transition: all 0.2s ease;
}

.page-btn:hover:not(:disabled) {
  background: var(--row-hover);
}

.page-btn.active {
  background: var(--primary-color);
  color: #ffffff;
  border-color: var(--primary-color);
}

.page-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

@media (max-width: 768px) {
  .widget-header {
    flex-direction: column;
    align-items: flex-start;
  }
  .header-actions {
    width: 100%;
    flex-wrap: wrap;
  }
  .search-input {
    width: 100%;
  }
  .search-box {
    flex-grow: 1;
  }
}

<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>
          
          <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>
          
          
          <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>
          
          
          <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>

<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>

Advanced Data Grid Table UI JS

Share Code Snippet