Data Primitives

DataTable, Figure, StatGrid, and refined code blocks — technical content components for dense documentation.

3 min read

DataTable

A responsive, sortable table with sticky header, subtle zebra rows, and column alignment controls. Click any column header to sort.

Demand Forecast — Q3 2026 by Business Unit

Business UnitFTE DemandCurrent SupplyGapConfidenceRisk ScoreAction
Product Engineering142128-14High3.2Hire + Redeploy
Data & Analytics6741-26Medium6.8Build + Partner
Cloud Infrastructure3835-3High1.1Internal fill
Security Operations2214-8Low7.4Urgent hire
Design & UX3129-2High0.8No action
Professional Services8992+3Medium2.1Bench re-skill
Customer Success5548-7Medium3.9Hire
Finance Operations18180High0.2No action

8 rows

Figures

Figures wrap images, charts, or diagrams with a numbered caption and optional download link.

Figure 1.Demand-to-Talent pipeline flow showing the four-stage conversion from business demand signals through competency matching to staffing decisions.

QuarterEngineeringDataSecurityDesign
Q1 202582%74%68%79%
Q2 202585%71%63%81%
Q3 202583%78%59%80%
Q4 202587%80%55%84%

Figure 2.Utilization trend across business units, Q1–Q4 2025. Security Operations shows a consistent downward trend, flagged for investigation.

Download

StatGrid

Display 2–6 key metrics in a clean card layout with optional trend indicators.

Total FTE Demand

462

+8.2%

Current Supply

405

-2.1%

Aggregate Gap

-57

Widening

Avg Confidence

72%

Stable

Critical Roles

14

+3 this quarter

Avg Cost/FTE

$142K

-1.8%

Code Blocks

Fenced code blocks use a minimal dark theme with a language label and copy button.

typescript
interface DemandSignal {
  source: 'pipeline' | 'project' | 'strategic';
  confidence: number; // 0-1
  fteEquivalent: number;
  timeHorizon: '0-3m' | '3-6m' | '6-12m';
  businessUnit: string;
}

function weightByRisk(signal: DemandSignal): number {
  const horizonWeight = {
    '0-3m': 0.95,
    '3-6m': 0.75,
    '6-12m': 0.50,
  };
  return signal.fteEquivalent * signal.confidence * horizonWeight[signal.timeHorizon];
}
sql
SELECT
    bu.name                         AS business_unit,
    SUM(d.fte_equivalent)           AS raw_demand,
    SUM(d.fte_equivalent * d.confidence * h.weight) AS risk_weighted_demand,
    COUNT(DISTINCT d.role_id)       AS unique_roles
FROM demand_signals d
JOIN business_units bu ON bu.id = d.business_unit_id
JOIN horizon_weights h ON h.horizon = d.time_horizon
WHERE d.active = true
GROUP BY bu.name
ORDER BY risk_weighted_demand DESC;

Inline code like DemandSignal or weightByRisk() uses a subtle bordered style that integrates cleanly with body text.