@litable/angular

Angular 17+ wrapper for @litable/core.

Install

npm install @litable/angular @litable/core

Setup

Standalone component (Angular 17+)

import { LiTableComponent } from '@litable/angular';

@Component({
  standalone: true,
  imports: [LiTableComponent],
  template: `
    <lib-litable
      [ajax]="apiUrl"
      [serverSide]="true"
      [columns]="columns"
      [stickyHeader]="[0, 1]"
      [pagination]="{ pageSize: 20 }"
      [sorting]="true"
      [filtering]="true"
      [theme]="theme"
    />
  `,
})
export class ReportPage {
  apiUrl = 'https://api.example.com/data?school=1811';
  columns = [
    { key: 0,  pinLeft:  true },
    { key: 1,  pinLeft:  true, render: (val: unknown) => `<b>${val}</b>` },
    { key: -1, pinRight: true },
  ];
  theme = { striped: true, border: { borderWidth: 1, borderColor: '#cccccc' } };
}

NgModule (Angular 14–16)

import { LiTableModule } from '@litable/angular';

@NgModule({ imports: [LiTableModule] })
export class AppModule {}

Inputs

Every LiTableOptions field maps to an @Input():

<lib-litable
  [data]="rows"
  [columns]="columns"
  [pagination]="{ pageSize: 20, pageSizes: [10, 20, 50, 100] }"
  [sorting]="true"
  [filtering]="true"
  [stickyHeader]="[0]"
  [virtualScrolling]="{ height: '400px' }"
  [export]="{ formats: ['csv', 'excel', 'pdf', 'image'], filename: 'export' }"
  [editable]="editableConfig"
  [theme]="{ striped: true }"
  (onSort)="handleSort($event)"
  (onPageChange)="handlePage($event)"
/>

Full example

import { Component } from '@angular/core';
import { LiTableComponent } from '@litable/angular';
import type { ColumnDef, EditableOptions, ThemeOptions } from '@litable/angular';

@Component({
  standalone: true,
  imports: [LiTableComponent],
  template: `<lib-litable [ajax]="url" [serverSide]="true" [columns]="cols"
    [stickyHeader]="sticky" [pagination]="paging" [sorting]="true"
    [filtering]="true" [export]="exp" [editable]="crud" [theme]="thm" />`,
})
export class ReportPage {
  url    = 'https://api.example.com/reports?school=1811';
  sticky = [0, 1];
  cols: 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 },
  ];
  paging = { pageSize: 20, pageSizes: [10, 20, 50, 100] };
  exp    = { formats: ['csv', 'excel', 'pdf', 'image'] as const, filename: 'report' };
  crud: EditableOptions = {
    type: 'full_row', url: '/api/crud', key: [0], hide: [3, 5],
    action: { add: true, edit: true, delete: true },
  };
  thm: ThemeOptions = {
    striped: true,
    border: { borderWidth: 1, columnBorder: true, rowBorder: true, borderColor: 'gray' },
  };
}

TypeScript

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

See @litable/core for the full options reference.

License

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