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

Last update: Feb 17, 2022

Overview

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

CDN:

CSS:
JS:

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.

Convert table to card when on phone

Convert table to card see index.html for example converts table to card when viewport is = 425px HTML Syntax table !-- table headings -- th

May 3, 2022

The leaderboard website displays scores submitted by different players. It also allows you to submit your score. All data is preserved thanks to an external API. Technologies used are JavaScript(ES6), HTML5, CSS3, Webpack. Also, the Gitflow workflow was used.

Leaderboard The leaderboard website displays scores submitted by different players. It also allows you to submit your score. All data is preserved tha

Apr 20, 2022

A high-resolution local database that uses precise algorithms to easily record data in local files within a project with persistent JSON and YAML support designed to be easy to set up and use

About A high-resolution local database that uses precise algorithms to easily record data in local files within a project with persistent JSON and YML

Dec 28, 2022

App that receives data from a microcontroller that is set up at your electricity meter, which at certain intervals will send an image to be processed, this then gets sent to a Python instance which will get the data read from the image. That data gets sent back and will be saved to the account this meter belongs to. This gives you the ability to track your currently analog meter in a digtal environment.

Usage App Server About this project App that receives data from a microcontroller that is set up at your electricity meter, which at certain intervals

Dec 20, 2022

Awesome book with ES6, this project is build using HTML,CSS, JavaScript ES6 the project allows you to add books and save them with the author , for another time checks

Project Name Awsome books Description the project. adding books daynamiclly Built With Major languages Frameworks Technologies used Live Demo (if avai

Jul 25, 2022

Test Pull Request

This is a pull request from an attempt to use release branch workflow per the GitHub Learning course: Create a release based workflow. Decided that for the time being will stick to simple GitHub Flow and work on feature branches locally.

opened by simplenotsimpler 1

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

Related tags

Overview

ModernTable

Notes:

Live Demo

Getting Started

Documentation

Requires:

Recommended:

CDN:

Example

Styling

License

You might also like...

Convert table to card when on phone

The leaderboard website displays scores submitted by different players. It also allows you to submit your score. All data is preserved thanks to an external API. Technologies used are JavaScript(ES6), HTML5, CSS3, Webpack. Also, the Gitflow workflow was used.

A high-resolution local database that uses precise algorithms to easily record data in local files within a project with persistent JSON and YAML support designed to be easy to set up and use

Awesome book with ES6, this project is build using HTML,CSS, JavaScript ES6 the project allows you to add books and save them with the author , for another time checks

Simple Library implemented using HTML, CSS and JavaScript. This is a simple implementation of JavaScript Modules of ES6.

Simply Netflix clone using ReactJS. It fetches the data from TMDB API

a web crawler that crawls website links & fetches SEO Data

a lightweight, dependency-free JavaScript plugin which makes a HTML table interactive

Comments

Test Pull Request

Owner

SimpleNotSimpler

JSON Visio is data visualization tool for your json data which seamlessly illustrates your data on graphs without having to restructure anything, paste directly or import file.

A Cloudflare Workers service that fetches and renders Notion pages as HTML, Markdown, or JSON.

Pretty-print-json - 🦋 Pretty-print JSON data into HTML to indent and colorize (written in TypeScript)

A Hulu Clone which created with NextJS. It fetches the data from TMDB (The Movie Database) API.

A simple Form Validation Utility for Bootstrap 3, Bootstrap 4, and Bootstrap 5 for Humans.

Package fetcher is a bot messenger which gather npm packages by uploading either a json file (package.json) or a picture representing package.json. To continue...

This is an educational and simple website that displays a list of books and allows you to add and remove books from that list built with HTML, CSS, JavaScript. The goal is to make it more organized by using modules and practice the ES6 syntax in the first Module

🤖 An action that fetches the list of malicious domains on Discord in different providers and creates/updates a JSON file with them from time to time.

Extends Bootstrap Tooltips and Popovers by adding custom classes. Available for Bootstrap 3 and Bootstrap 4.

Create a HTML table from JSON that can be sorted, selected, and post-processed using a simple callback.