Skip to content
EspañolEnglish
All components (244)

Change history

Management · AuditLogViewer

What it is and when to use it

The change history of something: who did what, on what and when, with what changed field by field and, if the application allows it, a button to revert with its confirmation.

When to use it

  • The history tab of a record: an invoice, a customer, a user.
  • Each entry carries actor, at, action and, optionally, target and changes. Each change is shown with DiffViewer.
  • searchable adds a field to search by person, action, object or field; onLoadMore asks for more entries in batches.
  • Entries are grouped by day (groupByDay) in the browser's time zone or in that of timeZone. The order is the one they arrive in.
  • With onRevert, each entry carries a button with confirmation; revertible: false removes it from one entry.

When not to

  • Notifications or alerts about what is happening now: the notification tray.
  • Reverting is not done by the library: your function does it, and the server has to check again that it can be done.

Keyboard: each entry unfolds with Enter or Space on its summary; the search and the buttons are normal controls.

Accessibility: the list is a named group (label, required), the days are headings and each time carries its full date. While loading, the list is marked as busy.

Fine appearance: the boxes use the library's surface and border tokens; the diff of each field, the --amset-diff-* variables.

What it looks like

Friday, October 30, 2026

  1. Marta Ruiz changed the price of Anillo Aurelia

    View 1 change
    • Price
      Line removed: 89
      Line added: 95

  2. Aitor Mena archived the order #1042

    View 1 change
    • Status
      Line removed: enviado
      Line added: archived

Thursday, October 29, 2026

  1. Carla Gil registered Lucía Ferrer

    View 2 changes
    • Role
      Line added: gestor
    • Active
      Line added: true

Press “Revert” on the price change.

<AuditLogViewer
  label="Change log"
  entries={entradas}
  timeZone="Europe/Madrid"
  searchable
  defaultExpanded
  onRevert={(entrada) => deshacer(entrada)}
/>

Props

Import it with import { AuditLogViewer } from '@amset/ui'. Required props are marked.

PropTypeWhat it does
entriesrequiredreadonly AuditEntry[]—
labelrequiredstringWhich history it is («History of invoice 2026-0142»): it names the list. Required.
classNamestringMerged with the library classes; it does not replace them.
dayHeadingLevelAuditHeadingLevelThe level of each day's heading. 3 by default.
defaultExpandedbooleanWith the entries unfolded from the start. Off by default.
emptyTextstringWhat is said when there are no entries.
groupByDaybooleanGroups the entries under the day they happened. On by default.
loadingbooleanThe history is being requested: the wait is shown instead of «there is nothing».
onLoadMore() => void | Promise<void>Ask for more entries: the load-more button appears, with the count if `total` is passed.
onRevert(entry: AuditEntry) => void | Promise<void>Revert an entry. If passed, each revertible entry carries its button, with a confirmation first. If it fails (throws or rejects), the confirmation itself says so and the entry stays as it was. The library undoes nothing: this function does, and the server has to check again that it can be done.
searchablebooleanA field to search by who, what they did, on what or in which fields. Off by default.
timeZonestringThe time zone in which days and times are written. The browser's by default.
totalnumberHow many entries there are in total, for the button's count.

It also accepts the attributes of the element it renders: className, style, data-*, aria-* and its events.

In the test bench

Every state and variant, to try one at a time, on its page at ui.amset.tech: