@litable/alpine

Alpine.js 3 plugin for @litable/core.

Install

npm install @litable/alpine @litable/core

Setup

import Alpine from 'alpinejs';
import { LiTablePlugin } from '@litable/alpine';

Alpine.plugin(LiTablePlugin);
Alpine.start();

Usage

x-litable directive

Pass any LiTableOptions as the directive expression. The table initialises when the element enters the DOM and is automatically destroyed when it leaves.

<div
  x-data="{
    apiUrl: 'https://api.example.com/data?school=1811',
    columns: [
      { key: 0,  pinLeft: true },
      { key: 1,  pinLeft: true, render: (val) => `<b>${val}</b>` },
      { key: -1, pinRight: true },
    ]
  }"
  x-litable="{
    ajax:       apiUrl,
    serverSide: true,
    columns:    columns,
    stickyHeader: [0],
    pagination: { pageSize: 20 },
    sorting:    true,
    filtering:  true,
    theme:      { striped: true, border: { borderWidth: 1, borderColor: '#cccccc' } }
  }"
></div>

Inline data

<div
  x-data="{ rows: [{ name: 'Alice', city: 'New York' }] }"
  x-litable="{
    data:       rows,
    columns:    [{ key: 'name', header: 'Full Name', pinLeft: true }],
    pagination: { pageSize: 10 },
    sorting:    true
  }"
></div>

$litable magic

Create an instance imperatively from within an Alpine component:

<div
  x-data
  x-init="$litable({
    ajax:       'https://api.example.com/data',
    serverSide: true,
    pagination: { pageSize: 20 },
    sorting:    true
  })"
></div>

TypeScript

import type { LiTableOptions } from '@litable/alpine';

See @litable/core for the full options reference.

License

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