@litable/svelte

Svelte 4/5 wrapper for @litable/core.

Install

npm install @litable/svelte @litable/core

Usage

<script>
  import LiTable from '@litable/svelte';

  const apiUrl  = 'https://api.example.com/data?school=1811';
  const columns = [
    { key: 0,  pinLeft:  true },
    { key: 1,  pinLeft:  true, render: (val) => `<b style="color:red;">${val}</b>` },
    { key: -1, pinRight: true },
    { key: -2, pinRight: true },
  ];
  const theme = {
    striped: true,
    border: { borderWidth: 1, columnBorder: true, rowBorder: true, borderColor: 'gray' },
  };
</script>

<LiTable
  ajax={apiUrl}
  serverSide={true}
  {columns}
  stickyHeader={[0, 1]}
  pagination={{ pageSize: 20 }}
  sorting={true}
  filtering={true}
  {theme}
  onPageChange={(page, pageSize) => console.log(page, pageSize)}
  onSort={(col, dir) => console.log(col, dir)}
/>

Inline data

<script>
  import LiTable from '@litable/svelte';

  const rows = [
    { name: 'Alice', city: 'New York' },
    { name: 'Bob',   city: 'London'   },
  ];
</script>

<LiTable
  data={rows}
  columns={[
    { key: 'name', header: 'Full Name', pinLeft: true },
    { key: 'city', render: (val) => `<em>${val}</em>` },
  ]}
  pagination={{ pageSize: 10, pageSizes: [5, 10, 25, 'All'] }}
  sorting={true}
  filtering={true}
  exportOptions={{ formats: ['csv', 'excel'], filename: 'users' }}
/>

Note: The export option is named exportOptions in this wrapper to avoid a conflict with the Svelte export keyword.

Props

All LiTableOptions fields are export let props. Reactive updates use a $: statement that calls .update() whenever any prop changes.

| Svelte prop | Core option | Note | |----------------|-------------|------| | exportOptions| export | Renamed to avoid Svelte keyword conflict | | All others | same name | — |

TypeScript

import type { LiTableOptions, ColumnDef, Row } from '@litable/svelte';

See @litable/core for the full options reference.

License

Copyright © 2026 Naveen Yadav. All rights reserved.
Proprietary and confidential — see LICENSE.