JSON Print Table

Renders a HTML Table from JSON data to a new browser tab and prints the table.

Features

• Print JSON as a Table - Parse JSON data and transform it to HTML Table.
• Customizable - Style the table with any CSS lib like Bootstrap, Material, etc.
• Zero-deps, small size (2.50 kB │ gzip: 0.85 kB).
• Fully typed.

Usage

Install package:

npm i @mllull/json-table-print

// ESM
import {
  printTable,
  printTableHeadersType,
  printTableOptionsType,
} from "@mllull/json-table-print";

// CommonJS
const {
  printTable,
  printTableHeadersType,
  printTableOptionsType,
} = require("@mllull/json-table-print");

printTable = async (
  options: printTableOptionsType,
  data: any
): Promise<boolean>

Types

export interface printTableHeadersType {
  [key: string]: string;
}

export interface printTableElementsType {
  pageTitle?: string;
  table?: string;
  thead?: string;
  th?: string;
  tbody?: string;
  tr?: string;
  td?: string;
}

export interface printTableOptionsType {
  pageTitle?: string;
  headers: printTableHeadersType;
  classes?: printTableElementsType;
  style?: string;
  linkCSSLib?: string;
}

Usage

printTable(options, jsonData);

Explanation of printTableOptionsType types:

pageTitle:

(Optional) The title of the page, it will be shown over the table.

headers:

Keys of the JSON object that will be shown in the table, the second value is the text of the Table header that will be displayed.

classes:

(Optional) A printTableElementsType object that has all CSS classes to be applied.

style:

(Optional) A CSS string of styles to be injected to the final html code.

In the Quasar demo of this project, the style option is generated by UnoCSS.

linkCSSLib

(Optional) URL to any CSS library that will be injected to the final html code. Styles from the CSS lib will be applied to the table and all of the above elements.

Explanation of printTableElementsType types:

All of above types are optional.

pageTitle

Styles to be applied to pageTitle element.

table ,thead ,th ,tbody ,tr ,td

Styles to be applied to all of this elements.

Example of a generated table from JSON data:

<table>
  <thead>
    <tr>
      <th>Dessert (100g serving)</th>
      <th>Calories</th>
      <th>Protein (g)</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Frozen Yogurt</td>
      <td>159</td>
      <td>4</td>
    </tr>
    <tr>
      <td>Ice cream sandwich</td>
      <td>237</td>
      <td>4.3</td>
    </tr>
    <tr>
      <td>Eclair</td>
      <td>262</td>
      <td>6</td>
    </tr>
    <tr>
      <td>Cupcake</td>
      <td>305</td>
      <td>4.3</td>
    </tr>
    <tr>
      <td>Gingerbread</td>
      <td>356</td>
      <td>3.9</td>
    </tr>
    <tr>
      <td>Jelly bean</td>
      <td>375</td>
      <td>0</td>
    </tr>
    <tr>
      <td>Lollipop</td>
      <td>392</td>
      <td>0</td>
    </tr>
    <tr>
      <td>Honeycomb</td>
      <td>408</td>
      <td>6.5</td>
    </tr>
    <tr>
      <td>Donut</td>
      <td>452</td>
      <td>4.9</td>
    </tr>
    <tr>
      <td>KitKat</td>
      <td>518</td>
      <td>7</td>
    </tr>
  </tbody>
</table>

Example

A Quasar demo app is available in examples folder.

F.A.Q.

Q: How can I style a certain td element?

Well, this can't be done for the moment. My frist intention when developing this plugin was to keep as simple as possible, I tried to style a certaing element, but it increase the complexity of this plugin (You could not only style a td, but a certain tr). In short, it's not a trivial issue.

License

MIT License © 2023 Mateu Llull.