DBmon

 1<div
 2    id="demo"
 3    data-on-load="@get('/examples/dbmon/updates')"
 4    data-signals-_editing__ifmissing="false"
 5>
 6    <p>
 7        Average render time for entire page: { renderTime }
 8    </p>
 9    <div role="group">
10        <label>
11            Mutation Rate %
12            <input
13                type="number"
14                min="0"
15                max="100"
16                value="20"
17                data-on-focus="$_editing = true"
18                data-on-blur="@put('/examples/dbmon/inputs'); $_editing = false"
19                data-attr-data-bind-mutation-rate="$_editing"
20                data-attr-data-bind-_mutation-rate="!$_editing"
21            />
22        </label>
23        <label>
24            FPS
25            <input
26                type="number"
27                min="1"
28                max="144"
29                value="60"
30                data-on-focus="$_editing = true"
31                data-on-blur="@put('/examples/dbmon/inputs'); $_editing = false"
32                data-attr-data-bind-fps="$_editing"
33                data-attr-data-bind-_fps="!$_editing"
34            />
35        </label>
36    </div>
37    <table style="table-layout: fixed; width: 100%; word-break: break-all">
38        <tbody>
39            <!-- Dynamic rows generated by server -->
40            <tr>
41                <td>cluster1</td>
42                <td style="background-color: var(--_active-color)" class="success">
43                    8
44                </td>
45                <td aria-description="SELECT blah from something">
46                    12ms
47                </td>
48                <!-- More query cells... -->
49            </tr>
50            <!-- More database rows... -->
51        </tbody>
52    </table>
53</div>