@vnkr-labs/table

VNKR Design System — Data table: sortable, filterable, paginated, CSV export. Zero dependencies.

Installation

npm install @vnkr-labs/table

Usage

<!-- Load tokens first -->
<link rel="stylesheet" href="node_modules/@vnkr-labs/tokens/index.css">

<table id="my-table"></table>

import { Table } from '@vnkr-labs/table';

const tbl = Table('#my-table', {
  data: [
    { id: 1, name: 'Alice', role: 'Admin', status: 'active' },
    { id: 2, name: 'Bob',   role: 'Editor', status: 'inactive' },
  ],
  columns: [
    { key: 'id',     label: 'ID',     sortable: true },
    { key: 'name',   label: 'Tên',    sortable: true },
    { key: 'role',   label: 'Vai trò' },
    { key: 'status', label: 'Trạng thái', render: v => `<span class="badge-${v}">${v}</span>` },
  ],
  pageSize: 20,
  searchable: true,
});

API

tbl.setData([...]);      // Cập nhật dữ liệu
tbl.search('query');     // Tìm kiếm
tbl.exportCSV('export'); // Xuất file CSV
tbl.destroy();           // Xoá listeners và DOM

Options

| Option | Type | Default | Mô tả | |---|---|---|---| | data | object[] | [] | Mảng dữ liệu | | columns | Column[] | [] | Cấu hình cột | | pageSize | number | 20 | Số dòng mỗi trang | | searchable | boolean | false | Hiện thanh tìm kiếm | | striped | boolean | true | Màu xen kẽ hàng | | bordered | boolean | false | Viền bảng | | hover | boolean | true | Highlight hover | | onRowClick | Function | — | Callback khi click hàng |

Column Config

interface Column {
  key: string;
  label: string;
  sortable?: boolean;
  render?: (value: any, row: object) => string;
  width?: string;
  align?: 'left' | 'center' | 'right';
}

License

MIT · VNKR Labs