Column Pinning

Pin a column from its menu, from the show/hide columns menu, or start with some pinned through initialState.columnPinning. Display columns such as mrt-row-select can be pinned too. Scroll the table sideways.

First Name	Last Name	Email	City	State	Age	Salary
Tyson	Jenkins	cleveland_powlowski33@yahoo.com	Pine Bluff	Pennsylvania	56	159712
Lennie	Raynor	marilou_stark90@hotmail.com	Eugene	Colorado	47	162557
Ira	Treutel	hilma.dach44@hotmail.com	Bennettside	Kansas	39	51340
Jodi	Kling	taryn63@hotmail.com	Fort Casandrafield	Idaho	36	108921
Hyman	Brown	reid24@hotmail.com	Fort Assuntaworth	Pennsylvania	66	63392
Osbaldo	Williamson	dee.hand@gmail.com	Daronmouth	Mississippi	43	45640
Godfrey	Bartell	elvie.kilback50@hotmail.com	Zulaufland	Minnesota	31	178763
Maximo	Ward	ada.schuppe@gmail.com	Lake Deebury	Massachusetts	33	143895
Camille	Skiles	garnet_stehr@gmail.com	North Dwight	Alaska	23	131858
Dixie	Powlowski	jada_turcotte77@yahoo.com	West Wyman	Montana	24	122671

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

  const columns: MRT_ColumnDef<Person>[] = [
    { accessorKey: 'firstName', header: 'First Name', size: 150 },
    { accessorKey: 'lastName', header: 'Last Name', size: 150 },
    { accessorKey: 'email', header: 'Email', size: 280 },
    { accessorKey: 'city', header: 'City', size: 200 },
    { accessorKey: 'state', header: 'State', size: 200 },
    { accessorKey: 'age', header: 'Age', size: 120 },
    { accessorKey: 'salary', header: 'Salary', size: 160 },
  ];

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

<!-- pin from the column menu, or start with some columns already pinned -->
<MaterialSvelteTable
  options={{
    columns,
    data,
    enableColumnPinning: true,
    enableRowSelection: true,
    initialState: {
      columnPinning: { end: ['salary'], start: ['mrt-row-select', 'firstName'] },
    },
  }}
/>