@litable/qwik

Qwik wrapper for @litable/core.

Install

npm install @litable/qwik @litable/core

Usage

import { component$ } from '@builder.io/qwik';
import { LiTable } from '@litable/qwik';
import type { ColumnDef } from '@litable/qwik';

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

export default component$(() => {
  return (
    <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 { component$, useSignal } from '@builder.io/qwik';
import { LiTable } from '@litable/qwik';

export default component$(() => {
  const rows = useSignal([
    { name: 'Alice', city: 'New York' },
    { name: 'Bob',   city: 'London'   },
  ]);

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

How it works

• Uses useVisibleTask$ (client-only) so the table initialises only in the browser — never on the server.
• @litable/core is loaded via dynamic import() to keep it out of the SSR bundle.
• Props are tracked via Qwik's track() so changes trigger a re-init automatically.

Callback props (onSort, onPageChange, etc.) work because useVisibleTask$ runs client-side only — no serialization boundary is crossed.

TypeScript

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

See @litable/core for the full options reference.

License

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