test-component-library

A simple HTML component library for server-side rendered Node.js applications.

Components

DataTable

A configurable HTML table component with sorting indicators, striping, hover effects, and custom cell rendering.

const { DataTable } = require('test-component-library');

const html = DataTable({
  columns: [
    { key: 'name', label: 'Name', sortable: true },
    { key: 'email', label: 'Email' },
    { key: 'role', label: 'Role' },
  ],
  rows: [
    { name: 'Alice', email: 'alice@example.com', role: 'Admin' },
    { name: 'Bob', email: 'bob@example.com', role: 'User' },
  ],
  striped: true,
  hoverable: true,
  bordered: true,
  sort: { key: 'name', order: 'ASC' },
  emptyMessage: 'No records found',
});

// Include styles
const css = DataTable.getStyles();

Options

Option	Type	Default	Description
columns	Array<{key, label, sortable?, className?}>	[]	Column definitions
rows	Array<Object>	[]	Row data
className	string	''	Additional CSS class
id	string	''	HTML id attribute
striped	boolean	true	Alternate row shading
hoverable	boolean	true	Row hover highlight
bordered	boolean	true	Cell borders
compact	boolean	false	Compact padding
emptyMessage	string	'No data available'	Empty state message
sort	{key, order}	null	Current sort state
cellRenderer	Function	null	Custom cell renderer

Badge

A small label/tag component.

const { Badge } = require('test-component-library');

const html = Badge({ text: 'Active', variant: 'success' });

Variants: default, primary, success, warning, danger

Card

A content card with optional title, body, and footer.

const { Card } = require('test-component-library');

const html = Card({
  title: 'Summary',
  body: '<p>Card content here</p>',
  footer: 'Last updated: today',
});

Styling

Each component exposes a getStyles() static method that returns the CSS needed for that component. Include the CSS in your page's <style> tag or stylesheet.

const { DataTable, Badge, Card } = require('test-component-library');

const allStyles = [
  DataTable.getStyles(),
  Badge.getStyles(),
  Card.getStyles(),
].join('\n');

Installation

npm install clivingston-cognition/test-component-library

Testing

npm test

License

MIT