TableCraft

A lightweight JavaScript npm package for dynamically generating HTML tables in the browser using a simple configuration object.

Features

• Generate tables with minimal code
• Supports headers and row data
• Supports captions
• Built-in styling options
• Supports rowspan and colspan
• Browser-first and framework-independent

Installation

npm install tablecraft-js

Basic Usage

import { createTable } from "tablecraft";

createTable("#app", {
  caption: "Student Table",
  headers: ["Roll No", "Name", "Dept"],
  data: [
    ["101", "Abishek", "AI&DS"],
    ["102", "Rahul", "CSE"],
  ],
  bordered: true,
  striped: true,
  hover: true,
});

API

createTable(selector, config)

Creates a table and inserts it into the target DOM element.

Parameters

• selector (string) — DOM selector where the table should be inserted
• config (object) — table configuration

Returns

• HTMLTableElement

buildTable(config)

Builds and returns a <table> element without inserting it into the page.

Returns

• HTMLTableElement

validateConfig(config)

Validates the config object before rendering.

Returns

{
  valid: boolean,
  errors: string[]
}

Configuration

TableCraft supports two modes:

1. Simple Mode

Use headers and data for standard tables.

createTable("#app", {
  caption: "Attendance",
  headers: ["Roll No", "Name", "Status"],
  data: [
    ["101", "Abishek", "Present"],
    ["102", "Rahul", "Absent"],
  ],
  bordered: true,
  striped: true,
  hover: true,
  compact: false,
});

2. Advanced Rows Mode

Use rows for merged cells and per-cell control.

createTable("#app", {
  caption: "Exam Seating",
  rows: [
    [{ content: "Bench Allocation", colspan: 3, isHeader: true }],
    [
      { content: "Bench No", isHeader: true },
      { content: "Student 1", isHeader: true },
      { content: "Student 2", isHeader: true },
    ],
    [
      { content: "1" },
      { content: "101 - Abishek" },
      { content: "201 - Rahul" },
    ],
  ],
  bordered: true,
  hover: true,
});

Cell Object Format

In advanced rows mode, each cell supports:

{
  content: "Abishek",
  rowspan: 1,
  colspan: 1,
  isHeader: false,
  className: "highlight-cell",
  align: "center",
  style: {
    color: "red",
    fontWeight: "bold"
  }
}

Cell Properties

| Property | Type | Description | | ----------- | --------------------------------- | ---------------------------------- | | content | string \| number \| HTMLElement | Cell content | | rowspan | number | Number of rows the cell spans | | colspan | number | Number of columns the cell spans | | isHeader | boolean | Render as <th> instead of <td> | | className | string | Custom class for the cell | | align | "left" \| "center" \| "right" | Text alignment | | style | object | Inline styles |

Styling Options

These config flags apply built-in styles:

| Option | Type | Description | | ---------- | --------- | --------------------------- | | bordered | boolean | Adds borders to the table | | striped | boolean | Adds alternating row colors | | hover | boolean | Adds hover effect on rows | | compact | boolean | Reduces cell padding |

Advanced Example with rowspan and colspan

createTable("#app", {
  caption: "Merged Cell Example",
  rows: [
    [{ content: "Student Details", colspan: 3, isHeader: true }],
    [
      { content: "Roll No", isHeader: true },
      { content: "Name", isHeader: true },
      { content: "Dept", isHeader: true },
    ],
    [
      { content: "101", rowspan: 2 },
      { content: "Abishek" },
      { content: "AI&DS" },
    ],
    [{ content: "Rahul" }, { content: "CSE" }],
  ],
  bordered: true,
  striped: true,
});

Validation Example

import { validateConfig } from "tablecraft";

const result = validateConfig({
  headers: ["Name", "Age"],
  data: [["Abishek", 21]],
});

console.log(result);
// { valid: true, errors: [] }

Notes

• TableCraft is designed for browser environments
• It does not require any CSS framework
• Default styles are injected automatically only once

License

MIT