@litable/solid

SolidJS wrapper for @litable/core.

Install

npm install @litable/solid @litable/core

Usage

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

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)}
      onSort={(col, dir) => console.log(col, dir)}
    />
  );
}

Inline data

import { createSignal } from 'solid-js';
import LiTable from '@litable/solid';

function App() {
  const [rows] = createSignal([
    { 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 SolidJS props. The component uses onMount + createEffect to initialise and reactively update the underlying LiTable instance, and onCleanup to destroy it.

TypeScript

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

See @litable/core for the full options reference.

License

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