Dashboard with drill-down

A department overview table that combines expandable rows, conditional row styles for health status, and custom cell renderers for inline progress bars. Expand any row to drill into individual team member utilization.

Expand any row to see team member utilization.

Department
Headcount
Budget spend
Open tickets
Health
Analytics
3
$410,000 / $420,000
98%
21
critical
Design
4
$195,000 / $480,000
41%
3
good
Engineering
12
$1,240,000 / $1,800,000
69%
8
good
Product
5
$680,000 / $750,000
91%
14
at-risk
Sales
6
$320,000 / $600,000
53%
5
good

Conditional row styles

Tint rows based on a derived health field so problems are visible at a glance — no extra column needed: 

const conditionalRowStyles: ConditionalStyles<Department>[] = [
  { when: r => r.health === 'critical', style: { backgroundColor: '#fff7f7' } },
  { when: r => r.health === 'at-risk',  style: { backgroundColor: '#fffdf0' } },
];

Nested table in the expander

Render a second DataTable inside expandableRowsComponent. The parent row arrives as data: 

function DepartmentDetail({ data: dept }: ExpanderComponentProps<Department>) {
  return (
    <div style={{ padding: '12px 32px', background: '#f9fafb' }}>
      <DataTable columns={memberColumns} data={dept.members} dense noHeader />
    </div>
  );
}

<DataTable
  columns={columns}
  data={departments}
  expandableRows
  expandableRowsComponent={DepartmentDetail}
  conditionalRowStyles={conditionalRowStyles}
/>

Inline progress bars in cells

Use a cell renderer for columns that need richer content than a plain value. The renderer receives the full row, so you can derive bar width and color from the data: 

{
  name: 'Budget spend',
  cell: r => {
    const pct = Math.round((r.spent / r.budget) * 100);
    const color = pct >= 95 ? '#ef4444' : pct >= 80 ? '#f59e0b' : '#6366f1';
    return (
      <div style={{ width: '100%' }}>
        <div style={{ fontSize: 11, color: '#6b7280', marginBottom: 3 }}>
          ${r.spent.toLocaleString()} / ${r.budget.toLocaleString()}
        </div>
        <div style={{ height: 4, background: '#f3f4f6', borderRadius: 2, overflow: 'hidden' }}>
          <div style={{ width: `${pct}%`, background: color, height: '100%' }} />
        </div>
      </div>
    );
  },
}