Skip to content

README.md

Latest commit

 

History

History
105 lines (77 loc) · 2.48 KB

README.md

File metadata and controls

105 lines (77 loc) · 2.48 KB

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