DATA TABLE

Tornado JS/Typescript Components Method to Activate or Create Tornado UI Components.

HOW TO USE

to create Data-Table you need to import DataTable or use it from the Global Object to do so then you can create data tables with Tornado.DataTable(selector, {..options..}) method see the code below.

//=====> Import DataTable Method <=====//
import DataTable from './Base/DataTable';

//=====> Data Table Usage <=====//
DataTable('.table-class', {.options.});

//=====> Global Usage <=====//
Tornado.DataTable('.table-class', {.options.});

<!-- Data Table -->
<div class="responsive-table">
    <!-- Table -->
    <table class="table striped data-table">
        <!-- Table Head -->
        <thead>
            <tr>
                <th>Name</th>
                ....
            </tr>
        </thead>
        <!-- Content -->
        <tbody>
            <!-- Row -->
            <tr>
                <td>Abdullah Ramadan</td>
                ....
            </tr>
            ....
        </tbody>
        <!-- // Content -->
    </table>
    <!-- // Table -->
</div>
<!-- // Data Table -->

CONTROLS OPTIONS

Tornado Data Table Controls Enable / Disable Options like pagination, search, sorting etc

DataTable('.data-table', {
    //===> Controls Options <===//
    perPage  : 10,    //====> Entries Per Page [integer]
    search   : true,  //====> Enable Search
    sortable : true,  //====> Enable Sorting
});

DATA OPTIONS

Tornado Data Table [data] Creation from a Source file and data manipulation options that you can use to manipulate the data in your table.

DataTable('.data-table', {
    //===> Data Options <===//
    data : {
        source   : 'file.csv',  //====> Data Source URL [csv, json]
        labels   : ['Name'...], //====> Table Head Items [array of strings]
        editable : true,        //====> Enable Data Edit
        onEdit   : function,    //====> Edited Column Callback
    },
});