Basic Table

Table Demo

---

Name	Age	Email	Phone
Tracy Ondricka	59	Cody.Hahn46@hotmail.com	(270) 685-2088
Dr. Delores Greenholt	86	Jermain22@gmail.com	(670) 634-8446
Lena Hagenes	90	Rosalind.Bins55@hotmail.com	(388) 742-7727
Dr. Dallas Bogisich	67	Will_Orn@yahoo.com	(987) 878-2091
Frances Hackett-Ullrich	30	Morton.Reichert4@hotmail.com	(398) 339-5972
Miss Katherine Strosin	47	Josh_Dare@yahoo.com	(522) 311-0039
Kim Ziemann II	41	Jacquelyn.Zemlak@yahoo.com	(442) 360-5473
Al Krajcik	63	Georgiana.Howe21@yahoo.com	(717) 941-5844
Lucille Sporer	67	Bernard.Purdy12@hotmail.com	(706) 648-9699
Elizabeth White	88	Benny_OKeefe69@yahoo.com	(884) 678-5353

Explanation

---

This guide walks through the process of creating a table in Svelte 5 using a column helper, defining column definitions, setting up the table, and rendering it in the markup.

Defining the Column Helper

A column helper is a utility that simplifies the creation of column definitions, especially when working with typed data. It ensures that the column definitions have the correct data types and structure, making your code more robust and easier to maintain.

<script lang="ts">
  import { createColumnHelper } from '$lib/table';
  import { type UserProfile } from '$lib/services/user-profile';

  const colHelp = createColumnHelper<UserProfile>();
</script>

Making the Column Definitions

Using the column helper, we define the columns that our table will display. Each column is associated with a specific field from the data and has a header label.

<script lang="ts">
  import { createColumnHelper } from '$lib/table'; 
  import { type UserProfile } from '$lib/services/user-profile';

  const colHelp = createColumnHelper<UserProfile>();

  const columnDefs = [ 
    colHelp.accessor('age', { header: 'Age' }), 
    colHelp.accessor('email', { header: 'Email' }), 
    colHelp.accessor('phone', { header: 'Phone' }) 
  ]; 
</script>

• Field Access: The first argument to each accessor method specifies the field to extract from each data record (e.g., name, age, email, and phone).
• Header Label: The header property defines what will be displayed in the table header for each column.

This approach clearly maps each column to its respective field in the data, making the table definition concise and easy to understand.

Setting Up the Table

After defining the columns, the next step is to set up the table using the createSvelteTable function. This function initializes the table with the specified data, columns, and core row model.

<script lang="ts">
  import { createColumnHelper } from '$lib/table'; 
  import { createColumnHelper, createSvelteTable, getCoreRowModel } from '$lib/table'; 
  import { type UserProfile } from '$lib/services/user-profile'; 
  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>

For more information on row models, refer to the Row Model Documentation.

Rendering the Table

Finally, the table structure is created using Svelte's templating syntax. This includes rendering both the header and the body of the table dynamically.

<table>
  <thead>
    <tr>
      {#each table.getHeaderGroups() as headerGroup}
        {#each headerGroup.headers as header}
          <th>{header.column.columnDef.header}</th>
        {/each}
      {/each}
    </tr>
  </thead>
  <tbody>
    {#each table.getRowModel().rows as row}
      <tr>
        {#each row.getVisibleCells() as cell}
          <td>{cell.getValue()}</td>
        {/each}
      </tr>
    {/each}
  </tbody>
</table>

Since all of the are plain old JavaScript objects (POJO's), we don't need to use FlexRender to render the cells. Use FlexRender when you need to render components or snippets.