# svelma-pro
Pretty HTML tables

# Tables

## Pretty HTML tables

Codesandbox

| First Name | Last Name | City | State
--- | --- | --- | --- | ---
No data

    <script>
      let loading = false
      let users = []

      const titleize = s => s.replace(/^([a-z])/, (_, r) => r.toUpperCase())

      async function update() {
        loading = true

        users = []
        users = (await (await fetch('https://randomuser.me/api/?results=10')).json()).results

        loading = false
      }

      onMount(() => update())
    </script>

    <button class="button is-primary" on:click={update}>Update</button>
    <button class="button is-primary" on:click={() => users = []}>No Data</button>

    <br>
    <br>

    <table class="table is-fullwidth">
      <thead>
        <tr>
          <th></th>
          <th>First Name</th>
          <th>Last Name</th>
          <th>City</th>
          <th>State</th>
        </tr>
      </thead>
      <tbody>
        {#each users as user}
          <tr>
            <td><figure class="image"><img class="is-rounded" src="{user.picture.thumbnail}" alt=""></figure></td>
            <td>{titleize(user.name.first)}</td>
            <td>{titleize(user.name.last)}</td>
            <td>{titleize(user.location.city)}</td>
            <td>{titleize(user.location.state)}</td>
          </tr>
        {:else}
          {#if !loading}
            <tr>
              <td colspan="5">
                <section class="section">
                  <div class="content has-text-grey has-text-centered">
                    <p><i class="far fa-3x fa-frown"></i></p>
                    <p>No data</p>
                  </div>
                </section>
              </td>
            </tr>
          {/if}
        {/each}
      </tbody>
    </table>