shadcn.io is not affiliated with official shadcn/ui
Record Changelog Table Block for Svelte
A field-level changelog table with a word diff: removed words are struck and led by a minus, added words are underlined and led by a plus, in an inline view or a side by side Before and After view, filtered by type.
Installation
Overview
Show exactly which words changed, with this record changelog table for Svelte with Ark UI. A compact header names the history. Inside a hairline frame with a plus mark on each corner, a toolbar band holds three type chips with their counts (Added, Changed, Removed; with none pressed all show) and a Toggle Group that switches between "Inline" and "Side by side". The table lists each change with its record and field, the words, the type, who made it and when. Inline, the change reads as one line: removed words are struck through and led by a minus sign, added words are underlined and led by a plus sign, so the diff reads without colour. Side by side, Before keeps the old words and After the new ones, marked the same way. The words are compared one by one, and a field that was added or removed is all added or all removed. The table sits in a fixed-height region with a sticky head, so switching view or type moves nothing. On a phone the toggle is gone, the view is inline and who and when fold under the record. It's built from Toggle Group, Badge and Guides. For content history, settings changes and record audit screens.
FAQ
How is the diff worked out?
diffOf splits the two texts into words and finds the longest run of words they share, a standard longest common subsequence. Shared words stay as they are, words only in the old text are marked removed and words only in the new text are marked added. It compares whole words, not letters, so "single" becoming "one" reads as one removal and one addition, and a changed number or date stays easy to see. A field with no old value is all added, one with no new value all removed.
Why are the marks not coloured?
Colour that carries meaning fails for colour-blind readers and in some themes. Here a removed word is struck through with a minus before it and an added word is underlined and bold with a plus before it, and a screen reader hears "Removed:" or "Added:" ahead of each. The type chips and badges use weight, a dot that is filled, half filled or hollow, and words.
What do the chips and the toggle do?
The chips filter by type and can be combined: pressing Added and Removed shows both and the status line says "Added and removed only". Pressing none shows everything. The toggle chooses how the words are laid out and does not change which rows show. Both keep the table's height, because the rows live in a fixed region that scrolls.
What stays local, and how do I use real history?
The twelve changes are typed in CHANGES, each with the text before and after, and nothing is saved or requested. For real history, store the before and after of each changed field, return them newest first and keep diffOf and the table. Compute the diff in the page, as here, or on the server if the texts are long.
Is the table accessible?
Yes. It's a native table with a caption, column heads and a row header for each record. Both groups of buttons are named, the chips say whether they are pressed, and a polite status line, present from the start, announces the count and view after each change. The marked words use the del and ins elements with text a screen reader can read.