HTMLTableKit

HTMLTableKit is a lightweight JavaScript library designed to manipulate HTML tables as dynamic entities, enabling seamless interactions without the burden of complex frameworks or excessive dependencies. This library caters to developers needing a straightforward solution to manage table data in pure JavaScript while avoiding the challenges associated with Single Page Applications (SPAs).

Key Features

• Automatic Table Parsing: Transform HTML tables into structured JavaScript objects effortlessly.
• Type Detection: Identify column data types automatically, accommodating various formats such as strings, numbers, decimals, booleans, and more.
• Hidden Input Support: Capture hidden inputs seamlessly within tables.
• CRUD Operations: Perform create, read, update, and delete operations programmatically to maintain table data.
• Async CRUD Operations: Execute CRUD operations asynchronously, ideal for integration with APIs.
• DOM Synchronization: Any changes made to the table data automatically reflect in the DOM.
• Header Detection: The library can automatically detect table headers or assign numeric names to columns when headers are absent.
• Row ID Management: Supports automatic ID generation or allows for custom ID setups.

Supported Data Types

HTMLTableKit intelligently recognizes the following data types for table columns:

• string: Text content
• number: Integer values
• decimal: Floating-point numbers
• boolean: true/false values
• free: Complex contents such as HTML or buttons

Distribution

The library's dist/ directory features multiple builds:

• TypeScript Support: Includes HTMLTableKit.d.ts for full TypeScript compatibility and IntelliSense.
• ES6 Module Version: Contains both the main and minified ES6 modules for optimized performance.
• Standalone Browser Version: Provides full and minified versions for direct use in browsers, without the need for build tools.

Usage

For integrating HTMLTableKit into projects:

TypeScript Projects

import HTMLTableKit from 'htmltablekit';  

Modern JavaScript with Bundlers

import HTMLTableKit from './dist/HTMLTableKit.js';  
// or for production  
import HTMLTableKit from './dist/HTMLTableKit.min.js';  

Direct Browser Usage

<script src="dist/HTMLTableKit.standalone.js"></script>  

Table Information Retrieval

To access and log the structure of the table:

const tableData = tableKit.getTable();  
console.log(tableData);  

CRUD Operations

Here are examples of synchronous CRUD operations:

• Add a Row

const newRow = tableKit.addRow({  
  name: "John Doe",  
  age: 30,  
  salary: 50000.50,  
  active: true  
});  

• Update a Row

const success = tableKit.updateRow("row_1", {  
  salary: 55000.00  
});  

• Delete a Row

const success = tableKit.deleteRow("row_1");  

Asynchronous Operations

The library also supports asynchronous CRUD operations, ideal for modern API integrations:

Async Add with API Call

const newRow = await tableKit.addRowAsync(  
  { name: "John", age: 30, salary: 50000 },  
  async (row) => {  
    const response = await fetch('/api/employees', {  
      method: 'POST',  
      headers: { 'Content-Type': 'application/json' },  
      body: JSON.stringify(row)  
    });  
    if (!response.ok) {  
      return null;  
    }  
    return await response.json();  
  }  
);  

This library encapsulates robust features for transforming HTML table management, significantly improving efficiency in web applications where traditional methods may fall short.