KPI Metrics Table - Free UI Component Template

Header Background #ffffff

Header Text Color #64748b

Row Background #ffffff

Row Hover Fill #f1f5f9

Progress Track #e2e8f0

KPI Name Color #0f172a

Primary Text Color #334155

Border Color #e2e8f0

Vertical Padding (rem) 1.25

Horizontal Padding (rem) 1.5

Container Width 1200px

KPI Metrics Table

Designed for performance tracking, this table provides high visibility into metrics using bold progress bars and status pills.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>KPI Metrics Table</title>
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700&display=swap" rel="stylesheet">
    <style>
        /* -- Variables ------------------------------------------------- */
        :root {
            --header-bg: {{headerBgColor}};
            --header-text: {{headerTextColor}};
            --row-bg: {{rowBgColor}};
            --row-hover: {{rowHoverBg}};
            --text-color: {{textColor}};
            --border-color: {{borderColor}};
            --progress-bg: {{progressTrackColor}};
            --accent-color: {{accentColor}};
            --v-pad: {{vPadding}}rem;
            --table-w: {{tableWidth}};
        }

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

body {
            font-family: 'Plus Jakarta Sans', sans-serif;
            background-color: #f8fafc;
            color: var(--text-color);
            padding: 3rem 1.5rem;
            display: flex;
            justify-content: center;
        }

.table-container {
            width: 100%;
            max-width: var(--table-w);
            background: var(--row-bg);
            border-radius: 12px;
            box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.04);
            border: 1px solid var(--border-color);
            overflow: hidden;
        }

.table-wrapper { overflow-x: auto; }

table {
            width: 100%;
            border-collapse: collapse;
            text-align: left;
            font-size: 0.95rem;
        }

thead th {
            background-color: var(--header-bg);
            color: var(--header-text);
            font-weight: 700;
            padding: var(--v-pad) 1.5rem;
            border-bottom: 2px solid var(--border-color);
            text-transform: uppercase;
            letter-spacing: 0.05em;
            font-size: 0.75rem;
        }

td {
            padding: var(--v-pad) 1.5rem;
            border-bottom: 1px solid var(--border-color);
            color: var(--text-color);
            vertical-align: middle;
        }

tbody tr:hover {
            background-color: var(--row-hover);
        }

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

/* KPI Specifics */
        .kpi-name { font-weight: 700; color: var(--accent-color); font-size: 0.9rem; }
        .kpi-target { font-size: 0.8rem; color: #64748b; margin-top: 2px; }
        
        .metric-value { font-family: monospace; font-weight: 700; font-size: 1.15rem; color: var(--text-color); }

.progress-container {
            width: 120px;
            height: 8px;
            background: var(--progress-bg);
            border-radius: 4px;
            overflow: hidden;
            display: inline-block;
            vertical-align: middle;
            margin-right: 12px;
        }
        .progress-fill {
            height: 100%;
            border-radius: 4px;
        }

.percent-label { font-weight: 600; font-size: 0.85rem; color: var(--text-color); }

.status-pill {
            padding: 2px 10px;
            border-radius: 4px;
            font-size: 0.7rem;
            font-weight: 800;
        }
        .on-track { background: #16a34a; color: #fff; }
        .at-risk { background: #ea580c; color: #fff; }
        .behind { background: #dc2626; color: #fff; }

.num { text-align: right; }
        th.num { text-align: right; }

</style>
</head>
<body>

<div class="table-container">
        <div class="table-wrapper">
            <table>
                <thead>
                    <tr>
                        <th>Strategic KPI</th>
                        <th>Actual / Target</th>
                        <th>Target Progress</th>
                        <th class="num">Variance</th>
                        <th class="num">Current Status</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>
                            <div class="kpi-name">Recurring Revenue (MRR)</div>
                            <div class="kpi-target">Goal: $2,000,000</div>
                        </td>
                        <td><span class="metric-value">$1,850,200</span></td>
                        <td>
                            <div class="progress-container"><div class="progress-fill" style="width: 92.5%; background: #16a34a;"></div></div>
                            <span class="percent-label">92.5%</span>
                        </td>
                        <td class="num" style="font-weight: 600;">-$149,800</td>
                        <td class="num"><span class="status-pill on-track">ON TRACK</span></td>
                    </tr>
                    <tr>
                        <td>
                            <div class="kpi-name">Customer Acquisition Cost</div>
                            <div class="kpi-target">Threshold: <$450.00</div>
                        </td>
                        <td><span class="metric-value">$512.40</span></td>
                        <td>
                            <div class="progress-container"><div class="progress-fill" style="width: 100%; background: #dc2626;"></div></div>
                            <span class="percent-label">114%</span>
                        </td>
                        <td class="num" style="font-weight: 600;">+$62.40</td>
                        <td class="num"><span class="status-pill behind">BEHIND</span></td>
                    </tr>
                    <tr>
                        <td>
                            <div class="kpi-name">Net Promoter Score (NPS)</div>
                            <div class="kpi-target">Goal: 75.0</div>
                        </td>
                        <td><span class="metric-value">72.4</span></td>
                        <td>
                            <div class="progress-container"><div class="progress-fill" style="width: 96%; background: #ca8a04;"></div></div>
                            <span class="percent-label">96%</span>
                        </td>
                        <td class="num" style="font-weight: 600;">-2.6</td>
                        <td class="num"><span class="status-pill at-risk">AT RISK</span></td>
                    </tr>
                    <tr>
                        <td>
                            <div class="kpi-name">Server Uptime (SLO)</div>
                            <div class="kpi-target">Goal: 99.99%</div>
                        </td>
                        <td><span class="metric-value">99.995%</span></td>
                        <td>
                            <div class="progress-container"><div class="progress-fill" style="width: 100%; background: #16a34a;"></div></div>
                            <span class="percent-label">100%</span>
                        </td>
                        <td class="num" style="font-weight: 600;">+0.005%</td>
                        <td class="num"><span class="status-pill on-track">ON TRACK</span></td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>

</body>
</html>