Column profilePro
Every column of a dataset at a glance: inferred type, a histogram with outlier bins or the top values, nulls, unique values and outliers, with a convert action for text that parses as a better type.
On this page
ProA 2,400 row order export: totals with outliers, sparse coupon codes and dates stored as text, converted in one click.
Installation
Usage
import { ColumnProfile } from "@/components/ui/chatcn/pro/column-profile"
<ColumnProfile
title="orders_export.csv"
columns={[
{ name: "total", values: totals, format: "currency" },
{ name: "ordered_at", values: dates, as: fixed.ordered_at },
]}
onFixType={convert}
/>Pass raw values and the profile runs in the browser with profileColumn, or pass precomputed stats for large tables. Outliers use the 1.5 IQR rule and get their own bins at the ends, so a few huge values never flatten the histogram. When 90% or more of a text column parses as a date, number or boolean, the column offers Convert and names the values that would not parse; set as once you have converted it.
Examples
States
ProList layout with a column converting, loading, no columns and a parse error.
Props
| Prop | Type | Notes |
|---|---|---|
columns | ProfileColumn[] | { name, values?, stats?, as?, format? } |
layout | strip | list | Side by side like a header, or stacked rows |
onFixType, fixing | (name, type) => void, string | Convert action and its pending column |
loading, error, onRetry, title, locale | Profile states |
Keyboard
| Key | Action |
|---|---|
| Left and Right on a histogram | Step through bins and read each one |
| Home and End on a histogram | First and last bin |
Accessibility
- Each histogram is a slider whose value text names the bin range and row count.
- Outliers and stored as text are said in words as well as amber.
- Every column is a labelled region named after the column and its type.
Motion
The type label crossfades when a column converts. Hovering bins only changes opacity, without transitions. Nothing else moves.