🚀 VariationTable

VariationTable is a high-performance React component designed to render LaTeX tkz-tab variation and sign tables directly in the browser, with no server-side compilation required.

A demo is available here.

💡 Why this project?

The LaTeX tkz-tab package is the standard for creating complex mathematical tables, but its usage is typically confined to the LaTeX ecosystem.

On the web, there is no lightweight, native solution to display these tables. I developed VariationTable to:

• Bridge the gap: Enable educators and developers to render mathematical tables without the need for static image generation or heavy PDF exports.
• Performance: Achieve instant rendering through a dedicated parsing engine.

⚙️ Architecture & Functionality

The engine follows a three-stage pipeline:

1. Parsing (Peggy.js): The source tkz-tab code is parsed to generate an Abstract Syntax Tree (AST).
2. Transformation: An intermediate layer converts the AST into a structured data format tailored for React.
3. Multi-layer Rendering:

• Math Layer: Utilizes KaTeX for high-fidelity mathematical typography.
• SVG Layer: Handles the drawing of arrows, forbidden regions, and the table outline.
• Note: Arrows are rendered after measuring label dimensions to ensure precise, geometrically accurate positioning.

🛠 Integration Guide

Installation

VariationTable uses KaTeX to render math, but does not bundle it — you need to install it alongside as a peer dependency:

# npm
npm install tkz-tab-react katex

# yarn
yarn add tkz-tab-react katex

# pnpm
pnpm add tkz-tab-react katex

Basic Usage

import "tkz-tab-react/style.css";
import 'katex/dist/katex.min.css'; // required — see Installation
import {VariationTable} from 'tkz-tab-react'

const MyComponent = () => {
  const latexCode = `\\begin{tikzpicture} ... \\end{tikzpicture}`;
  
  return <VariationTable inputText={latexCode} theme="dark"/>;
};

Theme can be light or dark and is optional.

If a syntax or logic error is detected, the component automatically displays a descriptive error message instead of the table.

🔌 Compatibility & Divergences

• Coverage: It supports the vast majority of standard use cases handled by the original tkz-tab package.
• Error Handling: Unlike tkz-tab, which can fail silently or render broken outputs, it explicitly throws descriptive error messages pinpointing the source of failure.
• Line Breaks: It does not support raw \\ line breaks outside of math mode ($...$).
• Math Rendering: It uses KaTeX to render mathematical expressions; please refer to the KaTeX Supported Features for valid commands.
• Peer dependencies: requires react/react-dom ≥18 and katex installed separately in your project (not bundled).

📈 To Do

• [ ] Implement support for optional arguments to controle table dimensions.
• [ ] Fully support tkzTabSlope and tkzTab short hand initialisation command.

📄 License

This project is licensed under the MIT License.