canvas-table
    TypeScript icon, indicating that this package has built-in type declarations

    0.3.0 • Public • Published

    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

    Sample

    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, // set to false to hide the header
            row: { width: 1, color: "#555" },
            table: { width: 2, color: "#aaa" }
        }
    }

    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
    

    Keywords

    none

    Install

    npm i canvas-table

    DownloadsWeekly Downloads

    100

    Version

    0.3.0

    License

    MIT

    Unpacked Size

    65.7 kB

    Total Files

    15

    Last publish

    Collaborators

    • eliz_kilic