Resizable Columns

Turn on enableColumnResizing. Drag the edge of a header, or double click it to reset the width.

First Name

Last Name

Email

City

Magdalena

Waters

carmelo_beier@gmail.com

Lake Ethelfort

Aaron

Heathcote

lenora61@hotmail.com

Denver

Emmett

Raynor

olga_daniel95@yahoo.com

Macejkovicstad

Santa

Treutel

harley49@hotmail.com

Fort May

Antonette

Pacocha

kurt.mitchell66@yahoo.com

Atascocita

1–5 of 30

Resizable.svelte

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

  const columns: HeadlessColumnDef<Person>[] = [
    { accessor: 'firstName', header: 'First Name', width: 160, minWidth: 80 },
    { accessor: 'lastName', header: 'Last Name', width: 160, minWidth: 80 },
    { accessor: 'email', header: 'Email', width: 280, minWidth: 120 },
    { accessor: 'city', header: 'City', width: 160, minWidth: 80 },
  ];

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

<MaterialHeadlessTable {columns} {data} enableColumnResizing striped initialState={{ pageSize: 5 }} pageSizes={[5, 10]} />