npm package: @mllull/json-table-print
Description: Renders a HTML Table from JSON data to a new browser tab and prints the table.
Author: Mateu Llull
Latest version: 1.0.2

# 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:

```bash
npm i @mllull/json-table-print
```

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

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

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

## Types

```ts
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

```ts
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](https://github.com/unocss/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:

```html
<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](https://quasar.dev/) demo app is available in [examples](./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) License © 2023 [Mateu Llull](https://github.com/mllull).