@litable/astro

Astro component for LiTable.

Install

npm install @litable/astro @litable/core

Usage

---
import LiTable from '@litable/astro/LiTable.astro';
const rows = [...];
const columns = [{ field: 'name', title: 'Name', sortable: true }];
---

<LiTable
  data={rows}
  columns={columns}
  pagination={{ enabled: true, pageSize: 20 }}
  sorting={true}
  filtering={true}
/>

How it works

The .astro component serializes the options object 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 is needed.

Callback props (e.g. onRowClick) cannot be passed via server-side Astro props because functions are not JSON-serializable. Attach callbacks manually after page load:

document.querySelector('#my-table').__litable?.onRowClick = (row) => { ... };

TypeScript

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