https://github.com/ibnujakaria/protable

A DataTable alternative, written with modern javascript.
https://github.com/ibnujakaria/protable

bootstrap-table datatable datatable-alternatives protable table tailwind-table vanilla-js

Last synced: about 2 months ago
JSON representation

A DataTable alternative, written with modern javascript.

• Host: GitHub
• URL: https://github.com/ibnujakaria/protable
• Owner: ibnujakaria
• License: mit
• Created: 2020-04-23T06:01:04.000Z (about 5 years ago)
• Default Branch: master
• Last Pushed: 2023-01-07T18:17:48.000Z (over 2 years ago)
• Last Synced: 2025-02-16T03:34:06.499Z (2 months ago)
• Topics: bootstrap-table, datatable, datatable-alternatives, protable, table, tailwind-table, vanilla-js
• Language: JavaScript
• Homepage: https://protable.jagongoding.com
• Size: 2.11 MB
• Stars: 13
• Watchers: 1
• Forks: 1
• Open Issues: 25
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
[![](https://img.shields.io/npm/v/protable)](https://www.npmjs.com/package/protable)

[![](https://img.shields.io/npm/dt/protable)](https://www.npmjs.com/package/protable)

[![](https://img.shields.io/jsdelivr/npm/hm/protable)](https://www.jsdelivr.com/package/npm/protable)

[![](https://img.shields.io/github/size/ibnujakaria/protable/dist/protable.min.js)]()

[![](https://img.shields.io/github/release-date/ibnujakaria/protable)](https://github.com/ibnujakaria/protable/)

[![](https://img.shields.io/npm/l/protable)](https://www.npmjs.com/package/protable)

# ProTable

A data-table alternative written with modern javascript.

## Docs

Open [Full Documentation](https://protable.jagongoding.com).

## Basic Usage

### Installation

```bash

npm i protable

```

### Create From Array

HTML container:

```html



```


Js: 

```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:

NameRelationshipBlogCityNurul HudaMarriedhttps://jagongoding.com-Abdullah Wahid--BangkalanLendis Fabri-https://kopiding.inLamonganElmo BachtiarSingle--

### Create Complex Table From Array

```js

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:

NameBirthCityDayMonthYearNurul Huda1January1996SurabayaWahid Abdullah2February1996BangkalanLendis Fabri3Maret1996Lamongan

## License

The Pro Table library is open-source software licensed under the [MIT license](https://opensource.org/licenses/MIT).