Grid View

Table Demo

---

Explanation

---

This guide walks you through converting the basic table example into a grid view.

Why would I use a table library for a grid view?

Though much of the rendering API will be put to the side for this example, a grid view still benefits from the table object's features such as state management.

Creating the Table

We're going to start from the basic table example and convert it into a grid.

<!-- +page.svelte -->
<script lang="ts">
  import { createColumnHelper, createSvelteTable, getCoreRowModel } from '$lib/table';
  import { type UserProfile, userProfiles } from '$lib/services/user-profile';

  const colHelp = createColumnHelper<UserProfile>();

  const columnDefs = [
    colHelp.accessor('name', { header: 'Name' }),
    colHelp.accessor('age', { header: 'Age' }),
    colHelp.accessor('email', { header: 'Email' }),
    colHelp.accessor('phone', { header: 'Phone' })
  ];

  const table = createSvelteTable({
    data: userProfiles,
    columns: columnDefs,
    getCoreRowModel: getCoreRowModel()
  });
</script>

Making the Card Snippet

To display the data, we'll make a simple snippet (or component). This one accepts a UserProfile object as a parameter.

<!-- +page.svelte -->
<script lang="ts">
  import { createColumnHelper, createSvelteTable, getCoreRowModel } from '$lib/table';
  import { type UserProfile, userProfiles } from '$lib/services/user-profile';

  const colHelp = createColumnHelper<UserProfile>();

  const columnDefs = [
    colHelp.accessor('name', { header: 'Name' }),
    colHelp.accessor('age', { header: 'Age' }),
    colHelp.accessor('email', { header: 'Email' }),
    colHelp.accessor('phone', { header: 'Phone' })
  ];

  const table = createSvelteTable({
    data: userProfiles,
    columns: columnDefs,
    getCoreRowModel: getCoreRowModel()
  });
</script>

{#snippet profileCard(userProfile: UserProfile)}
    <div class="data-card">
        <header>
            <strong>{userProfile.name}</strong>
        </header>
        <div class="data-card-metadata">
            <p>Age: {userProfile.age}</p>
            <p>Email: {userProfile.email}</p>
            <p>Phone: {userProfile.phone}</p>
        </div>
    </div>
{/snippet}

<style>
    .data-card { 
        border: 1px solid; 
        padding: 10px; 
    } 

    .data-card header { 
        border-bottom: 1px solid; 
        margin-bottom: 8px; 
    } 

    .data-card .data-card-metadata p { 
        white-space: nowrap; 
        overflow: hidden; 
        text-overflow: ellipsis; 
        margin: 0; 
    } 
</style>

Displaying the Grid

Now, we can display the grid by grabbing the rows array from table.getCoreRowModel(). As we iterate over each entry, we'll use the row's original property to pass the UserProfile object to the profileCard snippet.

<!-- +page.svelte -->
<script lang="ts">
  // ...script from above...
</script>

{#snippet profileCard(userProfile: UserProfile)}
  <div class="data-card">
    <header>
      <strong>{userProfile.name}</strong>
    </header>
    <div class="data-card-metadata">
      <p>Age: {userProfile.age}</p>
      <p>Email: {userProfile.email}</p>
      <p>Phone: {userProfile.phone}</p>
    </div>
  </div>
{/snippet}

<div class="data-grid">
  {#each table.getCoreRowModel().rows as row}
    {@render profileCard(row.original)}
  {/each}
</div>

<style>
  .data-grid { 
    display: grid; 
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); 
    gap: 10px; 
  } 

  /* ...rest of the styles... */
</style>

Now that the grid is rendered, you can apply more functionality to it using the table API, such as sorting, filtering, or pagination.