Basic Example

Click a header to sort (hold Shift for several columns), use the search box, the density and columns 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

1–10 of 60

Basic.svelte

<script lang="ts">
  import { ShadcnHeadlessTable, type HeadlessColumnDef } from 'shadcn-svelte-headless-table';
  import { type Person, makeData } from '../data/makeData';

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

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

<ShadcnHeadlessTable {columns} {data} />