SmartTables.js

// Import the SmartTables class
import { SmartTables } from './pathTo/smartTables.bundle.js';

// Initialize with empty options object (required)
const myTable = new SmartTables('tableId', {});

// Or with custom options
const myTable = new SmartTables('tableId', {
    perPage: 15,
    search: true,
    sort: true,
    pagination: true,
    export: true
});

// Install via npm
npm install smarttables

// Import in your JavaScript/TypeScript file
import { SmartTables } from 'smarttables';

// Use in your component
const myTable = new SmartTables('tableId', {
    data: {
        type: 'json',
        source: myData,
        columns: [
            { data: 'id', title: 'ID' },
            { data: 'name', title: 'Name' },
            { data: 'position', title: 'Position' }
        ]
    }
});

import { SmartTables, SmartTablesOptions } from 'smarttables';

interface CustomOptions extends SmartTablesOptions {
    customFeature?: boolean;
}

const options: CustomOptions = {
    perPage: 10,
    search: true,
    customFeature: true
};

const myTable = new SmartTables('tableId', options);

<table id="myTable" class="table">
    <thead>
        <tr>
            <th data-priority="1">ID</th>
            <th data-priority="2">Name</th>
            <th data-priority="3">Position</th>
            <th data-priority="4">Office</th>
            <th data-priority="5">Age</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>1</td>
            <td>John Doe</td>
            <td>Developer</td>
            <td>New York</td>
            <td>32</td>
        </tr>
        <!-- More rows... -->
    </tbody>
</table>

// Basic configuration
const table = new SmartTables('myTable', {
    perPage: 10,
    search: true,
    sort: true
});

// Advanced configuration with TypeScript
interface CustomOptions extends SmartTablesOptions {
    customFeature?: boolean;
}

const options: CustomOptions = {
    perPage: 25,
    search: true,
    sort: true,
    pagination: true,
    export: true,
    loading: {
        enabled: true,
        duration: 500,
        minDuration: 300
    },
    responsive: {
        enabled: true,
        breakpoint: 992,
        columnPriorities: {
            0: 1,  // ID column - highest priority
            1: 2,  // Name column - second highest priority
            2: 3,  // Position
            3: 4,  // Office
            4: 5   // Age - lowest priority
        }
    },
    debug: false,
    fuzzyMatch: {
        threshold: 0.6,
        minMatchLength: 2,
        multiWordThreshold: 0.5,
        maxDistance: 3
    },
    customFeature: true
};

const table = new SmartTables('myTable', options);

var myTable = new SmartTables('tableId', {
    perPage: 25,
    search: true,
    sort: true,
    pagination: true,
    export: true,
    loading: {
        enabled: true,
        duration: 500, // Show loading for at least 500ms
        minDuration: 300
    },
    responsive: {
        enabled: true,
        breakpoint: 992,
        columnPriorities: {
            0: 1,  // ID column - highest priority
            1: 2,  // Name column - second highest priority
            2: 3,  // Position
            3: 4,  // Office
            4: 5   // Age - lowest priority
        }
    },
    debug: false,
    fuzzyMatch: {
        threshold: 0.6,      // Lower threshold = more matches
        minMatchLength: 2,   // Minimum characters to match
        multiWordThreshold: 0.5,
        maxDistance: 3       // Higher distance = more tolerance for typos
    }
});

// Load from JSON data
var myTable = new SmartTables('tableId', {
    data: {
        type: 'json',
        source: [
            { id: 1, name: 'John Doe', position: 'Developer', office: 'New York', age: 32 },
            { id: 2, name: 'Jane Smith', position: 'Designer', office: 'London', age: 28 }
        ],
        columns: [
            { data: 'id', title: 'ID' },
            { data: 'name', title: 'Name' },
            { data: 'position', title: 'Position' },
            { data: 'office', title: 'Office' },
            { data: 'age', title: 'Age' }
        ]
    }
});

