Simple Modern JavaScript ES6 Library That Fetches JSON Data in an HTML Table

create-dynamic-table-in-javascript

ModernTable is a simple modern JavaScript ES6 library that fetches JSON data in an HTML table that renders nicely inside a Bootstrap 4 tag.

display json data in html using javascript dynamically, create dynamic table from json object in javascript, jquery dynamically create table from json, create table from json data

Notes:

  • It only targets modern browsers.
  • To help Microsoft phase out IE11 and in anticipation of Bootstrap 5 dropping IE support, IE is not supported.
  • Compatible with Bootstrap 4.4.1 and later.
  • Specifically tested with Bootstrap 4.4.1 and 4.5.3.
  • In theory, this should work with other CSS frameworks. However, this has not been tested with other CSS frameworks, so your mileage may vary.
  • If the number or date format is specified in the config, but the appropriate library is not loaded, this fails safely in the unformatted.
  • It is highly recommended to use ISO 8601 date formats in source and configuration data. Then use the UI to translate.

How to make use of it:

1. Download and cargo the wanted JavaScript & CSS files within the doc.

<link rel="stylesheet" href="src/modern-table.css" />
<script src="src/modern-table.js"></script>

2. Define your tabular information in a JSON file.

// data.json
[
  {
    "id": 1,
    "rpt_date": "2018-08-01",
    "new_customers": 147,
    "revenue": 27038,
    "cogs": 9833,
    "profit": 17205,
    "profit_margin": 0.636327
  },
  ...
]

3. Load the Moment.js library to format dates & times.

<script src="/path/to/moment.min.js"></script>

4. Load the format-intl-number library to format numbers.

<script src="/path/to/format-intl-number.js"></script>

5. Create a container to carry the information table.

<div id="table-container"></div>

6. Generate a primary information table from the JSON data you provide.

const sampleTable = new ModernTable(

      // container ID
      'table-container',

      // Table ID
      'sample-table',

      // JSON URL
      '/path/to/data.json',

      // configurations
      {
        // options here
      }
      
);

7. Config the information table with the next choices.

const sampleTable = new ModernTable(

      // container ID
      'table-container',

      // Table ID
      'sample-table',

      // JSON URL
      '/path/to/data.json',

      // configurations
      {
        tableClasses: 'table table-bordered table-striped table-hover table-sticky table-sm',
        tableCaption: 'Sample Sales Data',
        searchClasses: 'form-control mb-2 w-25 float-right',
        colConfig: {
          'rpt_date': {
            'format': 'date-us',
            'dateFrom': 'YYYY-MM-DD',
            'dateTo': 'MM/DD/YY',
            'colTitle': 'Report Date'
          },
          'new_customers': {
            'format': 'number-grouped',
            'alignment': 'right'
          },
          'revenue': {
            'format': 'currency-us',
            'alignment': 'right'
          },
          'cogs': {
            'format': 'currency-us',
            'alignment': 'right'
          },
          'profit': {
            'format': 'currency-us',
            'alignment': 'right'
          },
          'profit_margin': {
            'format': 'percent',
            'numDecimals': 1,
            'alignment': 'right'
          }
        }
      }

);

Generate A Filterable Data Table From JSON, ModernTable Plugin/Github, bind json data to table using jquery, create dynamic table in javascript, populate html table with json data


See Demo And Download

Official Website(simplenotsimpler): Click Here

This superior jQuery/javascript plugin is developed by simplenotsimpler. For extra Advanced Usages, please go to the official website.