bencroker/demo.twig

## demo.twig
<!DOCTYPE html>
<html lang="en-GB">
<head>
    <title>Spark Demo</title>
    <meta charset="utf-8"/>
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/full.min.css" rel="stylesheet" type="text/css"/>
    <script src="https://cdn.tailwindcss.com"></script>
</head>
<body>
    {# https://tailwindcss.com/docs/container #}
    <div class="container mx-auto max-w-3xl py-8">
        <div id="alert"></div>
        {# https://daisyui.com/components/table/ #}
        <div class="overflow-x-auto mt-4">
            <table data-store="{ entryId: 0, title: '' }" class="table table-pin-rows">
                <thead>
                    <tr>
                        <th class="w-10">ID</th>
                        <th class="w-1/2">Title</th>
                        <th>Author</th>
                        <th class="w-48"></th>
                    </tr>
                </thead>
                <tbody>
                    {% for entry in craft.entries.all() %}
                        <tr>
                            <td>{{ entry.id }}</td>
                            <td>
                                <div data-show="$entryId != {{ entry.id }}">
                                    <div id="title-{{ entry.id }}" data-value="{{ entry.title }}">
                                        {{ entry.title }}
                                    </div>
                                </div>
                                <div data-show="$entryId == {{ entry.id }}" style="display: none;">
                                    <input type="text" data-model="title" class="input input-bordered w-full">
                                </div>
                            </td>
                            <td>{{ entry.author.username }}</td>
                            <td>
                                <button data-on-click="$entryId = {{ entry.id }}; $title = document.getElementById('title-{{ entry.id }}').dataset.value;" data-show="$entryId != {{ entry.id }}" class="btn">
                                    Edit
                                </button>
                                <button data-on-click="$entryId = 0" data-show="$entryId == {{ entry.id }}" class="btn" style="display: none;">
                                    Cancel
                                </button>
                                <button data-on-click="{{ sparkUrl('_spark/save-entry.twig', [], 'post') }}" data-show="$entryId == {{ entry.id }}" class="btn btn-primary" style="display: none;">
                                    Save
                                </button>
                            </td>
                        </tr>
                    {% endfor %}
                </tbody>
            </table>
        </div>
    </div>
</body>
</html>

## save-entry.twig
{% set response = craft.app.runAction('entries/save-entry') %}
{% if response.isSuccessful %}
    <div id="title-{{ store.entryId }}" data-value="{{ store.title }}">
        {{ store.title }}
    </div>
    <div id="alert"></div>
    {% do store.set('entryId', 0) %}
{% else %}
    {# https://daisyui.com/components/alert/#error-color #}
    <div id="alert" role="alert" class="alert alert-error">
        <svg
            xmlns="http://www.w3.org/2000/svg"
            class="h-6 w-6 shrink-0 stroke-current"
            fill="none"
            viewBox="0 0 24 24">
            <path
                stroke-linecap="round"
                stroke-linejoin="round"
                stroke-width="2"
                d="M10 14l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2m7-2a9 9 0 11-18 0 9 9 0 0118 0z"/>
        </svg>
        <span>
            Error!
            {% for error in response.data.errors %}
                {{ error|first }}
            {% endfor %}
        </span>
    </div>
{% endif %}
	<!DOCTYPE html>
	<html lang="en-GB">
	<head>
	<title>Spark Demo</title>
	<meta charset="utf-8"/>
	<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/full.min.css" rel="stylesheet" type="text/css"/>
	<script src="https://cdn.tailwindcss.com"></script>
	</head>
	<body>
	{# https://tailwindcss.com/docs/container #}
	<div class="container mx-auto max-w-3xl py-8">
	<div id="alert"></div>
	{# https://daisyui.com/components/table/ #}
	<div class="overflow-x-auto mt-4">
	<table data-store="{ entryId: 0, title: '' }" class="table table-pin-rows">
	<thead>
	<tr>
	<th class="w-10">ID</th>
	<th class="w-1/2">Title</th>
	<th>Author</th>
	<th class="w-48"></th>
	</tr>
	</thead>
	<tbody>
	{% for entry in craft.entries.all() %}
	<tr>
	<td>{{ entry.id }}</td>
	<td>
	<div data-show="$entryId != {{ entry.id }}">
	<div id="title-{{ entry.id }}" data-value="{{ entry.title }}">
	{{ entry.title }}
	</div>
	</div>
	<div data-show="$entryId == {{ entry.id }}" style="display: none;">
	<input type="text" data-model="title" class="input input-bordered w-full">
	</div>
	</td>
	<td>{{ entry.author.username }}</td>
	<td>
	<button data-on-click="$entryId = {{ entry.id }}; $title = document.getElementById('title-{{ entry.id }}').dataset.value;" data-show="$entryId != {{ entry.id }}" class="btn">
	Edit
	</button>
	<button data-on-click="$entryId = 0" data-show="$entryId == {{ entry.id }}" class="btn" style="display: none;">
	Cancel
	</button>
	<button data-on-click="{{ sparkUrl('_spark/save-entry.twig', [], 'post') }}" data-show="$entryId == {{ entry.id }}" class="btn btn-primary" style="display: none;">
	Save
	</button>
	</td>
	</tr>
	{% endfor %}
	</tbody>
	</table>
	</div>
	</div>
	</body>
	</html>
	{% set response = craft.app.runAction('entries/save-entry') %}
	{% if response.isSuccessful %}
	<div id="title-{{ store.entryId }}" data-value="{{ store.title }}">
	{{ store.title }}
	</div>
	<div id="alert"></div>
	{% do store.set('entryId', 0) %}
	{% else %}
	{# https://daisyui.com/components/alert/#error-color #}
	<div id="alert" role="alert" class="alert alert-error">
	<svg
	xmlns="http://www.w3.org/2000/svg"
	class="h-6 w-6 shrink-0 stroke-current"
	fill="none"
	viewBox="0 0 24 24">
	<path
	stroke-linecap="round"
	stroke-linejoin="round"
	stroke-width="2"
	d="M10 14l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2m7-2a9 9 0 11-18 0 9 9 0 0118 0z"/>
	</svg>
	<span>
	Error!
	{% for error in response.data.errors %}
	{{ error\|first }}
	{% endfor %}
	</span>
	</div>
	{% endif %}