Audit Log Table Block React component
An audit log with severity and actor filters, search, rows that open to show who did what from where plus a before and after diff, a live stream switch that slides new events in at the top and a JSON export of whatever is filtered.
About the Audit Log Table Block component
Audit Log Table Block shows who did what in your product and when. Each row has the time in UTC, the person, API token or system that acted, the action and what it touched, and a severity badge so critical events like deleted projects or revoked sessions stand out with a red edge.
Open a row to see the IP address, location, client and event ID, plus a before and after diff of exactly what changed. Filter by severity or actor, search by action or IP, turn on the live stream to watch new events slide in, and export what you are looking at as JSON.
When to use it
Use it in admin and security settings, compliance pages for SOC 2 or ISO audits, or an internal tool where support needs to trace changes.
Keep before and after small, just the fields that changed plus a few for context, so the diff stays readable.
Installation
Add the Audit Log Table Block component to your project with the shadcn CLI. It lands in components/audit-log-table.tsx as plain React + Tailwind CSS source you own and can edit.
npx shadcn@latest add @reactframe/audit-log-tableOr copy the source by hand and install its dependencies:
npm install motion clsx tailwind-mergeProps
<AuditLogTable /> accepts 8 props, all optional.
| Prop | Type | Default |
|---|---|---|
| title | string | "Audit log" |
| events | AuditEvent[] | — |
| live Start with the live stream on. | boolean | true |
| onPoll Pull new events while live. Without it, demo events are generated. | (since: string) => Promise<AuditEvent[]> | — |
| interval Milliseconds between polls. | number | 3200 |
| pageSize | number | 10 |
| theme | "dark" | "light" | "dark" |
| className | string | — |
- titlestringDefault: "Audit log"
- eventsAuditEvent[]
- live
Start with the live stream on.
booleanDefault: true - onPoll
Pull new events while live. Without it, demo events are generated.
(since: string) => Promise<AuditEvent[]> - interval
Milliseconds between polls.
numberDefault: 3200 - pageSizenumberDefault: 10
- theme"dark" | "light"Default: "dark"
- classNamestring
npm dependencies
Installed for you by the shadcn CLI.
Audit Log Table Block FAQ
- How does the live stream get new events?
- Pass onPoll. While the switch is on it is called every interval milliseconds with the newest timestamp it has seen, and whatever it returns is added at the top. Without onPoll the block generates demo events so you can see the effect.
- How is the diff built?
- The block compares the before and after objects key by key. Unchanged keys are grey, removed or old values get a minus on red and new values a plus on green. Only before means something was removed; only after shows the details of a new thing.
- What does Export JSON include?
- Every event that matches the current severity, actor and search filters, not just the rows on screen, as pretty printed JSON named after the newest event's date.
- Why are times in UTC?
- Audit logs are compared across teams and time zones, so UTC avoids confusion. The full ISO timestamp is in the details panel.
- Is it accessible?
- It is a real table with a caption, severity chips are toggle buttons with counts, the live switch uses role switch, each row's chevron has aria-expanded and a label naming the event, and diff signs are labelled added or removed.
