vikcraft-datatable

A feature-rich interactive data table library for the browser — zero framework dependencies.

Features

• Virtual scrolling for large datasets (100 000+ rows)
• Column and row freezing
• Multi-column sorting & debounced search
• Inline cell editing
• Column resizing & reordering
• Row selection (single / multi)
• CSV export, clipboard copy, print
• Pagination with configurable page sizes
• 6 built-in themes (dark, light, blue, green, ocean, carbon)
• Row numbers, fullscreen mode, status bar
• Keyboard navigation
• Column groups / spanning headers

Install

npm install vikcraft-datatable

Quick Start

Via <script> tag (browser)

<link rel="stylesheet" href="node_modules/vikcraft-datatable/vikcraft-data-table.css">
<script src="node_modules/vikcraft-datatable/vikcraft-data-table.js"></script>

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

<script>
  const table = new VikCraftDataTable('#my-table', {
    data: [
      { id: 1, name: 'Alice', role: 'Engineer' },
      { id: 2, name: 'Bob',   role: 'Designer' },
    ],
    columns: [
      { key: 'id',   label: 'ID',   type: 'number', width: 60 },
      { key: 'name', label: 'Name', type: 'string', sortable: true, filterable: true },
      { key: 'role', label: 'Role', type: 'string', sortable: true },
    ],
    pageSize: 25,
    theme: 'dark',
  });
</script>

Via bundler (Vite / Webpack)

import VikCraftDataTable from 'vikcraft-datatable';
import 'vikcraft-datatable/vikcraft-data-table.css';

const table = new VikCraftDataTable('#my-table', { data, columns });

Configuration Options

| Option | Type | Default | Description | |--------|------|---------|-------------| | data | Array | [] | Row data array | | columns | Array | [] | Column definitions | | pageSize | number | 25 | Rows per page | | theme | string | 'dark' | dark / light / blue / green / ocean / carbon | | editable | boolean | false | Enable inline editing | | selectable | boolean | false | Enable row selection | | showRowNumbers | boolean | false | Show row index column | | virtualScroll | boolean | false | Enable virtual scrolling for large datasets | | frozenColumns | number | 0 | Number of columns to freeze from the left | | frozenRows | number | 0 | Number of rows to freeze from the top |

Column Definition

{
  key:        'price',      // data property name
  label:      'Price',      // header label
  type:       'number',     // 'string' | 'number' | 'date' | 'boolean'
  width:      120,          // px
  sortable:   true,
  filterable: true,
  editable:   true,
  frozen:     true,         // freeze this column
  render:     (val, row) => `$${val.toFixed(2)}`,  // custom cell renderer
}

API

table.setData(newData)          // Replace all rows
table.setTheme('ocean')         // Switch theme at runtime
table.exportCSV()               // Download CSV
table.copyToClipboard()         // Copy visible data to clipboard
table.clearSelection()          // Deselect all rows
table.getSelectedRows()         // → Array of selected row objects
table.destroy()                 // Remove from DOM

CDN

<link  rel="stylesheet" href="https://unpkg.com/vikcraft-datatable/vikcraft-data-table.css">
<script src="https://unpkg.com/vikcraft-datatable/vikcraft-data-table.js"></script>

License

MIT © VikCraft Pro