Basic Example

This is all it takes. Every feature below is already on: click a header to sort, open the column menu for more actions, use the filter, search and density buttons in the toolbar, and page through the rows.

First Name	Last Name	Email	State	Age
Doreen	Ullrich	diana31@yahoo.com	Massachusetts	60
Alf	Wyman	quincy_halvorson61@hotmail.com	Maine	39
Malinda	White	hosea35@yahoo.com	Indiana	23
Scarlett	Schmitt	amaya_langworth76@gmail.com	Florida	40
Lazaro	Deckow	brandy_adams38@hotmail.com	Illinois	22
Richie	Lebsack	agustin12@gmail.com	Massachusetts	33
Samuel	Lockman	deborah43@hotmail.com	South Dakota	57
Skylar	Dare	ora69@hotmail.com	North Dakota	28
Herminia	Torphy	reinhold.rutherford-lebsack69@yahoo.com	Alabama	58
Melvina	Hane	sydni_walter@yahoo.com	Washington	58

Rows per page 5101520253050100

1-10 of 60

Basic.svelte

<script lang="ts">
  import { MaterialSvelteTable, type MRT_ColumnDef } from 'material-svelte-tanstack-table';
  import { type Person, makeData } from '../data/makeData';

  // Columns and data should be stable, so define them once.
  const columns: MRT_ColumnDef<Person>[] = [
    { accessorKey: 'firstName', header: 'First Name' },
    { accessorKey: 'lastName', header: 'Last Name' },
    { accessorKey: 'email', header: 'Email', size: 260 },
    { accessorKey: 'state', header: 'State' },
    { accessorKey: 'age', header: 'Age', size: 100 },
  ];

  const data = makeData(60);
</script>

<MaterialSvelteTable options={{ columns, data }} />