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

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