Bootstrap Data Table Error State — Free HTML CSS JS Snippet

<div class="container py-5 d-flex justify-content-center">
  <div class="card bstblerr-card">
    <div class="card-body p-3">
      <h6 class="fw-bold mb-2">Recent orders</h6>
      <table class="table table-sm align-middle mb-0">
        <thead>
          <tr><th>Order</th><th>Customer</th><th>Total</th><th>Status</th></tr>
        </thead>
        <tbody id="bstblerrBody"></tbody>
      </table>
    </div>
  </div>
</div>

.bstblerr-card { width: 460px; max-width: 100%; border: 1px solid #eceef1; border-radius: 14px; }
.bstblerr-loading td { color: #9ca3af; font-size: 13px; }
.bstblerr-error-icon { font-size: 20px; }

const body = document.getElementById('bstblerrBody');
let attempt = 0;

const ROWS = [
  ['#1042', 'Dana Reyes', '$128.00', 'Shipped', 'success'],
  ['#1043', 'Marcus Lee', '$64.50', 'Processing', 'secondary'],
  ['#1044', 'Priya Nair', '$212.00', 'Delivered', 'success'],
];

function renderLoading() {
  body.innerHTML = '<tr class="bstblerr-loading"><td colspan="4" class="text-center py-4">Loading orders...</td></tr>';
}

function renderError(message) {
  body.innerHTML =
    '<tr><td colspan="4" class="text-center py-4">' +
    '<div class="bstblerr-error-icon mb-1">&#9888;</div>' +
    '<p class="fw-semibold mb-1">Couldn\'t load orders</p>' +
    '<p class="small text-muted mb-3">' + message + '</p>' +
    '<button type="button" class="btn btn-sm btn-outline-danger" id="bstblerrRetry">Retry</button>' +
    '</td></tr>';
  document.getElementById('bstblerrRetry').addEventListener('click', load);
}

function renderData() {
  body.innerHTML = ROWS.map(([id, name, total, status, tone]) =>
    '<tr><td>' + id + '</td><td>' + name + '</td><td>' + total +
    '</td><td><span class="badge text-bg-' + tone + '">' + status + '</span></td></tr>'
  ).join('');
}

function load() {
  attempt++;
  renderLoading();

  setTimeout(() => {
    // The first attempt always fails so the error state (and Retry) is
    // actually reachable in this preview; every retry after that has a
    // genuine 60% chance of succeeding, like a flaky real request.
    const failed = attempt === 1 || Math.random() > 0.6;
    if (failed) {
      renderError('Network request failed. Check your connection and try again.');
    } else {
      renderData();
    }
  }, 1000);
}

load();