<start_html script="https://unpkg.com/gridjs/dist/gridjs.umd.js"
  style="@{qw(
      https://unpkg.com/gridjs/dist/theme/mermaid.min.css
      https://cdn.jsdelivr.net/npm/water.css@2/out/water.css
  )}">

  <h1>Grid Demo</h1>

  <!-- Grid container for rendered table -->
  <div id="table"></div>

  <!-- JSON dataset generated by server  -->
  <json id="data" handler="data" pretty>

  <!-- Grid.js table render -->
  <script>

    // Parse JSON from script tag
    const json = JSON.parse(document.getElementById("data").textContent);

    // Initialize Grid.js
    new gridjs.Grid({
      columns: [
        { id: "id", name: "ID" },
        { id: "name", name: "Name" },
        { id: "email", name: "Email" },
        { id: "sales", name: "Sales ($)", formatter: cell => `$${cell}` }
      ],
      data: json,
      search: true,
      sort: true,
      pagination: {
        enabled: true,
        limit: 3,
      },
      style: {
        table: { "font-size": "14px" },
        th: { "background-color": "#f5f5f5" },
      },
    }).render(document.getElementById("table"));
  </script>

__PERL__

sub data {

    #  Build dummy data for display by grid.js
    #
    my @rows=(qw(id name email sales));
    my @data=(
        [qw(1 Alice alice@example.com 320)],
        [qw(2 Bob bob@example.com 150)],
        [qw(3 Charles charles@example.com 470)],
        [qw(4 Diana diana@example.com 290)],
        [qw(6 Evan evan@example.com 510)],
    );
    my @json=map {my %data; @data{@rows}=@{$data[$_]}; \%data} (0..$#data);
    return \@json;
    
}

