/jquery-prettytable

Make the table looks pretty.

Primary LanguageJavaScriptMIT LicenseMIT

jquery-prettytable

Make your table looks pretty.

Build Status

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.
  • v0.1.3 Jan 09, 2014 +Fixed font calculated bug for firefox browser

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