Canvas Table

Customizable, small and fast table implementation in Canvas with string truncating support. Supports both browser HTML5 canvas and node-canvas Main usecase for this package is to use it to create table images in NodeJS.

Demo

CodeSandbox/canvas-table

Screenshots

Installation

npm i canvas-table

Usage

Usage in NodeJS

import { CanvasTable, CTConfig } from "canvas-table";
import { createCanvas } from "canvas";

const canvas = createCanvas(640, 250);
const config: CTConfig = { columns, data };
const ct = new CanvasTable(canvas, config);
await ct.generateTable();
await ct.renderToFile("test-table.png"); // You can get the buffer with renderToBuffer

Usage in Browser

import { CanvasTable, CTConfig } from "canvas-table";

const canvas = document.getElementById("#canvas");
const config: CTConfig = { columns, data };
const ct = new CanvasTable(canvas, config);
await ct.generateTable();
// const blob = await ct.renderToBlob();

Configuration

config (required)

const config: CTConfig =
{
    data: CTData;
    columns: CTColumn[];
    events?: CTEvents;
    options?: CTOptions;
};

data (required)

const data: CTData = [
    ["cell 1", "cell 2", "cell 3"], // row 1
    ["cell 1", "cell 2", { value: "cell 3", color: "#990000" }] // row 2
];

columns (required)

const columns: CTColumns = [
    {title: "Column 1"},
    {title: "Column 2", options: { textAlign: "center" }},
    {
        title: "Column 3",
        options: {
            textAlign: "right",
            fontSize: 14,
            fontWeight: "bold",
            fontFamily: "serif",
            color: "#444444",
            lineHeight: 1
        }
    }
];

options (optional)

const options: CTOptions = {
    borders: {
        column: undefined,
        header: undefined,
        row: { width: 1, color: "#555" },
        table: { width: 2, color: "#aaa" }
    },
    header: { }, // set to false to hide the header
}

events (optional)

const events: CTEvents =
{
    cellCreated: (canvas, x, y, data: { cellIndex, rowIndex }) => console.log({ canvas, x, y, cellIndex, rowIndex }),
    fadersCreated: (canvas, x, y) => console.log({ canvas, x, y }),
    headerCreated: (canvas, x, y) => console.log({ canvas, x, y }),
    rowCreated: (canvas, x, y, { rowIndex }) => console.log({ canvas, x, y, rowIndex }),
    rowsCreated: (canvas, x, y) => console.log({ canvas, x, y }),
    subtitleCreated: (canvas, x, y) => console.log({ canvas, x, y }),
    tableBordersCreated: (canvas, x, y) => console.log({ canvas, x, y }),
    tableCreated: (canvas, x, y) => console.log({ canvas, x, y }),
    titleCreated: (canvas, x, y) => console.log({ canvas, x, y }),
};

defaultOptions

const defaultOptions: CTInternalOptions = {
    borders: {
        header: { color: "#ccc", width: 1 }
    },
    header: {
        fontSize: 12,
        fontWeight: "bold",
        fontFamily: "sans-serif",
        color: "#666666",
        lineHeight: 1.2,
        textAlign: "left",
        padding: 5
    },
    cell: {
        fontSize: 12,
        fontWeight: "normal",
        fontFamily: "sans-serif",
        color: "#444444",
        lineHeight: 1.2,
        padding: 5,
        textAlign: "left"
    },
    background: "#ffffff",
    devicePixelRatio: 2,
    fader: {
        right: true,
        size: 40,
        bottom: true
    },
    fit: false,
    padding: {
        bottom: 20,
        left: 20,
        right: 20,
        top: 20
    },
    subtitle: {
        fontSize: 14,
        fontWeight: "normal",
        fontFamily: "sans-serif",
        color: "#888888",
        lineHeight: 1,
        multiline: false,
        // text: "",
        textAlign: "center"
    },
    title: {
        fontSize: 14,
        fontWeight: "bold",
        fontFamily: "sans-serif",
        color: "#666666",
        lineHeight: 1,
        multiline: false,
        // text: "",
        textAlign: "center"
    }
};

Development

Initialize your environment with

npm i

To build:

npm run build

To run the tests:

npm run test