// Load from AJAX
var myTable = new SmartTables('tableId', {
    data: {
        type: 'ajax',
        source: 'api/users',
        method: 'GET',
        headers: { 'Authorization': 'Bearer token123' },
        params: { limit: 100 }
    }
});

// Load from CSV
var myTable = new SmartTables('tableId', {
    data: {
        type: 'csv',
        source: 'data/employees.csv'
    }
});

// Initialize table with import enabled
var myTable = new SmartTables('tableId', {
    import: true,  // Enable import functionality
    data: {
        type: 'json',
        source: initialData,
        columns: [
            { data: 'id', title: 'ID' },
            { data: 'name', title: 'Name' },
            { data: 'position', title: 'Position' }
        ]
    }
});

var myTable = new SmartTables('tableId', {
    import: {
        enabled: true,
        formats: ['csv', 'json', 'xlsx'],  // Specify allowed formats
        maxFileSize: 5 * 1024 * 1024,      // 5MB max file size
        onImportStart: function() {
            console.log('Import started');
        },
        onImportComplete: function(data) {
            console.log('Import completed', data);
        },
        onImportError: function(error) {
            console.error('Import failed', error);
        }
    }
});

<!-- HTML Structure -->
<table id="myTable" class="table">
    <thead>
        <tr>
            <th data-priority="1">ID</th>
            <th data-priority="2">Name</th>
            <th data-priority="3">Position</th>
        </tr>
    </thead>
    <tbody>
        <!-- Data will be populated by SmartTables -->
    </tbody>
</table>

<!-- JavaScript -->
import { SmartTables } from 'smarttables';

const table = new SmartTables('myTable', {
    import: true,
    data: {
        type: 'json',
        source: [],  // Start with empty data
        columns: [
            { data: 'id', title: 'ID' },
            { data: 'name', title: 'Name' },
            { data: 'position', title: 'Position' }
        ]
    }
});

var myTable = new SmartTables('tableId', {
    hooks: {
        // Table lifecycle hooks
        beforeInit: function(instance) {
            console.log('Before table initialization');
        },
        afterInit: function(instance) {
            console.log('Table initialized!');
        },
        
        // Data hooks
        beforeDataLoad: function(data, instance) {
            console.log('About to load data');
        },
        afterDataLoad: function(data, instance) {
            console.log('Data loaded successfully');
        },
        
        // Action hooks
        onSort: function(column, direction, instance) {
            console.log('Table sorted by column', column, 'in', direction, 'direction');
        },
        onFilter: function(searchTerm, filteredRows, instance) {
            console.log('Table filtered with term:', searchTerm);
        },
        onPaginate: function(pageNumber, instance) {
            console.log('Page changed to', pageNumber);
        }
    }
});

<!-- Set column priorities with data attributes -->
<th data-priority="1">ID</th> <!-- Highest priority (last to hide) -->
<th data-priority="2">Name</th>
<th data-priority="3">Position</th>
<th data-priority="4">Office</th>
<th data-priority="5">Age</th> <!-- Lowest priority (first to hide) -->

<!-- Force columns to always remain visible -->
<th class="always-visible">Actions</th>

// Get table instance
var table = document.getElementById('myTable').__smartTable;

// Export to different formats
table.exportData('excel');
table.exportData('csv');
table.exportData('copy');

// Get table instance
var table = document.getElementById('myTable').__smartTable;

// Redraw the table
table.draw();

// Sort by column
table.sortBy(2, 'asc'); // Sort by 3rd column ascending

// Filter the table
table.handleSearch('developer');

// Export data
table.exportData('excel');

// Hide/show columns
table.hideColumn(3);
table.showColumn(3);

// Clear AJAX cache for server-side tables
table.clearAjaxCache();

// Manually trigger prefetch of next page
table.prefetchNextPage();

// Generate a unique cache key for current parameters
const cacheKey = table.generateCacheKey();

