@litable/astro

Astro 4 component for @litable/core.

Install

npm install @litable/astro @litable/core

Usage

---
import LiTable from '@litable/astro/LiTable.astro';

const columns = [
  { key: 0,  pinLeft:  true },
  { key: 1,  pinLeft:  true, render: (val) => `<b>${val}</b>` },
  { key: -1, pinRight: true },
  { key: -2, pinRight: true },
];
---

<LiTable
  ajax="https://api.example.com/data?school=1811"
  serverSide={true}
  columns={columns}
  stickyHeader={[0, 1]}
  pagination={{ pageSize: 20 }}
  sorting={true}
  filtering={true}
  theme={{ striped: true, border: { borderWidth: 1, borderColor: '#cccccc' } }}
/>

Inline data

---
import LiTable from '@litable/astro/LiTable.astro';

const rows = [
  { name: 'Alice', city: 'New York' },
  { name: 'Bob',   city: 'London'   },
];
---

<LiTable
  data={rows}
  columns={[{ key: 'name', header: 'Full Name', pinLeft: true }]}
  pagination={{ pageSize: 10 }}
  sorting={true}
  filtering={true}
  export={{ formats: ['csv', 'excel'], filename: 'users' }}
/>

How it works

The .astro component serializes all options to a data-litable-options attribute at build time. A bundled client <script> reads that attribute in the browser and initialises LiTable — so no JS framework runtime is needed on the client.

Callback props (onSort, onPageChange, etc.) cannot be passed as Astro server-side props because functions are not JSON-serializable. Attach them manually after the page loads:

// In a client-side <script> or island
document.querySelector('#my-table').__litable?.onPageChange = (page, size) => { ... };

TypeScript

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

See @litable/core for the full options reference.

License

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