@lucajung/json2table

Description

@lucajung/json2table is a utility library for rendering data as HTML tables with customizable grouping. It provides a simple API to convert arrays of data into HTML table elements with grouped rows based on specific keys.

Installation

You can install the package using npm:

npm install @lucajung/json2table

Usage

import { render } from '@lucajung/json2table';
// or, if using CommonJS
// const { render } = require('@lucajung/json2table');

// Sample data
const data = [
  { Name: 'John Doe', Age: 30, Country: 'USA' },
  { Name: 'Jane Smith', Age: 25, Country: 'Canada' },
  { Name: 'Michael Johnson', Age: 28, Country: 'USA' },
  { Name: 'Emily Brown', Age: 22, Country: 'Canada' },
  { Name: 'David Lee', Age: 32, Country: 'Australia' },
  { Name: 'Sophia Chen', Age: 27, Country: 'Australia' },
  { Name: 'James Kim', Age: 31, Country: 'USA' },
  { Name: 'Isabella Wang', Age: 29, Country: 'Canada' },
  { Name: 'Oliver Wong', Age: 24, Country: 'Canada' },
  { Name: 'Emma Liu', Age: 26, Country: 'Australia' },
  // Add more data items here
];


// Optional configuration
const config = {
  group: ['Country'], // Array of keys to group the data by
  tableClass: 'bold-table', // Legacy shortcut for adding classes to the table
  classNames: {
    table: 'data-table',
    thead: 'data-table-head',
    tbody: 'data-table-body',
    headerRow: 'data-table-header-row',
    headerCell: 'data-table-header-cell',
    bodyRow: 'data-table-row',
    bodyCell: 'data-table-cell',
  },
  ids: {
    table: 'people-table',
    headerCell: (key, columnIndex) => `people-heading-${columnIndex}-${key}`,
    bodyRow: rowIndex => `people-row-${rowIndex}`,
    bodyCell: (value, rowIndex, columnIndex, key) => `people-cell-${rowIndex}-${columnIndex}-${key}`,
  },
};

// Render the data as an HTML table
const tableElement = render(data, config);

// Append the table to an HTML element
document.getElementById('table-container').appendChild(tableElement);

Features

• Render data as HTML tables.
• Customize table grouping.
• Support for rowspan calculations in the rendered table.
• Easy-to-use and well-documented API.

Demo

Take a look at the Demo

API

render(data, config)

render is the main function to convert data into an HTML table.

Parameters:

• data (Array): An array of objects, where each object represents a row in the table.
• config (Config) [Optional]: An optional configuration object for customizing the rendering. It supports the following properties:
  • group (Array): An array of keys by which to group the table rows.
  • tableClass (string): Legacy shortcut for adding classes to the table element.
  • classNames (object): Adds class names to generated elements. Supported keys are table, thead, tbody, headerRow, headerCell, bodyRow, and bodyCell.
  • ids (object): Adds ids to generated elements. Supported keys are table, thead, tbody, headerRow, headerCell, bodyRow, and bodyCell.

For repeated elements, headerCell, bodyRow, and bodyCell can also be functions:

const config = {
  ids: {
    headerCell: (key, columnIndex) => `heading-${columnIndex}-${key}`,
    bodyRow: rowIndex => `row-${rowIndex}`,
    bodyCell: (value, rowIndex, columnIndex, key) => `cell-${rowIndex}-${columnIndex}-${key}`,
  }
};

Returns:

• HTMLTableElement: The HTMLTableElement representing the rendered table.

License

This project is licensed under the MIT License - see the LICENSE file for details.

Contributions

Contributions to this project are welcome. To submit a bug report, feature request please use GitHub Issues.