Align Decimals In A Data Table - align-column

align-column is a jQuery table formatting plugin to align and center decimals by any character or decimal point in table cells for better readability & data comparison.

Intended for Scientific Table and Statistics Table to help users quickly find out the difference in tabular data in the same column between different rows.

How to use it:

1. Insert the JavaScript file jquery.align-column.js after jQuery.

<script src="/path/to/cdn/jquery.min.js"></script>
<script src="/path/to/jquery.align-column.js"></script>

2. Call the function alignColumn on your HTML table and define the column index in which you want to align & center decimals.

<table>
  <caption>Aligned HTML</caption>
  <tbody>
  <tr>
    <td>8</td>
    <td>98</td>
    <td>998</td>
    <td>9.75</td>
  </tr>
  <tr>
    <td>9</td>
    <td>-99</td>
    <td>999*</td>
    <td>10</td>
  </tr>
  <tr>
    <td>10</td>
    <td>100</td>
    <td>1000</td>
    <td>10.25</td>
  </tr>
  <tr>
    <td>11</td>
    <td>101</td>
    <td>1001</td>
    <td>10.5</td>
  </tr>
  </tbody>
</table>

// column 1
$('table').alignColumn(0);

// column 1, 2, 3, 4
$('table').alignColumn([0, 1, 2, 3]);

3. Center the tabular data by any character you specify.

$('table').alignColumn(1, { 
  center: ':', debug: true
});

$('table').alignColumn(2, { 
  center: 'x'
});

$('table').alignColumn(3, { 
  center: '.'
});

$('table').alignColumn(4, { 
  center: '='
});

4. Enable the debug mode if needed.

$('table').alignColumn(4, { 
  center: '=',
  debug: true
});

5. Determine whether to ignore table headers. Default: true.

$('table').alignColumn(4, { 
  skipTHs: false
});

6. Add a CSS class to table cells after aligned. Default: 'added'.

$('table').alignColumn(4, { 
  center: '=',
  addedCellClass: 'custom'
});

---

This awesome jQuery plugin is developed by ndp-software. For more Advanced Usages, please check the demo page or visit the official website.