ModernTable

Simple modern JavaScript ES6 library that fetches JSON data into an HTML table which displays nicely within a Bootstrap 4 Card.

Notes:

• 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 higher.
• Specifically tested with Bootstrap 4.4.1 and 4.5.3.
• Theoretically, this should work with other CSS frameworks. However, this has NOT been tested with other CSS frameworks, so your mileage may vary.
• If number or date formatting are specified in the configuration, but the proper library does not load, this gracefully fails to no formatting.
• Strongly recommended to use ISO 8601 date formats in your source data and configuration. Then use the UI for localization.

Live Demo

https://simplenotsimpler.github.io/modern-table-example/

Getting Started

Documentation

https://simplenotsimpler.github.io/modern-table/

Requires:

• JSON data source
• Container to hold the table
• modern-table.css

Recommended:

• Number formatting: format-intl-number library
• Date formatting: Moment.js

CDN:

• CSS:
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/simplenotsimpler/modern-table@1.0.8/src/modern-table.css">

• JS:
  <script src="https://cdn.jsdelivr.net/gh/simplenotsimpler/modern-table@1.0.8/src/modern-table.js"></script>

Example

HTML:

<div class="card card-body rounded shadow-lg">
    <div id="table-container" class="table-responsive table-height"></div>
</div>

JS:

const localJSON = 'data/sample-sales-data.json';

const sampleTable = new ModernTable(
  'table-container', // tableContainerID
  'sample-table', // tableID
  localJSON, // dataURL
  {
    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',
        'columnTitle': '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'
      }
    }
  });

Styling

For the most part, the table is stylistically agnostic with a few exceptions which allow for a simple table scroll:

• Container for the table has explicit height and overflow. These can be overriden.
• Table header is sticky.
• Sticky table header makes the header row background transparent, so this was explicitly set. This can be overridden.

For details on specific classes see modern-table.css.

License

This project is MIT licensed.