jquery-prettytable

Make your table looks pretty.

Requirements

• jQuery 2.1.0+
• Bootstrap 3

Usage

Enable prettytable via javascript:

$('.table[data-role=prettytable]').prettyTable();

Set max column width:

<table data-role="prettytable">
  <thead>
    <tr>
      <th data-width="100">
        ...

Will apply the min value of data-width and dynamic calculated finally.

Set column width according on data-min-width and auto calculated value:

<table data-role="prettytable">
  <thead>
    <tr>
      <th data-min-width="100">
        ...

Set fixed column width:

<table data-role="prettytable">
  <thead>
    <tr>
      <th data-fixed-width="100">
        ...

Set flex column width:

<table data-role="prettytable">
  <thead>
    <tr>
      <th data-width="flex">
        ...

Options

Options can be passed via data attributes or JavaScript.

Scroller now only accept false or 'x'

Name	Type	Default	Desciption
scroller	string or false	false	enable horizontal scroller or not
fixedPadding	int	20	Reserved width for header column
iconWidth	int	20	Extra icon width such as question mark
maxColumnWidth	function	-	-

scroller option example:

// programming style
$('.table[data-role=prettytable]').prettyTable({
  scroller: 'x'
});

or

<!-- conventional style -->
<table data-role="prettytable" data-scroller="x">
  ...
</table>

$('.table[data-role=prettytable]').prettyTable();

Methods

• lock() freeze mouse wheel, ignore its events
• unlock() release mouse wheel, restore events
• refresh() re-adjust columns of table

how to invoke?

only get invoked on the first matched jQuery objects.

var result = $('.table[data-role=prettytable]').prettyTable(METHOD_NAME);

Events

• lock.pt triggered when lock() method be invoked
• unlock.pt triggered when unlock() method be invoked

subscribe event(s):

$(document.body).on('lock.pt', '.prettytable', function() {
  // do something...
})

History

• v0.1.0 Dec 31, 2014 first release with only kernal features.
• v0.1.1 Jan 07, 2014 Bug fix
• v0.1.2 Jan 08, 2014 +Remove underscore.js as a dependency. +Add travis-CI support. +Add min-width support.

FAQ

Q1: How to support max width of column?

Add an additional attribute to the <th> tag,

<table class="prettytable" data-role="prettytable">
  <thead>
    <tr>
      <th data-width=200>
        ...

More info

• by Xiong Zhengdong
• since Dec 31, 2014