Basic Table

Table Demo

---

Name	Age	Email	Phone
Kendra Weissnat-Ziemann	41	Lucious23@hotmail.com	(852) 838-0609
Eleanor Hirthe	28	Dion38@gmail.com	(279) 388-6308
Helen Nolan	22	Casimir.Stokes@gmail.com	(618) 580-1053
Richard Bartell-Conn	36	Adolf51@gmail.com	(359) 280-6211
Hubert Gorczany	84	Madaline27@hotmail.com	(444) 771-0168
Clint Jenkins	89	Linnie22@hotmail.com	(796) 471-3480
Mr. Melvin Leuschke-MacGyver	66	Ressie.Smith@yahoo.com	(383) 241-5706
Eddie Dickens IV	32	Tad18@yahoo.com	(698) 637-5272
Christian Conroy	77	Irwin.Lubowitz@gmail.com	(601) 550-2439
Earnest West	83	Garrett_Crist@hotmail.com	(761) 925-7502

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.