import 'bit-grid-component' import BitGrid from 'bit-grid-component' // Create grid with initial data and labels const grid = new BitGrid({ 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`), onChange: (data) => console.log('Data changed:', data) }); // IMPORTANT: // Must append to DOM document.body.appendChild(grid); // Listen for changes grid.addEventListener('dataChange', (e) => { console.log('Data changed:', e.detail); });
<!-- Declarative --> <bit-grid></bit-grid> <script> const grid = document.querySelector('bit-grid'); grid.update({ 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') }); // Listen for changes grid.addEventListener('dataChange', (e) => { console.log('Data changed:', e.detail); }); </script>
<!-- Default: 5x5 grid --> <div id="grid-container"></div> <script type="module"> import 'bit-grid-component' import BitGrid from 'bit-grid-component' // Default grid (5x5 with auto-generated labels) const defaultGrid = new BitGrid() document.getElementById('grid-container').appendChild(defaultGrid) // Or create with custom options const customGrid = new BitGrid({ rowLabels: ['Row 1', 'Row 2', 'Row 3'], colLabels: ['Col 1', 'Col 2', 'Col 3', 'Col 4'] }) document.getElementById('grid-container').appendChild(customGrid) </script>
import 'bit-grid-component' import BitGrid from 'bit-grid-component' // Create and mount grid const grid = new BitGrid(); document.getElementById('container').appendChild(grid); // Get grid data const data = grid.getData(); // Update data and labels grid.update({ data: booleanArray, rowLabels: ['Row 1', 'Row 2', ...], colLabels: ['Col 1', 'Col 2', ...] }); // Reset to empty grid grid.reset();
bit-grid { --grid-primary: #3b82f6; --grid-bg: #ffffff; --grid-cell-bg: #f8fafc; --grid-text: #1f2937; --grid-text-muted: #64748b; --grid-header-bg: #f1f5f9; --grid-hover-bg: #e2e8f0; --grid-cell-size: 28px; --grid-header-width: 80px; --grid-cell-spacing: 4px; --grid-selection-bg: rgba(59, 130, 246, 0.25); --grid-selection-active-bg: rgba(59, 130, 246, 0.7); --grid-cell-radius: 8px; --grid-radius: 12px; }
