DiffViewer
Shows two versions of a record, one row per field, side by side or inline. The viewer fetches nothing: it compares the before and after it is given, field by field, by deep equality. Null and undefined read as missing, and <ins> and <del> mark the values.
Installation
pnpm dlx shadcn@latest add @chelone/diff-viewerLoading preview…
Shows two versions of a record, one row per field, side by side or inline. The viewer fetches nothing: it compares the before and after it is given, field by field, by deep equality. Null and undefined read as missing, and <ins> and <del> mark the values.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| after | TRecord | — | The later version. |
| before | TRecord | — | The earlier version. |
| className | string | — | |
| formatters | Partial<Record<string, (value: unknown) => ReactNode>> | — | A renderer per source, replacing the default value text. |
| labels | Partial<Record<string, ReactNode>> | — | A label per source, replacing the translated field label. |
| mode | DiffViewerMode | — | Table (`side-by-side`, the default) or list (`inline`). |
| resource | string | — | Resource whose field labels apply. Defaults to the ambient resource. |
| sources | readonly SourceProp<TRecord>[] | — | Fields to show, in this order. Without it: every top-level key. |