dynamic-table-json

Dynamic Table JSON Library

🌟 A JavaScript library for rendering the json data into the dynamic tables! 🌟

Installation

You can install the library using npm:

npm install dynamic-table-json

Usage

Import the library

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

Add this HTML Element to the Page where you want to display the table

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

Use the Sample.json file / Sample json data

        var jsonData = [{
            "CUSTOMERID": "43996",
            "BUYER_NUMBER": "8682041077",
            "BUYER_NAME": "Joseph",
            "PINCODE": "600017"
   
        },
        {
            "CUSTOMERID": "43996",
             "NUMBER": "9188682041077",
            "NAME": "jorat",
            "PINCODE": "600017"
       
        }]

Call the JS Function like this:

DynamicTable.renderTable({
    jsonData: jsonData,
    targetElementId: 'DivTempTable1'
});

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

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

Additional Feature - I - ( Adding Classes )

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

DynamicTable.renderTable({
    jsonData: jsonData,
    targetElementId: 'DivTempTable1',
    tableClasses: ["table", "table-striped", "table-hover", "table-sm", "text-center"]
});

Additional Feature - II - ( Adding Column Elements )

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

1. The Element to be added in  which column 
2. Give the HTML Elements / Icons ( SVGs) / Image
    additionally by adding like this {{td}} you will get the respective values too .

DynamicTable.renderTable({
    jsonData: jsonData,
    targetElementId: 'DivTempTable1',
    tableClasses: ["table", "table-striped", "table-hover"],
    columnModifiers: [
        ["1", "<a id='{{td}}'>Save Button</a>"],
    ]
});

Multiple Tables Rendered

Documentation

https://jorat.gitbook.io/dynamic-table/

Issues and Support

If you encounter any issues or have questions, please open an issue / Contact Me in 📞 [phone] .