adiprimadharma / ta-table

Table for NPM Package. A Responsive and customable table for jQuery

jQuery TA TABLE

A Responsive and customable table for jQuery.

Installation

npm

Install the JQuery and ta-table packages. It's recommended to require/import the plugin as part of an existing webpack or browserify setup:

npm install jquery ta-table --save

// import
const $ = require('jquery');
require('ta-table');

// construct template
    const checkBox = '<input type="checkbox" class="checklist" id="checkBox-16831344" data-index="0" data-id="16831344"><label for="checkBox-16831344" class="checklist-label"></label>';
    const statBtn = '<i class="ta-icon ta-icon-circle active-stat mr-10"></i><span>Aktif</span><i class="ta-icon ta-icon-tooltip info-not-show tooltip-action-trigger hide" data-type="product" data-id="16831344"></i>';
    const dataset = [
        ['<input type="checkbox" class="checklist" id="checkBox-16831345" data-index="0" data-id="16831345"><label for="checkBox-16831345" class="checklist-label"></label>',statBtn,'datacol3-row1','datacol4-row1','datacol5-row1','datacol6-row1','datacol7-row1','datacol8-row1', 'datacol9-row1', 'datacol10-row1', 'datacol11-row1'],
        ['<input type="checkbox" class="checklist" id="checkBox-16831346" data-index="0" data-id="16831346"><label for="checkBox-16831346" class="checklist-label"></label>',statBtn,'datacol3-row2','datacol4-row2','datacol5-row2','datacol6-row2','datacol7-row2','datacol8-row2', 'datacol9-row2', 'datacol10-row2', 'datacol11-row2'],
        ['<input type="checkbox" class="checklist" id="checkBox-16831347" data-index="0" data-id="16831347"><label for="checkBox-16831347" class="checklist-label"></label>',statBtn,'datacol3-row3','datacol4-row3','datacol5-row3','datacol6-row3','datacol7-row3','datacol8-row3', 'datacol9-row3', 'datacol10-row3', 'datacol11-row3'],
    ];

// init
    $('#table-dashboard').tatable({
        fixedColumns: 2,
        data: dataset,
        columns: [
            {title: checkBox, className: 'checklist', colIndex: 0, fixedWidth: true},
            {title: 'Title kolom-7', className: 'Table1classNameCol7', colIndex: 6, sort: true, tooltip: true, dataTooltip: 'test Tooltip column 7'},
            {title: 'Title Kolom-3', className: 'Table1classNameCol3', colIndex: 2, sort: true, tooltip: true, dataTooltip: 'test Tooltip column 3'},
            {title: 'Title Kolom-4 <div style="color: rgba(0,0,0,.38)">asdbaskbdasjdbas</div>', className: 'Table1classNameCol4', colIndex: 3, sort: true, tooltip: false},
            {title: 'Title Kolom-2', className: 'status', colIndex: 1, sort: true, tooltip: true, fixedWidth: false, dataTooltip: 'test Tooltip column 5'},
            {title: 'Title Kolom-8', className: 'Table1classNameCol8', colIndex: 7, sort: true, tooltip: true, dataTooltip: 'test Tooltip column 8'},
            {title: 'Title Kolom-5', className: 'Table1classNameCol5', colIndex: 4, sort: true, tooltip: true, dataTooltip: 'test Tooltip column 5'},
            {title: 'Title Kolom-6', className: 'Table1classNameCol6', colIndex: 5, sort: true, tooltip: true, dataTooltip: 'test Tooltip column 6'},
            {title: 'Title Kolom-9', className: 'Table1classNameCol9', colIndex: 8, sort: true, tooltip: true, dataTooltip: 'test Tooltip column 9'},
            {title: 'Title Kolom-10', className: 'Table1classNameCol10', colIndex: 9, sort: true, tooltip: true, dataTooltip: 'test Tooltip column 10'},
            {title: 'Title Kolom-11', className: 'Table1classNameCol11', colIndex: 10, sort: true, tooltip: true, dataTooltip: 'test Tooltip column 11'},
        ]
    })

TA Table relies on jQuery as a peerDependency so ensure it is installed in your application.

Manual

Clone the UMD version tatable.js in ./build folder. a UMD version of the plugin in ./build that can be dropped into a project however you want.

<script src="http://code.jquery.com/jquery-latest.js"></script>
<script src="tatable.js"></script>

Options

** --COMING SOON -- **