@litable/alpine

Alpine.js plugin for LiTable.

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

<div
  x-data="{ rows: [...], cols: [...] }"
  x-litable="{ data: rows, columns: cols, sorting: true, pagination: { enabled: true, pageSize: 20 } }"
></div>

The directive evaluates the expression as LiTableOptions, initializes LiTable, and automatically destroys it when the element leaves the DOM via Alpine's cleanup hook.

$litable magic

Create an instance imperatively from within an Alpine component:

<div x-data x-init="$litable({ data: rows, columns: cols })"></div>

TypeScript

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