@litable/vue2

Vue 2.7 wrapper for @litable/core.

Install

npm install @litable/vue2 @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>
import LiTable from '@litable/vue2';

export default {
  components: { LiTable },
  data() {
    return {
      apiUrl: 'https://api.example.com/data?school=1811',
      columns: [
        { key: 0,  pinLeft:  true },
        { key: 1,  pinLeft:  true, render: (val) => `<b style="color:red;">${val}</b>` },
        { key: -1, pinRight: true },
        { key: -2, pinRight: true },
      ],
      theme: {
        striped: true,
        border: { borderWidth: 1, columnBorder: true, rowBorder: true, borderColor: 'gray' },
      },
    };
  },
  methods: {
    handlePage(page, pageSize) { console.log(page, pageSize); },
    handleSort(col, dir)       { console.log(col, dir); },
  },
};
</script>

Inline data

<template>
  <LiTable
    :data="rows"
    :columns="[{ key: 'name', header: 'Full Name', pinLeft: true }]"
    :pagination="{ pageSize: 10, pageSizes: [5, 10, 25, 'All'] }"
    :export="{ formats: ['csv', 'excel'], filename: 'users' }"
    :sorting="true"
    :filtering="true"
  />
</template>

<script>
import LiTable from '@litable/vue2';
export default {
  components: { LiTable },
  data() {
    return {
      rows: [
        { name: 'Alice', city: 'New York' },
        { name: 'Bob',   city: 'London'   },
      ],
    };
  },
};
</script>

Props

All LiTableOptions fields are accepted as props. A deep watch on props calls .update() on the underlying LiTable instance whenever any prop changes.

TypeScript

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

See @litable/core for the full options reference.

License

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