ZingGrid Analytics Table

The same analytics data from the sortable table demo, but rendered with ZingGrid — a web component that provides sorting, filtering, search, pagination, and more via declarative HTML attributes.

// Sort, filter, paginate, render,
// column toggles, CSV export,
// event listeners, state management,
// debounce, ARIA attributes...
// ~300 lines of JavaScript

<zing-grid
  src="sample-pageviews.json"
  pager page-size="25"
  sort filter search
  caption="Analytics Pageviews">
</zing-grid>

Live Demo

Custom Cell Renderers for CWV Thresholds

ZingGrid's renderer attribute calls a JavaScript function for each cell. The functions below apply Core Web Vitals threshold coloring (green/amber/red):

// CWV thresholds
const LCP_GOOD = 2500, LCP_POOR = 4000;
const CLS_GOOD = 0.1,  CLS_POOR = 0.25;
const INP_GOOD = 200,  INP_POOR = 500;

function cwvClass(value, good, poor) {
    if (value <= good) return 'cwv-good';
    if (value <= poor) return 'cwv-needs-improvement';
    return 'cwv-poor';
}

function renderLCP(value) {
    return `<span class="${cwvClass(value, LCP_GOOD, LCP_POOR)}"
             style="padding:2px 8px;border-radius:3px;">
              ${Math.round(value)}
            </span>`;
}

Comparison: When to Use What