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 -- **
