@litable/vue3

Vue 3 wrapper for @litable/core.

Install

npm install @litable/vue3 @litable/core

Usage

<template>
  <LiTable
    :ajax="apiUrl"
    :server-side="true"
    :columns="columns"
    :sticky-header="[0, 1]"
    :pagination="{ pageSize: 20 }"
    :sorting="true"
    :filtering="true"
    :theme="theme"
    @page-change="handlePage"
    @sort="handleSort"
  />
</template>

<script setup lang="ts">
import LiTable from '@litable/vue3';
import type { ColumnDef, ThemeOptions } from '@litable/vue3';

const apiUrl = 'https://api.example.com/data?school=1811';

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

const theme: ThemeOptions = {
  striped: true,
  border: { borderWidth: 1, columnBorder: true, rowBorder: true, borderColor: 'gray' },
};

const handlePage = (page: number, pageSize: number) => console.log(page, pageSize);
const handleSort = (col: string, dir: 'asc' | 'desc') => console.log(col, dir);
</script>

Inline data

<template>
  <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
    filtering
  />
</template>

Props

All LiTableOptions fields are accepted as props via defineProps<LiTableOptions>(). A deep watch on props triggers .update() on change.

Full example

<template>
  <LiTable
    :ajax="url"
    :server-side="true"
    :columns="cols"
    :sticky-header="[0, 1]"
    :pagination="{ pageSize: 20, pageSizes: [10, 20, 50, 100] }"
    :virtual-scrolling="{ height: '400px' }"
    :export="{ formats: ['csv', 'excel', 'pdf', 'image'], filename: 'report' }"
    :editable="crud"
    :theme="{ striped: true, border: { borderWidth: 1, borderColor: '#cccccc' } }"
    sorting
    filtering
  />
</template>

<script setup lang="ts">
import LiTable from '@litable/vue3';
import type { ColumnDef, EditableOptions } from '@litable/vue3';

const url = 'https://api.example.com/reports?school=1811';

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

const crud: EditableOptions = {
  type: 'full_row',
  url:  '/api/crud',
  key:  [0],
  hide: [3, 5],
  action: { add: true, edit: true, delete: true },
};
</script>

TypeScript

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

See @litable/core for the full options reference.

License

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