strike-fw-datagrid 0.1.0

package/index.js

@@ -0,0 +1,3 @@
+export { DataGrid } from './data-grid.js';
+export { rowsToCsv } from './lib/grid-csv.js';
+export { cls } from 'strike-fw/ui';

package/lib/controllable.js

@@ -0,0 +1,16 @@
+import { useState } from 'strike-fw/hooks';
+
+/** Controlled or uncontrolled value with onChange. */
+export function useControllable(controlled, defaultValue, onChange) {
+	const isControlled = controlled !== undefined;
+	const [inner, setInner] = useState(
+		isControlled ? controlled : defaultValue
+	);
+	const value = isControlled ? controlled : inner;
+	function setValue(next) {
+		const resolved = typeof next === 'function' ? next(value) : next;
+		if (!isControlled) setInner(resolved);
+		if (onChange) onChange(resolved);
+	}
+	return [value, setValue];
+}

package/lib/grid-columns.js

@@ -0,0 +1,67 @@
+/** Normalize DataGrid column aliases to a single shape. */
+export function normalizeColumn(col) {
+	if (!col || typeof col !== 'object') {
+		throw new Error('column required');
+	}
+	const field = col.field != null ? col.field : col.key;
+	if (field == null || field === '') {
+		throw new Error('column field or key required');
+	}
+	const headerName =
+		col.headerName !== undefined ? col.headerName : col.label;
+	const renderCell =
+		col.renderCell !== undefined ? col.renderCell : col.render;
+	return {
+		...col,
+		field: String(field),
+		headerName,
+		renderCell,
+		type: col.type || 'string',
+		sortable: col.sortable !== false,
+		filterable: col.filterable !== false,
+		editable: !!col.editable
+	};
+}
+
+export function getCellValue(row, col) {
+	if (col.valueGetter) return col.valueGetter(row);
+	return row[col.field];
+}
+
+export function formatCell(row, col) {
+	const value = getCellValue(row, col);
+	if (col.valueFormatter) return col.valueFormatter(value, row);
+	if (col.type === 'boolean') return value ? 'Yes' : 'No';
+	if (col.type === 'date' && value != null && value !== '') {
+		const d = value instanceof Date ? value : new Date(value);
+		if (!Number.isNaN(d.getTime())) return d.toLocaleDateString();
+	}
+	if (value == null) return '';
+	return String(value);
+}
+
+export function defaultAlign(type) {
+	return type === 'number' ? 'right' : 'left';
+}
+
+/** Derived-only columns need valueSetter to be editable. */
+export function isColumnEditable(col) {
+	if (!col.editable) return false;
+	if (col.valueGetter && !col.valueSetter) return false;
+	return true;
+}
+
+/** Clamp a pixel width using column minWidth / maxWidth (defaults 50 / none). */
+export function clampColumnWidth(col, px) {
+	const n = Number(px);
+	const width = Number.isFinite(n) ? n : 50;
+	const min =
+		col && col.minWidth != null && Number.isFinite(Number(col.minWidth))
+			? Number(col.minWidth)
+			: 50;
+	const max =
+		col && col.maxWidth != null && Number.isFinite(Number(col.maxWidth))
+			? Number(col.maxWidth)
+			: Infinity;
+	return Math.max(min, Math.min(max, Math.round(width)));
+}

package/lib/grid-csv.js

