@tooj24/datatable.js

Datatable

Datatable.js

Contents

• Install
• USage

Install

npm install @tooj24/datatable.js

Usage

ES6 syntax

import datatable from '@tooj24/datatable.js'

Browser

import CSS file

<link rel="stylesheet" href="dist/css/datatable.min.css" />

import JS file

<script src="dist/js/datatable.min.js"></script>

Client side with html content

<table id="table">
  <thead>
    <tr>
      <th>ID</th>
      <th>Fullname</th>
      <th>Active</th>
      <th>Email</th>
      <th>Company</th>
    </tr>
  </thead>
  <tbody>
    ...
  </tbody>
</table>

<script>
  datatable(document.getElementById('table'), {
    pagination: 'simple',
    pageSize: [5, 10, 25],
    sortable: [0, 1, 2],
  })
</script>

Client side with json data

<div id="table"></div>

<script>
  datatable(document.getElementById('table'), {
    pagination: 'numbers',
    pageSize: [10, 25],
    sortable: [0, 1, 2, 3, 4],
    cells: [
      { label: 'ID'},
      { label: 'Fullname', key: 'name' },
      { label: 'Active', key: 'isActive' },
      { label: 'Email' },
      { label: 'Company' },
    ],
    data: [
      {
        id: 1,
        isActive: true,
        balance: '$2,378.76',
        name: 'Frankie Salazar',
        company: 'REVERSUS',
        email: '[e-mail]',
        phone: '[phone]',
      },
      ...
    ]
  })
</script>

Server side

The response

<div id="table"></div>

<script>
  datatable(document.getElementById('table'), {
    pagination: 'numbers',
    pageSize: [5, 10, 25],
    sortable: [0, 1, 2, 3, 4],
    cells: [
      { label: 'ID' },
      { label: 'Fullname', key: 'name' },
      { label: 'Active', key: 'isActive' },
      { label: 'Email' },
      { label: 'Company' },
    ],
    serverSide: true,
    ajax: 'http://site.com/employee',
  })
</script>

Custom render

<script>
  datatable(document.getElementById('table'), {
    pagination: 'simple',
    pageSize: [5, 10, 25],
    sortable: [0, 1, 2, 3]
    cells: [
      { label: 'ID' },
      { label: 'Fullname', key: 'name' },
      {
        label: 'Active',
        key: 'isActive',
        render: function(data) {
          return data.isActive
            ? '<span style="color: blue;">active</span>'
            : '<span style="color: red;">inactive</span>'
        }
      },
      { label: 'Email' },
      { label: 'Company' },
    ],
  })
</script>