Framework-agnostic web component for boolean matrices
edit and display 2D boolean arrays
with interactive cell selection
edit and display 2D boolean arrays
with interactive cell selection
Tip
Example Sources are under ./examples/
- Web Component:
<bit-grid>for 2D boolean matrices - Zero-deps ESM: single-file module, framework-agnostic
- Selection: click + drag ranges with debounced updates
- Events:
dataChangeevent with 2D boolean array - API:
update({ data, rowLabels, colLabels, onChange, debounceMs }) - Theming: CSS custom properties for colors and spacing
- Examples: Vanilla, React, Vue, Angular, CDN
npm install bit-grid-component<!DOCTYPE html> <html> <head> <script type="module">import 'bit-grid-component'</script> </head> <body> <bit-grid></bit-grid> <script> const grid = document.querySelector('bit-grid'); grid.addEventListener('dataChange', (e) => { console.log('Data changed:', e.detail); }); </script> </body> </html><bit-grid></bit-grid> <script> const grid = document.querySelector('bit-grid'); grid.update({ data: Array(7).fill(null).map(() => Array(24).fill(false)), rowLabels: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'], colLabels: Array.from({length: 24}, (_, i) => `${i}:00`) }); </script>import 'bit-grid-component'; import BitGrid from 'bit-grid-component'; const grid = new BitGrid({ data: Array(31).fill(null).map(() => Array(24).fill(false)), rowLabels: Array.from({length: 31}, (_, i) => `Day ${i + 1}`), colLabels: Array.from({length: 24}, (_, i) => `${i}h`) }); // ⚠️ Must append to DOM document.getElementById('container').appendChild(grid);const grid = new BitGrid({ data: boolean[][], // Optional: 2D boolean array rowLabels: string[], // Optional: Array of row labels colLabels: string[], // Optional: Array of column labels onChange: function, // Optional: Callback for data changes debounceMs: number // Optional: Debounce delay (default: 100ms) });Inference Priority:
- If both
rowLabelsandcolLabelsprovided → data generated automatically - If
dataprovided → labels generated if not provided - Default → 5x5 grid with auto-generated labels
// Get current data const data = grid.getData(); // Update data and labels (infers dimensions) grid.update({ data: newData, rowLabels: [...], colLabels: [...] }); // Convenience methods grid.setLabels(['Row1', 'Row2'], ['Col1', 'Col2']); grid.setData(booleanArray); grid.setCell(row, col, true); grid.getCell(row, col); grid.toggleCell(row, col); grid.fill(false); // Fill all cells with value // Reset to empty grid grid.reset();grid.addEventListener('dataChange', (e) => { const data = e.detail; // 2D boolean array console.log('Grid data changed:', data); });bit-grid { --grid-primary: #3b82f6; /* Active cell color */ --grid-bg: #ffffff; /* Background color */ --grid-cell-bg: #f8fafc; /* Cell background */ --grid-text: #1f2937; /* Text color */ --grid-text-muted: #6b7280; /* Muted text color */ --grid-header-bg: #f1f5f9; /* Header background */ --grid-hover-bg: #e2e8f0; /* Hover background */ --grid-selection-bg: rgba(59, 130, 246, 0.25); /* Selection background */ --grid-selection-active-bg: rgba(59, 130, 246, 0.7); /* Active selection */ --grid-cell-size: 28px; /* Cell size */ --grid-header-width: 80px; /* Header width */ --grid-cell-spacing: 4px; /* Cell spacing */ --grid-cell-radius: 8px; /* Cell border radius */ }<bit-grid></bit-grid> <script> const grid = document.querySelector('bit-grid'); // Just provide labels - data auto-generated grid.update({ rowLabels: Array.from({length: 31}, (_, i) => `Day ${i + 1}`), colLabels: Array.from({length: 24}, (_, i) => `${i}h`) }); grid.addEventListener('dataChange', (e) => { const activeHours = e.detail.flat().filter(cell => cell).length; console.log(`Active hours: ${activeHours}`); }); </script>import 'bit-grid-component'; import { useEffect, useRef } from 'react'; function AttendanceGrid({ data, onDataChange }) { const gridRef = useRef(); useEffect(() => { if (gridRef.current) { // Labels-first approach gridRef.current.update({ rowLabels: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri'], colLabels: Array.from({length: 24}, (_, i) => `${i}:00`) }); // Then set data if provided if (data) { gridRef.current.setData(data); } gridRef.current.addEventListener('dataChange', onDataChange); } }, [data, onDataChange]); return <bit-grid ref={gridRef} />; }