// Destroy the instance
table.destroy();

// Define a plugin
var myPlugin = {
    name: 'myPlugin',
    init: function() {
        console.log('Plugin initialized for table:', this.instance.table.id);
    },
    afterDraw: function() {
        console.log('Table was redrawn');
    }
};

// Initialize table with the plugin
var myTable = new SmartTables('tableId', {
    plugins: [myPlugin]
});

import { SmartTables } from 'smarttables';
const serverTable = new SmartTables('serverTable', {
    data: {
        type: 'ajax',
        source: '/api/employees',
        serverSide: true,
        method: 'GET',
        prefetch: true,
        cacheDuration: 300000, // 5 minutes cache duration
        columns: [
            { data: 'id', title: 'ID' },
            { data: 'name', title: 'Name' },
            { data: 'department', title: 'Department' },
            { data: 'age', title: 'Age' },
            { data: 'salary', title: 'Salary' },
            { data: 'bonus', title: 'Bonus' }
        ]
    }
});

{
    "data": [
        { "id": 1, "name": "John Doe", "department": "Finance", "age": 32, "salary": 85000, "bonus": 5000 },
        { "id": 2, "name": "Jane Smith", "department": "HR", "age": 28, "salary": 65000, "bonus": 3000 }
        // ... more records
    ],
    "total": 1000 // Total records after filtering
}

const serverTable = new SmartTables('serverTable', {
    data: {
        type: 'ajax',
        source: '/api/employees',
        serverSide: true,
        prefetch: true,
        cacheDuration: 600000, // 10 minutes
        withCredentials: true,
        headers: { 'X-API-Key': 'your-api-key' }
    },
    debug: true // Log cache operations
});

const table = new SmartTables('myTable', {
    data: {
        serverSide: true,
        source: '/api/employees',
        method: 'GET'
    },
    hooks: {
        afterDataLoad: function(response) {
            console.log('Total records:', response.total);
        }
    }
});

// Import the SmartTables module
import { SmartTables } from './pathTo/smartTables.bundle.js';

document.addEventListener('DOMContentLoaded', () => {
    // Initialize SmartTables with data management options
    const clientTable = new SmartTables('clientTable', {
        // Data configuration
        data: {
            type: 'json',
            source: sampleData,  // Your data array
            idField: 'id',       // Field that uniquely identifies each record
            columns: [
                { data: 'id', title: 'ID', editable: false },
                { data: 'name', title: 'Name', required: true },
                { data: 'email', title: 'Email', type: 'email', required: true },
                { data: 'phone', title: 'Phone', type: 'tel' },
                { data: 'active', title: 'Active', type: 'boolean' },
                { 
                    data: 'actions',
                    title: 'Actions',
                    sortable: false,
                    editable: false,
                    render: (data, row) => 
                        '<button type="button" class="btn btn-primary btn-xs edit-btn" data-id="' + row.id + '">Edit</button> ' + 
                        '<button type="button" class="btn btn-danger btn-xs delete-btn" data-id="' + row.id + '">Del</button>'
                }
            ]
        },
        // Enable record management features
        addRecord: true,  // Shows an Add Record button
        // Other options...
    });

    // Handle edit and delete button clicks with event delegation
    clientTable.table.addEventListener('click', e => {
        if (e.target.classList.contains('edit-btn')) {
            const rowId = e.target.getAttribute('data-id');
            clientTable.edit(rowId);
        } else if (e.target.classList.contains('delete-btn')) {
            const rowId = e.target.getAttribute('data-id');
            clientTable.delete(rowId);
        }
    });
});

