ProTable

# Custom Content

ProTable is fully customizable. You can change many things to match your preferences. This guide will show you how to customize your ProTable.

# Custom Column

There are two ways to instantiate a ProTable instance. Either using fromArray() helper to build a rich HTML table from an array, or using fromTable() helper to build from an existing HTML table.

By default, ProTable will use the attribute JSON as the lable of columns.

For example, by using this data:

const data = [
  {
    name: 'Fulan bin Fulan',
    city: 'Surabaya',
    gender: 'Male'
  },
  {
    name: 'Fulanah binti Fulan',
    city: 'Jakarta',
    gender: 'Female'
  }
]

ProTable will then generate two columns with label Name and City.

ProTable Output:

You can change the label by passing columns options.

fromArray('#table-container', data, {
  columns: {
    name: {
      label: 'Full Name'
    },
    city: {
      label: 'Address'
    }
  }
})

ProTable Output:

# Display Only Some Columns

If you only want to display some columns of your data, you can do that as follows:

fromArray('#protable-3', {
  columns: ['name', 'gender'],
  rows: data
})

ProTable Output:

# Custom Cell

You can also custom your cell content by passing a callback to options.contents.

ProTable will render the return of your callback as a content to specific cell. The return of your callback can be a string or HTMLElement.

fromArray('#protable-4', data, {
  contents: {
    name: content => content.toUpperCase(),
    city: content => content.split('').join('-'),
    gender: content => {
      const span = document.createElement('span')

      span.innerText = content
      span.style.color = content === 'Male' ? '#3eaf7c' : '#ff7675'

      return span
    }
  }
})

ProTable Output:

# Working With Existing HTML

Let's say you have this table as an input:

Company Contact Person Country
Genta Soft Agus Priyono Indonesia
Alfreds Futterkiste Maria Anders Germany
Centro comercial Moctezuma Francisco Chang Mexico
Ernst Handel Roland Mendel Austria
Jago Ngoding Nurul Huda Indonesia
Island Trading Helen Bennett UK
Kopi Dingin Lendis Fabri Indonesia
Laughing Bacchus Winecellars Yoshi Tannamuri Canada
Aksamedia Rizal Jundi Indonesia
Magazzini Alimentari Riuniti Giovanni Rovelli Italy
Indev Id Hengky Indonesia

ProTable will use the innerText of every th as column keys.

So if you want to change the Contact Person cell content, you have to pass ['Contact Person']() as callback.

import { fromTable } from 'protable'

fromTable('#protable-5', {
  contents: {
    ['Contact Person']: content => {
      return `☏ ${content}`
    },
    Country: content => {
      const span = document.createElement('span')

      span.innerText = content
      span.style.fontWeight = 600
      // random color
      span.style.color = `#` + ((1<<24)*Math.random()|0).toString(16)

      return span
    }
  }
})

ProTable Output:

Company Contact Person Country
Genta Soft Agus Priyono Indonesia
Alfreds Futterkiste Maria Anders Germany
Centro comercial Moctezuma Francisco Chang Mexico
Ernst Handel Roland Mendel Austria
Jago Ngoding Nurul Huda Indonesia
Island Trading Helen Bennett UK
Kopi Dingin Lendis Fabri Indonesia
Laughing Bacchus Winecellars Yoshi Tannamuri Canada
Aksamedia Rizal Jundi Indonesia
Magazzini Alimentari Riuniti Giovanni Rovelli Italy
Indev Id Hengky Indonesia

← Pagination →