{"id":30770433,"url":"https://github.com/metaory/bit-grid-component","last_synced_at":"2026-02-24T01:31:38.955Z","repository":{"id":307142983,"uuid":"1028334841","full_name":"metaory/bit-grid-component","owner":"metaory","description":"Framework-agnostic web component for boolean matrices","archived":false,"fork":false,"pushed_at":"2025-12-02T09:55:50.000Z","size":15559,"stargazers_count":6,"open_issues_count":1,"forks_count":1,"subscribers_count":0,"default_branch":"master","last_synced_at":"2025-12-05T05:50:18.044Z","etag":null,"topics":["data-input","grid","grid-component","npm","pin","vanilla-javascript","web-components"],"latest_commit_sha":null,"homepage":"https://metaory.github.io/bit-grid-component/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/metaory.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2025-07-29T11:28:51.000Z","updated_at":"2025-12-02T09:55:54.000Z","dependencies_parsed_at":"2025-07-29T19:02:23.369Z","dependency_job_id":"ad1f7007-de14-4d2a-9546-b2f1a913c2cc","html_url":"https://github.com/metaory/bit-grid-component","commit_stats":null,"previous_names":["metaory/data-grid-selector","metaory/bit-grid-component"],"tags_count":1,"template":false,"template_full_name":null,"purl":"pkg:github/metaory/bit-grid-component","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/metaory%2Fbit-grid-component","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/metaory%2Fbit-grid-component/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/metaory%2Fbit-grid-component/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/metaory%2Fbit-grid-component/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/metaory","download_url":"https://codeload.github.com/metaory/bit-grid-component/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/metaory%2Fbit-grid-component/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":29766285,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-02-24T01:28:30.166Z","status":"ssl_error","status_checked_at":"2026-02-24T01:28:27.518Z","response_time":90,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.5:443 state=error: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["data-input","grid","grid-component","npm","pin","vanilla-javascript","web-components"],"created_at":"2025-09-04T23:05:10.815Z","updated_at":"2026-02-24T01:31:38.949Z","avatar_url":"https://github.com/metaory.png","language":"JavaScript","funding_links":[],"categories":["JavaScript"],"sub_categories":[],"readme":"\u003cdiv align=\"center\"\u003e\n  \u003ch1\u003e\n    \u003cimg valign=\"middle\" src=\".github/assets/logo.png\" alt=\"logo\" height=\"48\" /\u003e\n    BitGrid Component\n  \u003c/h1\u003e\n  \u003cstrong\u003e\n    Framework-agnostic web component for boolean matrices\n  \u003c/strong\u003e\n  \u003cbr\u003e\n  edit and display 2D boolean arrays\n  \u003cbr\u003e\n  with interactive cell selection\n  \u003cbr\u003e\n  \u003cbr\u003e\n  \u003cimg valign=\"middle\" src=\".github/assets/screenshot.png\" alt=\"bitgrid\" width=\"80%\" /\u003e\n\u003c/div\u003e\n\n## Demo and Documentations\n\n\u003cul\u003e\n  \u003cli\u003e\n    \u003cimg valign=\"middle\" width=\"34\" src=\".github/assets/logo.svg\" /\u003e\n    \u003ca href=\"https://metaory.github.io/bit-grid-component\" target=\"_blank\"\u003e\n      metaory.github.io/bit-grid-component\n    \u003c/a\u003e\n  \u003c/li\u003e\n\u003c/ul\u003e\n\n## Framework Usage Example\n\n\u003cul\u003e\n  \u003cli\u003e\n    \u003cimg valign=\"middle\" src=\".github/assets/unpkg.svg\" /\u003e\n    \u003ca href=\"https://metaory.github.io/bit-grid-component/examples/cdn/\" target=\"_blank\"\u003e\n      /examples/\u003cb\u003ecdn\u003c/b\u003e\n    \u003c/a\u003e\n  \u003c/li\u003e\n  \u003cli\u003e\n    \u003cimg valign=\"middle\" src=\".github/assets/javascript.svg\" /\u003e\n    \u003ca href=\"https://metaory.github.io/bit-grid-component/examples/vite-vanilla/\" target=\"_blank\"\u003e\n      /examples/vite-\u003cb\u003evanilla\u003c/b\u003e\n    \u003c/a\u003e\n  \u003c/li\u003e\n  \u003cli\u003e\n    \u003cimg valign=\"middle\" src=\".github/assets/react.svg\" /\u003e\n    \u003ca href=\"https://metaory.github.io/bit-grid-component/examples/vite-react/\" target=\"_blank\"\u003e\n      /examples/vite-\u003cb\u003ereact\u003c/b\u003e\n    \u003c/a\u003e\n  \u003c/li\u003e\n  \u003cli\u003e\n    \u003cimg valign=\"middle\" src=\".github/assets/vue.svg\" /\u003e\n    \u003ca href=\"https://metaory.github.io/bit-grid-component/examples/vite-vue/\" target=\"_blank\"\u003e\n      /examples/vite-\u003cb\u003evue\u003c/b\u003e\n    \u003c/a\u003e\n  \u003c/li\u003e\n  \u003cli\u003e\n    \u003cimg valign=\"middle\" src=\".github/assets/angular.svg\" /\u003e\n    \u003ca href=\"https://metaory.github.io/bit-grid-component/examples/vite-angular/\" target=\"_blank\"\u003e\n      /examples/vite-\u003cb\u003eangular\u003c/b\u003e\n    \u003c/a\u003e\n  \u003c/li\u003e\n\u003c/ul\u003e\n\n\u003e [!TIP]\n\u003e Example Sources are under [./examples/](https://github.com/metaory/bit-grid-component/tree/master/examples)\n\n\u003cdiv align=\"center\"\u003e\n  \u003cimg valign=\"middle\" src=\".github/assets/screencast.gif\" alt=\"bitgrid\" width=\"70%\" /\u003e\n\u003c/div\u003e\n\n## Features\n\n- **Web Component**: `\u003cbit-grid\u003e` for 2D boolean matrices\n- **Zero-deps ESM**: single-file module, framework-agnostic\n- **Selection**: click + drag ranges with debounced updates\n- **Events**: `dataChange` event with 2D boolean array\n- **API**: `update({ data, rowLabels, colLabels, onChange, debounceMs })`\n- **Theming**: CSS custom properties for colors and spacing\n- **Examples**: Vanilla, React, Vue, Angular, CDN\n\n## Installation\n\n```bash\nnpm install bit-grid-component\n```\n\n## Usage\n\n### Declarative HTML\n\n```html\n\u003c!DOCTYPE html\u003e\n\u003chtml\u003e\n\u003chead\u003e\n  \u003cscript type=\"module\"\u003eimport 'bit-grid-component'\u003c/script\u003e\n\u003c/head\u003e\n\u003cbody\u003e\n  \u003cbit-grid\u003e\u003c/bit-grid\u003e\n  \n  \u003cscript\u003e\n    const grid = document.querySelector('bit-grid');\n    grid.addEventListener('dataChange', (e) =\u003e {\n      console.log('Data changed:', e.detail);\n    });\n  \u003c/script\u003e\n\u003c/body\u003e\n\u003c/html\u003e\n```\n\n### Imperative Update\n\n```html\n\u003cbit-grid\u003e\u003c/bit-grid\u003e\n\n\u003cscript\u003e\n  const grid = document.querySelector('bit-grid');\n  \n  grid.update({\n    data: Array(7).fill(null).map(() =\u003e Array(24).fill(false)),\n    rowLabels: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],\n    colLabels: Array.from({length: 24}, (_, i) =\u003e `${i}:00`)\n  });\n\u003c/script\u003e\n```\n\n### JavaScript Constructor\n\n```javascript\nimport 'bit-grid-component';\nimport BitGrid from 'bit-grid-component';\n\nconst grid = new BitGrid({\n  data: Array(31).fill(null).map(() =\u003e Array(24).fill(false)),\n  rowLabels: Array.from({length: 31}, (_, i) =\u003e `Day ${i + 1}`),\n  colLabels: Array.from({length: 24}, (_, i) =\u003e `${i}h`)\n});\n\n// ⚠️ Must append to DOM\ndocument.getElementById('container').appendChild(grid);\n```\n\n## API\n\n### Constructor Options\n\n```javascript\nconst grid = new BitGrid({\n  data: boolean[][],           // Optional: 2D boolean array\n  rowLabels: string[],          // Optional: Array of row labels\n  colLabels: string[],          // Optional: Array of column labels\n  onChange: function,           // Optional: Callback for data changes\n  debounceMs: number           // Optional: Debounce delay (default: 100ms)\n});\n```\n\n**Inference Priority:**\n1. If both `rowLabels` and `colLabels` provided → data generated automatically\n2. If `data` provided → labels generated if not provided\n3. Default → 5x5 grid with auto-generated labels\n\n### Methods\n\n```javascript\n// Get current data\nconst data = grid.getData();\n\n// Update data and labels (infers dimensions)\ngrid.update({ data: newData, rowLabels: [...], colLabels: [...] });\n\n// Convenience methods\ngrid.setLabels(['Row1', 'Row2'], ['Col1', 'Col2']);\ngrid.setData(booleanArray, silent);    // silent: skip dataChange event\ngrid.setCell(row, col, true, silent);  // silent: skip dataChange event\ngrid.getCell(row, col);\ngrid.toggleCell(row, col, silent);     // silent: skip dataChange event\ngrid.fill(false, silent);              // silent: skip dataChange event\n\n// Reset to empty grid\ngrid.reset();\n```\n\nThe `silent` parameter (default: `false`) prevents `dataChange` events from firing. Useful for programmatic data loading without triggering change handlers.\n\n### Events\n\n```javascript\n// Fires when grid is fully initialized and ready\ngrid.addEventListener('ready', () =\u003e {\n  console.log('Grid ready for interaction');\n});\n\n// Fires when user changes cell values\ngrid.addEventListener('dataChange', (e) =\u003e {\n  const data = e.detail; // 2D boolean array\n  console.log('Grid data changed:', data);\n});\n```\n\n## CSS Customization\n\n```css\nbit-grid {\n  --grid-primary: #3b82f6;                    /* Active cell color */\n  --grid-bg: #ffffff;                         /* Background color */\n  --grid-cell-bg: #f8fafc;                    /* Cell background */\n  --grid-text: #1f2937;                       /* Text color */\n  --grid-text-muted: #6b7280;                 /* Muted text color */\n  --grid-header-bg: #f1f5f9;                  /* Header background */\n  --grid-hover-bg: #e2e8f0;                   /* Hover background */\n  --grid-selection-bg: rgba(59, 130, 246, 0.25); /* Selection background */\n  --grid-selection-active-bg: rgba(59, 130, 246, 0.7); /* Active selection */\n  --grid-cell-size: 28px;                     /* Cell size */\n  --grid-header-width: 80px;                  /* Header width */\n  --grid-cell-spacing: 4px;                   /* Cell spacing */\n  --grid-cell-radius: 8px;                    /* Cell border radius */\n}\n```\n\n## Examples\n\n### Monthly Schedule\n\n```html\n\u003cbit-grid\u003e\u003c/bit-grid\u003e\n\n\u003cscript\u003e\n  const grid = document.querySelector('bit-grid');\n  \n  // Just provide labels - data auto-generated\n  grid.update({\n    rowLabels: Array.from({length: 31}, (_, i) =\u003e `Day ${i + 1}`),\n    colLabels: Array.from({length: 24}, (_, i) =\u003e `${i}h`)\n  });\n  \n  grid.addEventListener('dataChange', (e) =\u003e {\n    const activeHours = e.detail.flat().filter(cell =\u003e cell).length;\n    console.log(`Active hours: ${activeHours}`);\n  });\n\u003c/script\u003e\n```\n\n### React\n\n```jsx\nimport 'bit-grid-component';\nimport { useEffect, useRef } from 'react';\n\nfunction AttendanceGrid({ data, onDataChange }) {\n  const gridRef = useRef();\n  \n  useEffect(() =\u003e {\n    if (gridRef.current) {\n      // Labels-first approach\n      gridRef.current.update({\n        rowLabels: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri'],\n        colLabels: Array.from({length: 24}, (_, i) =\u003e `${i}:00`)\n      });\n      \n      // Then set data if provided\n      if (data) {\n        gridRef.current.setData(data);\n      }\n      \n      gridRef.current.addEventListener('dataChange', onDataChange);\n    }\n  }, [data, onDataChange]);\n  \n  return \u003cbit-grid ref={gridRef} /\u003e;\n}\n```\n\n## License\n\n[MIT](LICENSE)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmetaory%2Fbit-grid-component","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmetaory%2Fbit-grid-component","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmetaory%2Fbit-grid-component/lists"}