Automatically Number Your HTML Tables with jQuery - Autotablenumbers

AutoTableNumbers.js is a tiny jQuery plugin that automatically numbers table rows with customizable formatting options like bold styling and leading zero formatting.

It's ideal for automatically managing row numbers when your tables are filtered, sorted, or dynamically updated.

Features:

• Dynamic Row Numbering: It automatically adds sequential numbers to a specified column in your table.
• Respects Visibility: The plugin intelligently numbers only visible rows by default (tbody tr:visible). It works correctly even after you filter or hide rows.
• Customizable Output: You have options to make the numbers bold or add a leading zero for single-digit numbers (e.g., "01, 02, 03").
• Bold Number Formatting: Applies bold styling to row numbers through an optional configuration flag, wrapping numbers in <b> tags for visual emphasis.
• Flexible Column Targeting: Allows numbering in any table column through zero-based index configuration, accommodating various table layouts.

Use Cases:

• Data Tables with Filtering: Maintain proper numbering when rows are filtered or searched.
• Admin Panels and Dashboards: Display numbered lists of users, orders, or transactions.
• Dynamic Content Tables: Handle tables where rows are added or removed via JavaScript.
• Printed Reports: Ensure consistent numbering in exported or printed table data.

How To Use It:

1. Add jQuery and the AutoTableNumbers.js plugin to your HTML document.

<!-- jQuery is required -->
<script src="/path/to/cdn/jquery.min.js"></script>

<!-- Local -->
<script src="jquery.AutoTableNumbers.min.js"></script>

<!-- CDN -->
<script src="https://cdn.jsdelivr.net/gh/arasheb0098/autotablenumbers/jquery.AutoTableNumbers.min.js"></script>

2. You can also install it via npm if you're using a build process.

# NPM
$ npm install jquery-autotablenumbers

import 'jquery-autotablenumbers';

3. The plugin works on any standard HTML table with a <thead> and <tbody>. Make sure you have an empty <td> in each row where you want the number to appear.

<table id="table">
  <thead>
    <tr>
      <th>#</th>
      <th>Name</th>
      <th>City</th>
    </tr>
  </thead>
  <tbody>
    <tr><td></td><td>John Doe</td><td>New York</td></tr>
    <tr><td></td><td>Jane Smith</td><td>London</td></tr>
    <tr><td></td><td>Peter Jones</td><td>Paris</td></tr>
    <tr><td></td><td>David Williams</td><td>Tokyo</td></tr>
  </tbody>
</table>

4. Call the plugin on your HTML table. This will number the first column of visible rows in the <tbody>, starting from 1.

$(document).ready(function () {
   $('#table').AutoTableNumbers();
});

5. Customize the behavior by passing an options object. This example starts numbering from 1, places the numbers in the first column (column: 0), and styles them as bold with a leading zero.

Option	Type	Default	Description
column	Number	0	The zero-based index of the column where numbers will be placed.
start	Number	1	The number to start counting from.
selector	String	'tbody tr:visible'	The jQuery selector used to find the rows that need numbering.
bold	Boolean	false	If true, the number will be wrapped in a <b> tag.
zero	Boolean	false	If true, single-digit numbers will be padded with a leading zero.

$(document).ready(function () {
  $('#my-data-table').AutoTableNumbers({
    column: 0,  // Target the first column
    start: 1,   // Start numbering from 1
    bold: true, // Make the numbers bold
    zero: true  // Add a leading zero (01, 02, etc.)
  });
});

FAQs:

Q: Can I use this plugin with tables that don't have a tbody element?
A: Yes, but you'll need to customize the selector option. Change the selector to target rows directly: selector: 'tr:visible'. Be aware this will attempt to number header rows as well unless you specifically exclude them with :not(thead tr) or similar selectors.

Q: The numbers appear as plain text even though I set bold to true. What's wrong?
A: Check that the cell isn't being overridden by CSS styles that reset font-weight. The plugin injects <b> tags, but CSS rules with higher specificity (like td { font-weight: normal !important; }) will override the bold styling. Inspect the cell in browser dev tools to verify the <b> tag exists but is being styled differently.

Q: How do I renumber the table after adding new rows dynamically?
A: Simply call the plugin again on the table element after adding rows: $('#MyTable').AutoTableNumbers(options). Each invocation recalculates and renumbers all matching rows from scratch. For tables that update frequently, consider wrapping the plugin call in a function that executes after any row modifications.

---

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