diff

What changed between two versions of a record, field by field, marked with + and − as well as colour.

Example

FieldBeforeAfter
Status Draft Active
owner Rina Dan
note Old note -
budget - 500

Laravel

<x-admin::diff id="g-diff" :labels="['status' => 'Status', 'priority' => 'Priority']" :before="['status' => 'Draft', 'priority' => 80, 'owner' => 'Rina', 'note' => 'Old note']" :after="['status' => 'Active', 'priority' => 80, 'owner' => 'Dan', 'budget' => 500]" />

Props

PropRequiredDefaultOptions
before[]
after[]
labels[]
allfalse

Other attributes, such as wire:model or data-*, pass through to the element.

Other stacks

React and Vue: import { Diff } from "@admiral/ui-kit/react" (or /vue). See the React and Vue guide.

HTML, for any stack
<div class="adm-table-wrap adm-diff" id="g-diff">
        <table class="adm-table">
            <thead><tr><th scope="col">Field</th><th scope="col">Before</th><th scope="col">After</th></tr></thead>
            <tbody>
                                    <tr>
                        <th scope="row">Status</th>
                                                    <td><del class="adm-diff__old">Draft</del></td>
                            <td><ins class="adm-diff__new">Active</ins></td>
                                            </tr>
                                    <tr>
                        <th scope="row">owner</th>
                                                    <td><del class="adm-diff__old">Rina</del></td>
                            <td><ins class="adm-diff__new">Dan</ins></td>
                                            </tr>
                                    <tr>
                        <th scope="row">note</th>
                                                    <td><del class="adm-diff__old">Old note</del></td>
                            <td> - </td>
                                            </tr>
                                    <tr>
                        <th scope="row">budget</th>
                                                    <td> - </td>
                            <td><ins class="adm-diff__new">500</ins></td>
                                            </tr>
                            </tbody>
        </table>
    </div>