BitGrid Component

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;
}