1.2.0 ā¢ Published 7 months ago
dynamic-table-json v1.2.0
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 š +918682041077 .