Dynamic Table Library

#HTML, #JavaScript, #JSON

The Dynamic Table Library is a JavaScript library designed for rendering JSON data as dynamic tables in HTML. This documentation provides an overview of how to use the library and its features.

Installation

You can install the Dynamic Table Library using NPM:

npm install dynamic-table-json

Usage

Importing the LibraryTo use the library in your JavaScript project, import it as follows:

const DynamicTable = require('dynamic-table');

Example JSON Data Before rendering a dynamic table, you need JSON data. Here's an example:

const jsonData = [ 
{ "CUSTOMERID": "43996", "MONTHCODE": "72023", "BUYER_NUMBER": "8682041077", "BUYER_NAME": "Joseph Rajakumaran T", "MAKE": "Maruti", "MODEL": "Swift", "PINCODE": "600017" }, 
// Additional data objects here... ];

HTML Element

Add an HTML element to your page where you want to display the table. Provide it with an ID

<div id="DivTempTable1"></div>

Rendering a Dynamic Table

Use the DynamicTable.renderTable(options); function to render a dynamic table. Here's an example:

DynamicTable.renderTable({ 
jsonData: jsonData, 
targetElementId: 'DivTempTable1', 
columnModifiers: [
["1", "<a id='{{td}}'><i class='bi bi-pencil-square'></i></a>"], 
], 
tableClasses: ["table", "table-striped", "table-hover", "table-bordered"] });

Options

  1. jsonData: An array of JSON data to populate the table.

  2. targetElementId: The ID of the HTML element where the table should be rendered.

  3. columnModifiers: An array of column modifiers for adding elements to specific columns.

  4. tableClasses: An array of CSS/Bootstrap classes to apply to the table.

API Reference

DynamicTable.renderTable(options)Renders a dynamic table based on the provided options.

License

This library is licensed under the MIT License. See the LICENSE file for details.

Contributing

Contributions to this library are welcome! Please read the CONTRIBUTING.md file for guidelines.

Issues and Support

If you encounter any issues or have questions, please open an issue in the project's repository.

Last updated