There is no datagrid without data! In order not to complicate this example, we will use predefined data, which will look as follows:

{ 
    "index": 1, 
    "product": { 
        "name": "Sprouts - Onion" 
    },
    "quantity": 972, 
    "price": 261.51, 
    "expiration_date": "7/14/2024", 
    "manufacturer": "Green Factory", 
    "category": "vegetables", 
    "location": "Apt 1819", 
    "barcode": 3056519006086, 
    "weight": 25.6, 
    "supplier": "Foodgast", 
    "id": "a0473d74-06e7-4dd0-8bb3-a17f16c94180" 
}

There are no special requirements how your data looks like, as you can see the data can be nested, it does not have to be a flat structure.

Second step in creating a datagrid will be to define columns.

import type { BaseColumn } from "$lib/datagrid/types";
import type { InventoryDataRow as Row } from "$lib/data/inventory";

export const columns = [
    {
        id: 'product.name',
        title: 'Product name',
        grow: true
    },
    {
        id: 'price',
        title: 'Price',
    },
] satisfies BaseColumn<Row>[]

BaseColumn is a generic type. Give it the your data shape to get typesafety in column definition. (nested data at this point gives no intelisense)

Datagrid columns does not always behave like table columns, they have specified width. You can set your own width in columns definition with width. Eg. width:"300px". In some scenarios I believe that adding grow to particular column is a better idea. Either first or last column is good candidate, or you can make any other most important column grow to fill the available space.

A good practice is to place the columns in a separate file. This makes our main component look neater.

Svelte 5 allows you to define stores outside of .svelte files as a class. Datagrid takes advantage of this capability.

Import the class and create an instance of it inside the context.

let datagrid = setContext(
    `datagrid`,
    new TzezarDatagrid({
        data,
        columns,
    })
);

New instance of datagrid requires a columns and data.

As you will see typesafety is preserved during the creation of datagrid later in the code.

<Datagrid.Datagrid>
	{#snippet head()}
		{#each datagrid.columns as column (column.id)}
			<Datagrid.Header {column} />
		{/each}
	{/snippet}
	{#snippet body()}
		{#each datagrid.data as row, rowIndex}
			<Datagrid.Row {rowIndex}>
				{#each datagrid.columns as column, columnIndex}
					<Datagrid.Cell {columnIndex} {rowIndex} {column} {row} />
				{/each}
			</Datagrid.Row>
		{/each}
	{/snippet}
</Datagrid.Datagrid>

<Datagrid.Datagrid>

<Datagrid.Header>

<Datagrid.Row>

<Datagrid.Cell>

You've just built your first datagrid—what an achievement! Creating a powerful and flexible grid like this is a huge step forward, and you’ve done a fantastic job bringing it to life.

But this is just the beginning! There’s so much more you can do to enhance your datagrid. The feature guides are packed with tips on how to customize cells, apply unique styles, and introduce advanced logic to your rows and columns. The possibilities for fine-tuning and optimizing your grid are endless.

So keep going! Experiment with new ideas, explore the documentation, and continue to build upon what you’ve already accomplished. You’re on a great path, and I’m excited to see what you’ll create next!

<script lang="ts">
	import type { BaseColumn } from '$lib/datagrid/types';
	import type { InventoryDataRow as Row } from '$lib/data/inventory';
	import { setContext } from 'svelte';
	import { TzezarDatagrid } from '$lib/datagrid/tzezar-datagrid.svelte';
	import { inventoryData as data } from '$lib/data/inventory';
	import * as Datagrid from '$lib/datagrid';
	export const columns = [
		{
			id: 'product.name',
			title: 'Product name',
            grow: true
		},
		{
			id: 'price',
			title: 'Price'
		}
	] satisfies BaseColumn<Row>[];

	let datagrid = setContext(
		`datagrid`,
		new TzezarDatagrid({
			data,
			columns
		})
	);
</script>

<Datagrid.Datagrid>
	{#snippet head()}
		{#each datagrid.columns as column (column.id)}
			<Datagrid.Header {column} />
		{/each}
	{/snippet}
	{#snippet body()}
		{#each datagrid.data as row, rowIndex}
			<Datagrid.Row {rowIndex}>
				{#each datagrid.columns as column, columnIndex}
					<Datagrid.Cell {columnIndex} {rowIndex} {column} {row} />
				{/each}
			</Datagrid.Row>
		{/each}
	{/snippet}
</Datagrid.Datagrid>