const table = new SmartTables('myTable', {
    // ... other options
    hooks: {
        // Edit operation hooks
        beforeEdit(rowId) {
            // Called before edit mode is entered
            console.log('Editing row: ' + rowId);
            return true; // Return false to prevent editing
        },
        afterEdit(rowId, rowData, success) {
            // Called after edit is completed
            console.log('Edit completed: ' + success);
        },
        onEditModalCreated(modalHTML, rowId, rowData) {
            // Customize the edit modal HTML
            return modalHTML;
        },
        onEditModalBeforeShow(modalElement, rowId, rowData) {
            // Access the modal DOM before it's shown
        },
        onEditDataCollected(updatedData, rowId, originalData) {
            // Process and validate form data
            return updatedData;
        },
        onEditSuccess(rowId, updatedRecord, submittedData) {
            // Handle successful update
            console.log('Record updated successfully');
        },
        onEditError(rowId, error, attemptedData) {
            // Handle update errors
            console.error('Update failed', error);
        },

        // Delete operation hooks
        beforeDelete(rowId) {
            // Called before deletion
            return confirm('Are you sure you want to delete this record?');
        },
        afterDelete(rowId, data, success) {
            // Called after deletion attempt
            if (success) console.log('Deletion successful');
        },
        onDeleteModalCreated(modalHtml, rowId) {
            // Customize deletion confirmation modal
            return modalHtml;
        },
        onDeleteSuccess(rowId, deletedRecord) {
            // Handle successful deletion
        },

        // Add record operation hooks
        beforeAddRecord(initialData, options) {
            // Called before add form is shown
            return initialData; // Return modified initial data
        },
        afterAddRecord(newRecordData, success) {
            // Called after add operation completes
            if (success) console.log('Record added');
        },
        onAddModalCreated(modalHTML, initialData, options) {
            // Customize add record modal
            return modalHTML;
        },
        onAddModalBeforeShow(modalElement, initialData, options) {
            // DOM access before modal shows
        },
        onAddDataCollected(newRecordData, options) {
            // Process and validate new record data
            return newRecordData;
        },
        onAddRecordSuccess(newRecord) {
            // Handle successful addition
        },
        onAddRecordError(error, attemptedData) {
            // Handle addition errors
        },
        onAddCancelled(options) {
            // Called when add is cancelled
        }
    }
});

// Column configuration examples for different types
columns: [
    { 
        data: 'salary', 
        title: 'Salary', 
        type: 'number',     // Numeric input
        min: 0,             // Minimum value
        step: 500,          // Increment by 500
        render: data => '$' + data.toLocaleString() // Format with $ and commas
    },
    { 
        data: 'department', 
        title: 'Department', 
        type: 'select',     // Dropdown select input
        options: [          // Available options
            'Engineering',
            'Sales',
            'Marketing',
            'Human Resources'
        ]
    },
    { 
        data: 'joinDate', 
        title: 'Join Date',  
        type: 'date',       // Date input
        render: data => new Date(data).toLocaleDateString() // Format date
    },
    { 
        data: 'active', 
        title: 'Active', 
        type: 'boolean',    // Boolean/checkbox
        render: data => data ? 
            '<span class="badge bg-success">Yes</span>' : 
            '<span class="badge bg-danger">No</span>'
    }
]

// Track row states
const rowStates = {
    editing: null,     // ID of the row being edited
    saved: new Set(),  // Set of recently saved row IDs
    adding: false      // Flag for adding operation
};

// Apply classes in hooks
hooks: {
    beforeEdit(rowId) {
        rowStates.editing = rowId;
        const rowElement = this.table.querySelector('tbody tr[data-id="' + rowId + '"]');
        if (rowElement) {
            rowElement.classList.add('editing');
        }
        return true;
    },
    
    afterEdit(rowId, rowData, success) {
        rowStates.editing = null;
        if (success) {
            rowStates.saved.add(rowId);
            setTimeout(() => {
                rowStates.saved.delete(rowId);
                const row = this.table.querySelector('tbody tr[data-id="' + rowId + '"]');
                if (row) row.classList.remove('saved');
            }, 3000);
        }
        this.draw();
    }
}