ProTable

A data-table alternative written with modern javascript.

Docs

Open Full Documentation.

Basic Usage

Installation

npm i protable

Create From Array

HTML container:

<div id="table-from-array"></div>

Js:

import { fromArray } from 'protable'

fromArray('#table-from-array', [
  {
    name: 'Nurul Huda',
    relationship: 'Married',
    blog: 'https://jagongoding.com'
  },
  {
    name: 'Abdullah Wahid',
    city: 'Bangkalan'
  },
  {
    city: 'Lamongan',
    name: 'Lendis Fabri',
    blog: 'https://kopiding.in'
  },
  {
    name: 'Elmo Bachtiar',
    relationship: 'Single'
  }
])

Table Output:

<table><thead><tr><th>Name</th><th>Relationship</th><th>Blog</th><th>City</th></tr></thead><tbody><tr><td>Nurul Huda</td><td>Married</td><td><a href="https://jagongoding.com">https://jagongoding.com</a></td><td>-</td></tr><tr><td>Abdullah Wahid</td><td>-</td><td>-</td><td>Bangkalan</td></tr><tr><td>Lendis Fabri</td><td>-</td><td><a href="https://kopiding.in">https://kopiding.in</a></td><td>Lamongan</td></tr><tr><td>Elmo Bachtiar</td><td>Single</td><td>-</td><td>-</td></tr></tbody></table>

Create Complex Table From Array

import { fromArray } from 'protable'

fromArray('#table-from-array-2', [
  {
    name: 'Nurul Huda',
    birth: {
      day: 1,
      month: 'January',
      year: 1996
    },
    city: 'Surabaya'
  },
  {
    name: 'Wahid Abdullah',
    birth: {
      day: 2,
      month: 'February',
      year: 1996
    },
    city: 'Bangkalan'
  },
  {
    name: 'Lendis Fabri',
    birth: {
      day: 3,
      month: 'Maret',
      year: 1996
    },
    city: 'Lamongan'
  }
])

Table Output:

Name	Birth			City
	Day	Month	Year
Nurul Huda	1	January	1996	Surabaya
Wahid Abdullah	2	February	1996	Bangkalan
Lendis Fabri	3	Maret	1996	Lamongan

License

The Pro Table library is open-source software licensed under the MIT license.