@litable/preact

Preact 10 wrapper for @litable/core.

Install

npm install @litable/preact @litable/core

Usage

import LiTable from '@litable/preact';
import type { ColumnDef } from '@litable/preact';

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 },
];

function App() {
  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' } }}
      onPageChange={(page, pageSize) => console.log(page, pageSize)}
    />
  );
}

Inline data

import LiTable from '@litable/preact';

function App() {
  const rows = [
    { name: 'Alice', city: 'New York' },
    { name: 'Bob',   city: 'London'   },
  ];

  return (
    <LiTable
      data={rows}
      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}
    />
  );
}

Props

All LiTableOptions fields are accepted as props. Additional props:

| Prop | Type | Description | |---------|-------------------------|-------------| | class | string | CSS class on the container element | | style | string \| JSX.CSSProperties | Inline styles |

The component initialises via useEffect on mount, calls .update() on each render with current props, and destroys the instance on unmount.

TypeScript

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

See @litable/core for the full options reference.

License

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