VikCraft Interactive Data Table v3.0

1. Include the Library Files

<!-- Required for Excel Export -->
<script src="https://cdn.sheetjs.com/xlsx-0.20.2/package/dist/xlsx.full.min.js"></script>

<!-- VikCraft DataTable -->
<link rel="stylesheet" href="vikcraft-data-table.css">
<script src="vikcraft-data-table.js"></script>

2. Initialize with All Features

const table = new VikCraftDataTable('#my-table', {
    data: myData,
    theme: 'dark',
    columns: [
        { key: 'id', label: 'ID', sortable: true, filterable: true, type: 'number' },
        { key: 'name', label: 'Name', sortable: true, filterable: true, editable: true },
        // ...
    ],

    // v3.0 Features
    freezeColumns: 2,           // Freeze first 2 data columns
    enableThemeSwitcher: true,   // Theme dropdown in toolbar
    enableRowNumbers: true,      // Show row numbers
    enableFullscreen: true,      // Fullscreen button
    enableCopyClipboard: true,   // Copy button
    enablePrint: true,           // Print button
    enableCsvExport: true,       // CSV export button
    enableStatusBar: true,       // Sum/Avg/Min/Max footer
    enableKeyboardNav: true,     // Arrow key navigation
    searchDebounceMs: 300,       // Debounce search input

    // Existing features
    enableCheckboxes: true,
    enableSearch: true,
    enableColumnFilter: true,
    enablePagination: true,
    enableGrouping: true,
    enableEditing: true,
    enableExcelExport: true,
    enableColumnVisibility: true,
});

Each column definition supports these properties:

Column Freezing

Set freezeColumns: 2 to freeze the first 2 data columns. Checkbox and row number columns are automatically frozen when present.

new VikCraftDataTable('#table', {
    freezeColumns: 2,  // ID and Name columns stay fixed
    enableCheckboxes: true,  // Checkbox also stays fixed
    enableRowNumbers: true,  // Row # also stays fixed
    // ...
});

Theme Switcher

Enable enableThemeSwitcher: true to show a dropdown in the toolbar. Users can switch between Light, Dark, Midnight, Blue, Green, and Compact themes in real-time.

Smart Pagination

Pagination now shows actual page numbers (1, 2, 3 ... 10) with ellipsis for large page counts, instead of just previous/next buttons.

Debounced Search

Configure searchDebounceMs: 300 to add a 300ms debounce on the search input. This prevents excessive re-renders while the user is still typing, which is critical for large datasets.

Status Bar

Enable enableStatusBar: true to show a footer bar with Sum, Average, Min, and Max for all number-type columns, plus total row count.

Keyboard Navigation

Enable enableKeyboardNav: true and click the table to focus it. Then use Arrow keys to move between cells, and Enter to start editing an editable cell.

Copy, Print, CSV Export

Three new toolbar buttons for quick data export: Copy to Clipboard (tab-separated), Print (opens print-friendly window), and CSV Export (downloads .csv file).

AI Data Assistant

Enable enableAI: true to add an AI chat panel. Users can ask questions about their data and get instant analysis powered by Claude.

Two ways to configure the API key:

• Frontend key: Set aiConfig.apiKey in config, or let users enter it via the settings gear icon. The key is stored in localStorage.
• Backend proxy: Set aiConfig.backendUrl: '/api/ai-query' to route all AI requests through your server. This keeps your API key secure on the server side.

// Frontend API key mode
enableAI: true,
aiConfig: {
    apiKey: 'sk-ant-...',  // Or let user set via UI
    model: 'claude-sonnet-4-20250514',
}

// Backend proxy mode (recommended for production)
enableAI: true,
aiConfig: {
    backendUrl: '/api/ai-query',
    backendHeaders: { 'Authorization': 'Bearer mytoken' },
}

The backend should accept a POST with { messages, system, model, max_tokens, tableContext } and return { content: "response text" }.

When serverSide: true, the table fetches data from the ajax endpoint. A loading spinner is shown during requests.

Expected JSON Response

{
  "data": [{ "id": 1, "name": "Alice", ... }],
  "recordsTotal": 100,
  "recordsFiltered": 25,
  "isGrouped": false
}

Built-in Themes (6 total)

• 'default' — Clean light theme
• 'dark' — Dark gray theme
• 'midnight' — Deep navy blue theme (NEW)
• 'blue' — Light blue accents (NEW)
• 'green' — Light green accents (NEW)
• 'narrow' — Compact padding for dense data

Use setTheme('midnight') or the theme switcher dropdown to change themes at runtime.

Custom Row Styling

onRowCreate: function(rowData, tr) {
    if (rowData.salary === null) {
        tr.classList.add('row-inactive');
    }
}

Core Methods

• setTheme(name) — Change theme ('default', 'dark', 'midnight', 'blue', 'green', 'narrow')
• reloadData(newFilters) — Reload table data
• addRow(object) — Add a row (client-side only)
• toggleFullscreen() — Toggle fullscreen mode
• exportToExcel() — Trigger Excel export
• exportToCsv() — Trigger CSV export
• copyToClipboard() — Copy data to clipboard
• printTable() — Open print view

Grouping

• setGroupBy(keys) — Set grouping (string or array)
• addGroupKey(key) — Add to grouping stack
• removeGroupKey(key) — Remove from grouping

Selection

• getSelectedRows() — Get array of selected row data
• clearColumnFilter(key) — Clear a column filter

AI

• openAIPanel() — Open the AI chat panel
• closeAIPanel() — Close the AI chat panel
• setAIApiKey(key) — Set the API key programmatically (e.g. from your backend)