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.
npm i canvas-table
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
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();
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" } };
Initialize your environment with
npm i
To build:
npm run build
To run the tests:
npm run test