@@ -0,0 +1,24 @@
+import { getCellValue } from './grid-columns.js';
+
+function normalizeCol(col) {
+	if (typeof col === 'string') return { field: col, headerName: col };
+	return col;
+}
+
+function escapeCsvField(value) {
+	const s = value == null ? '' : String(value);
+	if (/[",\n\r]/.test(s)) return '"' + s.replace(/"/g, '""') + '"';
+	return s;
+}
+
+export function rowsToCsv(rows, columns) {
+	const cols = columns.map(normalizeCol);
+	const header = cols
+		.map(c => escapeCsvField(c.headerName != null ? c.headerName : c.field))
+		.join(',');
+	const lines = [header];
+	for (const row of rows) {
+		lines.push(cols.map(c => escapeCsvField(getCellValue(row, c))).join(','));
+	}
+	return lines.join('\n');
+}

package/lib/grid-edit.js

@@ -0,0 +1,18 @@
+export function parseByType(type, raw) {
+	if (type === 'number') {
+		if (raw === '' || raw == null) return null;
+		const n = typeof raw === 'number' ? raw : Number(raw);
+		return Number.isFinite(n) ? n : null;
+	}
+	if (type === 'boolean') return !!raw;
+	if (type === 'date') {
+		if (raw == null || raw === '') return null;
+		return raw;
+	}
+	return raw == null ? '' : String(raw);
+}
+
+export function buildUpdatedRow(oldRow, field, value, col) {
+	if (col && col.valueSetter) return col.valueSetter(value, oldRow);
+	return { ...oldRow, [field]: value };
+}

package/lib/grid-filter.js

@@ -0,0 +1,81 @@
+import { getCellValue, formatCell } from './grid-columns.js';
+
+export function applyQuickFilter(rows, columns, query) {
+	const q = query == null ? '' : String(query).trim().toLowerCase();
+	if (!q) return rows;
+	const cols = columns.filter(c => c.filterable !== false);
+	return rows.filter(row =>
+		cols.some(col => {
+			const text = String(formatCell(row, col)).toLowerCase();
+			return text.includes(q);
+		})
+	);
+}
+
+function toNumber(v) {
+	const n = Number(v);
+	return Number.isFinite(n) ? n : NaN;
+}
+
+function toTime(v) {
+	const d = v instanceof Date ? v : new Date(v);
+	const t = d.getTime();
+	return Number.isNaN(t) ? NaN : t;
+}
+
+function compareOrdered(cellValue, filterValue, type) {
+	if (type === 'number') {
+		return toNumber(cellValue) - toNumber(filterValue);
+	}
+	if (type === 'date') {
+		return toTime(cellValue) - toTime(filterValue);
+	}
+	return String(cellValue ?? '').localeCompare(String(filterValue ?? ''));
+}
+
+function equalsValue(cellValue, filterValue, type) {
+	if (type === 'number') {
+		return toNumber(cellValue) === toNumber(filterValue);
+	}
+	if (type === 'date') {
+		return toTime(cellValue) === toTime(filterValue);
+	}
+	if (type === 'boolean') {
+		return !!cellValue === !!filterValue;
+	}
+	return String(cellValue ?? '') === String(filterValue ?? '');
+}
+
+function matchFilter(cellValue, item, type) {
+	const op = item.operator;
+	const fv = item.value;
+	if (op === 'contains') {
+		return String(cellValue ?? '')
+			.toLowerCase()
+			.includes(String(fv ?? '').toLowerCase());
+	}
+	if (op === 'startsWith') {
+		return String(cellValue ?? '')
+			.toLowerCase()
+			.startsWith(String(fv ?? '').toLowerCase());
+	}
+	if (op === 'equals') return equalsValue(cellValue, fv, type);
+	if (op === '>') return compareOrdered(cellValue, fv, type) > 0;
+	if (op === '>=') return compareOrdered(cellValue, fv, type) >= 0;
+	if (op === '<') return compareOrdered(cellValue, fv, type) < 0;
+	if (op === '<=') return compareOrdered(cellValue, fv, type) <= 0;
+	return true;
+}
+
+export function applyFilterModel(rows, columns, filterModel) {
+	const items = filterModel && filterModel.items;
+	if (!items || !items.length) return rows;
+	return rows.filter(row =>
+		items.every(item => {
+			if (!item || !item.field) return true;
+			const col = columns.find(c => c.field === item.field);
+			if (!col) return true;
+			return matchFilter(getCellValue(row, col), item, col.type);
+		})
+	);
+}

package/lib/grid-keyboard.js

@@ -0,0 +1,33 @@
+function clamp(n, min, max) {
+	return Math.max(min, Math.min(n, max));
+}
+
+export function moveFocus(pos, key, rowCount, colCount) {
+	const maxRow = Math.max(0, rowCount - 1);
+	const maxCol = Math.max(0, colCount - 1);
+	let row = pos.row;
+	let col = pos.col;
+	switch (key) {
+		case 'ArrowUp':
+			row -= 1;
+			break;
+		case 'ArrowDown':
+			row += 1;
+			break;
+		case 'ArrowLeft':
+			col -= 1;
+			break;
+		case 'ArrowRight':
+			col += 1;
+			break;
+		case 'Home':
+			col = 0;
+			break;
+		case 'End':
+			col = maxCol;
+			break;
+		default:
+			break;
+	}
+	return { row: clamp(row, 0, maxRow), col: clamp(col, 0, maxCol) };
+}

package/lib/grid-order.js

@@ -0,0 +1,31 @@
+export function moveItem(order, fromId, toIndex) {
+	const list = order ? order.slice() : [];
+	const from = list.indexOf(fromId);
+	if (from < 0) return list;
+	list.splice(from, 1);
+	const idx = Math.max(0, Math.min(toIndex, list.length));
+	list.splice(idx, 0, fromId);
+	return list;
+}
+
+export function applyRowOrder(rows, getRowId, rowOrderModel) {
+	if (!rowOrderModel || !rowOrderModel.length) return rows;
+	const rank = new Map(rowOrderModel.map((id, i) => [id, i]));
+	const tail = rowOrderModel.length;
+	return rows.slice().sort((a, b) => {
+		const ia = rank.has(getRowId(a)) ? rank.get(getRowId(a)) : tail;
+		const ib = rank.has(getRowId(b)) ? rank.get(getRowId(b)) : tail;
+		return ia - ib;
+	});
+}
+
+export function applyColumnOrder(columns, columnOrderModel) {
+	if (!columnOrderModel || !columnOrderModel.length) return columns;
+	const rank = new Map(columnOrderModel.map((field, i) => [field, i]));
+	const tail = columnOrderModel.length;
+	return columns.slice().sort((a, b) => {
+		const ia = rank.has(a.field) ? rank.get(a.field) : tail;
+		const ib = rank.has(b.field) ? rank.get(b.field) : tail;
+		return ia - ib;
+	});
+}

package/lib/grid-paginate.js

@@ -0,0 +1,18 @@
+export function pageCount(rowCount, pageSize) {
+	const size = Math.max(1, pageSize | 0);
+	const n = Math.max(0, rowCount | 0);
+	return Math.max(1, Math.ceil(n / size) || 1);
+}
+
+export function applyPagination(rows, page, pageSize) {
+	const size = Math.max(1, pageSize | 0);
+	const count = pageCount(rows.length, size);
+	const p = Math.max(0, Math.min(count - 1, page | 0));
+	const start = p * size;
+	return rows.slice(start, start + size);
+}
+
+export function clampPage(page, rowCount, pageSize) {
+	const count = pageCount(rowCount, pageSize);
+	return Math.max(0, Math.min(count - 1, page | 0));
+}

package/lib/grid-selection.js

@@ -0,0 +1,35 @@
+export function toggleId(model, id) {
+	const list = model ? model.slice() : [];
+	const i = list.indexOf(id);
+	if (i >= 0) list.splice(i, 1);
+	else list.push(id);
+	return list;
+}
+
+/** Add or remove all visible ids from the selection model. */
+export function setVisibleSelection(model, visibleIds, selected) {
+	const set = new Set(model || []);
+	for (const id of visibleIds) {
+		if (selected) set.add(id);
+		else set.delete(id);
+	}
+	return [...set];
+}
+
+export function selectableVisibleIds(rows, getRowId, isRowSelectable) {
+	return rows
+		.filter(r => !isRowSelectable || isRowSelectable(r))
+		.map(getRowId);
+}
+
+export function selectionState(visibleIds, model) {
+	if (!visibleIds.length) return 'none';
+	const set = new Set(model || []);
+	let n = 0;
+	for (const id of visibleIds) {
+		if (set.has(id)) n++;
+	}
+	if (n === 0) return 'none';
+	if (n === visibleIds.length) return 'all';
+	return 'some';
+}

package/lib/grid-sort.js

@@ -0,0 +1,91 @@
+import { getCellValue } from './grid-columns.js';
+
+function isEmpty(v) {
+	return v == null || v === '';
+}
+
+export function compareByType(a, b, type) {
+	const aEmpty = isEmpty(a);
+	const bEmpty = isEmpty(b);
+	if (aEmpty && bEmpty) return 0;
+	if (aEmpty) return 1;
+	if (bEmpty) return -1;
+	if (type === 'number') {
+		return Number(a) - Number(b);
+	}
+	if (type === 'boolean') {
+		return (a ? 1 : 0) - (b ? 1 : 0);
+	}
+	if (type === 'date') {
+		const ta = new Date(a).getTime();
+		const tb = new Date(b).getTime();
+		return ta - tb;
+	}
+	return String(a).localeCompare(String(b));
+}
+
+function compareRows(rowA, rowB, col, dir) {
+	if (col.sortComparator) {
+		return (
+			dir *
+			col.sortComparator(
+				getCellValue(rowA, col),
+				getCellValue(rowB, col),
+				rowA,
+				rowB
+			)
+		);
+	}
+	return (
+		dir *
+		compareByType(
+			getCellValue(rowA, col),
+			getCellValue(rowB, col),
+			col.type
+		)
+	);
+}
+
+export function applySort(rows, columns, sortModel) {
+	if (!sortModel || !sortModel.length) return rows;
+	const keys = [];
+	for (const item of sortModel) {
+		if (!item || !item.field) continue;
+		const col = columns.find(c => c.field === item.field);
+		if (!col) continue;
+		const dir = item.sort === 'desc' ? -1 : 1;
+		keys.push({ col, dir });
+	}
+	if (!keys.length) return rows;
+	const out = rows.slice();
+	out.sort((rowA, rowB) => {
+		for (const { col, dir } of keys) {
+			const r = compareRows(rowA, rowB, col, dir);
+			if (r !== 0) return r;
+		}
+		return 0;
+	});
+	return out;
+}
+
+/** Cycle none -> asc -> desc -> none for a field. */
+export function cycleSortModel(model, field, opts) {
+	if (opts && opts.append) {
+		const list = model ? model.slice() : [];
+		const i = list.findIndex(item => item.field === field);
+		if (i < 0) return [...list, { field, sort: 'asc' }];
+		const cur = list[i];
+		if (cur.sort === 'asc') {
+			const next = list.slice();
+			next[i] = { field, sort: 'desc' };
+			return next;
+		}
+		const next = list.slice();
+		next.splice(i, 1);
+		return next;
+	}
+	const cur = model && model[0] && model[0].field === field ? model[0] : null;
+	if (!cur) return [{ field, sort: 'asc' }];
+	if (cur.sort === 'asc') return [{ field, sort: 'desc' }];
+	return [];
+}

package/lib/grid-window.js

@@ -0,0 +1,17 @@
+export function windowRange(
+	scrollTop,
+	viewportHeight,
+	rowCount,
+	rowHeight,
+	overscan = 3
+) {
+	if (rowCount <= 0 || rowHeight <= 0) {
+		return { start: 0, end: 0, offsetTop: 0, totalHeight: 0 };
+	}
+	const totalHeight = rowCount * rowHeight;
+	const visibleStart = Math.floor(Math.max(0, scrollTop) / rowHeight);
+	const visibleCount = Math.ceil(Math.max(0, viewportHeight) / rowHeight);
+	const start = Math.max(0, visibleStart - overscan);
+	const end = Math.min(rowCount, visibleStart + visibleCount + overscan);
+	return { start, end, offsetTop: start * rowHeight, totalHeight };
+}

package/package.json

@@ -0,0 +1,50 @@
+{
+  "name": "strike-fw-datagrid",
+  "version": "0.1.0",
+  "description": "DataGrid for Strike; peers on strike-fw and strike-fw-ui",
+  "type": "module",
+  "license": "MIT",
+  "author": "Jahred Love",
+  "engines": {
+    "node": ">=18"
+  },
+  "sideEffects": [
+    "./data-grid.js"
+  ],
+  "main": "./index.js",
+  "types": "./types/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./types/index.d.ts",
+      "import": "./index.js",
+      "default": "./index.js"
+    },
+    "./package.json": "./package.json",
+    "./*": {
+      "types": "./types/*.d.ts",
+      "import": "./*",
+      "default": "./*"
+    }
+  },
+  "files": [
+    "index.js",
+    "data-grid.js",
+    "lib",
+    "types",
+    "LICENSE",
+    "README.md",
+    "CHANGELOG.md"
+  ],
+  "scripts": {
+    "test": "node --test test/*.js"
+  },
+  "peerDependencies": {
+    "strike-fw": ">=0.2.1",
+    "strike-fw-ui": ">=0.2.0"
+  },
+  "devDependencies": {
+    "linkedom": "^0.18.0",
+    "strike-fw": "^0.2.1",
+    "strike-fw-ui": "^0.2.0"
+  }
+}

