Advanced Data & Live Sync

The table refreshes every 5 seconds, backs off automatically when the payload is unchanged, and pauses while the tab is inactive. This page uses a mocked endpoint so it stays demo-friendly even without a real API.

Library setup

Combine a remote source with autoRefresh and hooks to monitor refresh activity in your own UI.

<link rel="stylesheet" href="../src/data-table.css" />

<script type="module">
  import { DogTable } from "../src/data-table.js";

  const table = new DogTable("#app", {
    remote: {
      url: "/api/live-market",
      mapResponse(payload) {
        return { rows: payload.data, totalItems: payload.total };
      },
    },
    autoRefresh: 5000,
    hooks: {
      onFetchSuccess() {
        console.log("refreshed");
      },
    },
    columns: [
      { label: "Trading Pair", accessor: "pair" },
      { label: "Price", accessor: "price", type: "money", currency: "USD" },
      { label: "24h Change", accessor: "change" },
      { label: "Volume", accessor: "volume", type: "number" },
    ],
  });

  table.init();
</script>

0 System Updates

Never Last Refresh

5000 ms Current Timeout

How it works

By setting autoRefresh: 5000, the table initializes an adaptive polling engine. When the API returns the same payload several times in a row, the next refresh interval is backed off automatically. As soon as the response changes again, the timer returns to the base interval. The sync loop also pauses whenever the page is hidden.