TablixJS Integration Options Demo

Demo Status: This page demonstrates different ways to load and use TablixJS with and without jQuery.

Option 1: Vanilla TablixJS (Core Library Only)

This uses only the core TablixJS library without any wrappers.

<script src="path/to/tablixjs.umd.min.js"></script>
<script>
    const table = new TablixJS.Table(document.getElementById('table1'), {
        data: data,
        sortable: true
    });
</script>
        

Name	Age	City

Option 2: jQuery Bundled Version

This uses the bundled version that includes both TablixJS and jQuery wrapper.

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="path/to/tablix.jquery.min.js"></script>
<script>
    $('#table2').tablixjs({
        data: data,
        sortable: true
    });
</script>
        

Name	Age	City

Option 3: jQuery Standalone Plugin

This loads TablixJS core and jQuery plugin separately for maximum flexibility.

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="path/to/tablixjs.umd.min.js"></script>
<script src="path/to/tablix-jquery-plugin.min.js"></script>
<script>
    $('#table3').tablixjs({
        data: data,
        sortable: true
    });
</script>
        

Name	Age	City

Option 4: Progressive Enhancement

This demonstrates loading jQuery support dynamically when available.

<script>
    // Start with vanilla TablixJS
    const table = new TablixJS.Table(element, options);
    
    // Add jQuery support if available
    if (typeof $ !== 'undefined') {
        // Enhanced with jQuery features
    }
</script>
        

Name	Age	City

Summary

This demo shows four different approaches to using TablixJS:

Vanilla: Core library only, minimal footprint
jQuery Bundled: Everything in one file, easy setup
jQuery Plugin: Modular approach, maximum flexibility
Progressive Enhancement: Start simple, enhance as needed

All approaches work together and maintain TablixJS's core principle of zero forced dependencies.