package/types/data-grid.d.ts

@@ -0,0 +1,80 @@
+export declare function DataGrid(props: {
+	columns: Record<string, unknown>[];
+	rows?: Record<string, unknown>[];
+	getRowId: (row: Record<string, unknown>) => string | number;
+	processRowUpdate?: (
+		newRow: Record<string, unknown>,
+		oldRow: Record<string, unknown>
+	) => Record<string, unknown> | Promise<Record<string, unknown>>;
+	onProcessRowUpdateError?: (err: unknown) => void;
+	caption?: unknown;
+	class?: string;
+	density?: 'sm' | 'md' | string;
+	striped?: boolean | 'rows' | 'columns' | 'both';
+	stripedRowScope?: 'page' | 'dataset';
+	headerShade?: boolean | 'muted' | 'none';
+	stickyHeader?: boolean;
+	getRowClassName?: (row: Record<string, unknown>) => string | null | undefined;
+	checkboxSelection?: boolean;
+	isRowSelectable?: (row: Record<string, unknown>) => boolean;
+	disableColumnSorting?: boolean;
+	disableQuickFilter?: boolean;
+	hideFooter?: boolean;
+	loading?: boolean;
+	loadingOverlay?: unknown;
+	empty?: unknown;
+	toolbar?: unknown;
+	quickFilterPlaceholder?: string;
+	pageSizeOptions?: number[];
+	sortingMode?: 'client' | 'server';
+	filterMode?: 'client' | 'server';
+	paginationMode?: 'client' | 'server';
+	rowCount?: number;
+	sortModel?: { field: string; sort: 'asc' | 'desc' }[];
+	defaultSortModel?: { field: string; sort: 'asc' | 'desc' }[];
+	onSortModelChange?: (model: { field: string; sort: 'asc' | 'desc' }[]) => void;
+	quickFilterValue?: string;
+	defaultQuickFilterValue?: string;
+	onQuickFilterValueChange?: (value: string) => void;
+	filterModel?: {
+		items: Array<{ field: string; operator: string; value?: unknown }>;
+	};
+	defaultFilterModel?: {
+		items: Array<{ field: string; operator: string; value?: unknown }>;
+	};
+	onFilterModelChange?: (model: {
+		items: Array<{ field: string; operator: string; value?: unknown }>;
+	}) => void;
+	paginationModel?: { page: number; pageSize: number };
+	defaultPaginationModel?: { page: number; pageSize: number };
+	onPaginationModelChange?: (model: { page: number; pageSize: number }) => void;
+	selectionModel?: Array<string | number>;
+	defaultSelectionModel?: Array<string | number>;
+	onSelectionModelChange?: (model: Array<string | number>) => void;
+	columnVisibilityModel?: Record<string, boolean>;
+	defaultColumnVisibilityModel?: Record<string, boolean>;
+	onColumnVisibilityModelChange?: (model: Record<string, boolean>) => void;
+	editCell?: { id: string | number; field: string | null } | null;
+	defaultEditCell?: { id: string | number; field: string | null } | null;
+	onEditCellChange?: (
+		cell: { id: string | number; field: string | null } | null
+	) => void;
+	editMode?: 'cell' | 'row';
+	editOnClick?: boolean;
+	enableGridKeyboard?: boolean;
+	rowOrderModel?: Array<string | number>;
+	defaultRowOrderModel?: Array<string | number>;
+	onRowOrderChange?: (model: Array<string | number>) => void;
+	columnOrderModel?: string[];
+	defaultColumnOrderModel?: string[];
+	onColumnOrderChange?: (model: string[]) => void;
+	columnWidthModel?: Record<string, number>;
+	defaultColumnWidthModel?: Record<string, number>;
+	onColumnWidthChange?: (model: Record<string, number>) => void;
+	disableColumnResize?: boolean;
+	rowReorderMode?: 'client' | 'server';
+	virtualize?: boolean;
+	getRowHeight?: number;
+	onRowClick?: (row: Record<string, unknown>, ev: unknown) => void;
+	[key: string]: unknown;
+}): unknown;

package/types/index.d.ts

@@ -0,0 +1,7 @@
+export { DataGrid } from './data-grid.js';
+export { cls } from 'strike-fw/ui';
+
+export declare function rowsToCsv(
+	rows: Record<string, unknown>[],
+	columns: Array<{ field: string; headerName?: string }>
+): string;