@litable/react

React 18/19 wrapper for @litable/core.

Install

npm install @litable/react @litable/core

Usage

import LiTable from '@litable/react';

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

Inline data

const rows = [
  { id: 1, name: 'Alice', city: 'New York' },
  { id: 2, name: 'Bob',   city: 'London'   },
];

<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'] }}
  sorting={true}
  export={{ formats: ['csv', 'excel'], filename: 'users' }}
/>

Existing HTML table

<table id="myTable">
  <thead><tr><th>Name</th><th>City</th></tr></thead>
  <tbody>...</tbody>
</table>

<LiTable
  target="#myTable"
  sorting={true}
  filtering={true}
  pagination={true}
/>

Props

All LiTableOptions fields are accepted as props.

| Prop | Type | Description | |-------------|----------------|-------------| | className | string | CSS class on the container <div> | | style | CSSProperties| Inline styles on the container <div> |

Lifecycle

The component initialises LiTable once on mount and calls .update() on every render with the current props. The instance is destroyed when the component unmounts.

TypeScript

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

Full example

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

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 function ReportPage() {
  return (
    <LiTable
      ajax="https://api.example.com/reports?school=1811"
      serverSide={true}
      columns={columns}
      stickyHeader={[0, 1]}
      pagination={{ pageSize: 20, pageSizes: [10, 20, 50, 100] }}
      sorting={true}
      filtering={true}
      export={{ formats: ['csv', 'excel', 'pdf', 'image'], filename: 'report' }}
      editable={{
        type: 'full_row',
        url: '/api/crud',
        key: [0],
        hide: [3, 5],
        action: { add: true, edit: true, delete: true },
      }}
      theme={{
        striped: true,
        border: { borderWidth: 1, columnBorder: true, rowBorder: true, borderColor: 'gray' },
      }}
      onPageChange={(page, pageSize) => console.log(page, pageSize)}
      onSort={(col, dir) => console.log(col, dir)}
    />
  );
}

See @litable/core for the full options reference.

License

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