canvas-table
v0.3.0
Published
Fast table implementation in Canvas
Downloads
498
Readme
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
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, // 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