{"_id":"@aarongustafson/table-modifiable","_rev":"3-2791cfa066e3154b3c7985ef14dc2163","name":"@aarongustafson/table-modifiable","dist-tags":{"latest":"1.1.0"},"versions":{"0.0.1":{"name":"@aarongustafson/table-modifiable","version":"0.0.1","keywords":["html","custom element","web component"],"author":{"url":"https://www.aaron-gustafson.com/","name":"Aaron Gustafson","email":"aaron@easy-designs.net"},"license":"MIT","_id":"@aarongustafson/table-modifiable@0.0.1","maintainers":[{"name":"aarongustafson","email":"aaron@easy-designs.net"}],"homepage":"https://github.com/aarongustafson/table-modifiable#readme","bugs":{"url":"https://github.com/aarongustafson/table-modifiable/issues"},"dist":{"shasum":"90b84b5d863912ec50e0e8a42ba1e0280bef47a7","tarball":"https://registry.npmjs.org/@aarongustafson/table-modifiable/-/table-modifiable-0.0.1.tgz","fileCount":7,"integrity":"sha512-heDveh6XBATAFNhObxLixqHCATKFb2K4C+Lj3waofbZq+EfHDK2AWyqizkIzXVsZEXDAYOIFZr7KQeN3ldMuJQ==","signatures":[{"sig":"MEYCIQD+XnFMH1GCUwcYVSjkdICviLPFZ1ELoPi2BYS6TLHANgIhAKxi0+m4gHC3QhaG4SZbA40j/V8kafRYKsT5gP8fa/2z","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":21583},"main":"index.js","type":"module","module":"table-modifiable.js","engines":{"node":">=14.0.0"},"exports":{".":{"import":"./index.js"},"./define.js":{"import":"./define.js"},"./table-modifiable.js":{"import":"./table-modifiable.js"},"./custom-elements.json":"./custom-elements.json"},"gitHead":"f92374414d7d8612ad8cc8997a4a76923bcad210","scripts":{"lint":"npm run lint:eslint && npm run lint:prettier","test":"vitest","setup":"node scripts/setup.js","format":"npm run format:eslint && npm run format:prettier","test:ui":"vitest --ui","version":"node scripts/update-demo-versions.js && git add demo/esm.html","test:run":"vitest run","lint:eslint":"eslint .","format:eslint":"eslint . --fix","lint:prettier":"prettier \"**/*.js\" --check --ignore-path .gitignore","test:coverage":"vitest run --coverage","format:prettier":"prettier \"**/*.js\" --write --ignore-path .gitignore"},"_npmUser":{"name":"aarongustafson","email":"aaron@easy-designs.net"},"repository":{"url":"git+https://github.com/aarongustafson/table-modifiable.git","type":"git"},"_npmVersion":"11.6.2","description":"A web component that enables users to hide & show columns on an HTML table.","directories":{},"_nodeVersion":"24.11.1","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"customElements":"custom-elements.json","devDependencies":{"eslint":"^9.39.1","vitest":"^4.0.10","prettier":"^3.6.2","happy-dom":"^20.0.10","@vitest/ui":"^4.0.10","@vitest/coverage-v8":"^4.0.10","@testing-library/dom":"^10.4.1","@open-wc/eslint-config":"^13.0.0","eslint-config-prettier":"^10.1.8","@testing-library/user-event":"^14.6.1"},"_npmOperationalInternal":{"tmp":"tmp/table-modifiable_0.0.1_1765324414426_0.9769432516001444","host":"s3://npm-registry-packages-npm-production"}},"1.0.0":{"name":"@aarongustafson/table-modifiable","version":"1.0.0","keywords":["html","custom element","web component"],"author":{"url":"https://www.aaron-gustafson.com/","name":"Aaron Gustafson","email":"aaron@easy-designs.net"},"license":"MIT","_id":"@aarongustafson/table-modifiable@1.0.0","maintainers":[{"name":"aarongustafson","email":"aaron@easy-designs.net"}],"homepage":"https://github.com/aarongustafson/table-modifiable#readme","bugs":{"url":"https://github.com/aarongustafson/table-modifiable/issues"},"dist":{"shasum":"846b5b868758f2095258371898435f845e163c0a","tarball":"https://registry.npmjs.org/@aarongustafson/table-modifiable/-/table-modifiable-1.0.0.tgz","fileCount":7,"integrity":"sha512-nfp5WLKLIyjj962kPtEqxloBIsA1qODmMFnUEUcXZ4U4BunZITLVF6BtroL4UkgRC/qU66vqEisyBt5kk5wr6g==","signatures":[{"sig":"MEUCICBRcymJab0G6nvtSoVNOhYJpSAi8tBnzruK2DEfRXMCAiEAxEd7gPP0r+N3eXu9G7OuOeNwX0Fd2be8VNjCnVROW1Q=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"attestations":{"url":"https://registry.npmjs.org/-/npm/v1/attestations/@aarongustafson%2ftable-modifiable@1.0.0","provenance":{"predicateType":"https://slsa.dev/provenance/v1"}},"unpackedSize":21583},"main":"index.js","type":"module","module":"table-modifiable.js","engines":{"node":">=14.0.0"},"exports":{".":{"import":"./index.js"},"./define.js":{"import":"./define.js"},"./table-modifiable.js":{"import":"./table-modifiable.js"},"./custom-elements.json":"./custom-elements.json"},"gitHead":"03f84f0b33616aad30374cf6d0acfc9c6e7d0079","scripts":{"lint":"npm run lint:eslint && npm run lint:prettier","test":"vitest","setup":"node scripts/setup.js","format":"npm run format:eslint && npm run format:prettier","test:ui":"vitest --ui","version":"node scripts/update-demo-versions.js && git add demo/esm.html","test:run":"vitest run","lint:eslint":"eslint .","format:eslint":"eslint . --fix","lint:prettier":"prettier \"**/*.js\" --check --ignore-path .gitignore","test:coverage":"vitest run --coverage","format:prettier":"prettier \"**/*.js\" --write --ignore-path .gitignore"},"_npmUser":{"name":"GitHub Actions","email":"npm-oidc-no-reply@github.com","trustedPublisher":{"id":"github","oidcConfigId":"oidc:bc097d91-2444-40fa-8c1d-624fc5c2c7a8"}},"repository":{"url":"git+https://github.com/aarongustafson/table-modifiable.git","type":"git"},"_npmVersion":"11.7.0","description":"A web component that enables users to hide & show columns on an HTML table.","directories":{},"_nodeVersion":"20.19.6","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"customElements":"custom-elements.json","devDependencies":{"eslint":"^9.39.1","vitest":"^4.0.10","prettier":"^3.6.2","happy-dom":"^20.0.10","@vitest/ui":"^4.0.10","@vitest/coverage-v8":"^4.0.10","@testing-library/dom":"^10.4.1","@open-wc/eslint-config":"^13.0.0","eslint-config-prettier":"^10.1.8","@testing-library/user-event":"^14.6.1"},"_npmOperationalInternal":{"tmp":"tmp/table-modifiable_1.0.0_1765324496970_0.8841036744666548","host":"s3://npm-registry-packages-npm-production"}},"1.1.0":{"name":"@aarongustafson/table-modifiable","version":"1.1.0","description":"A web component that enables users to hide & show columns on an HTML table.","keywords":["html","custom element","web component"],"author":{"name":"Aaron Gustafson","email":"aaron@easy-designs.net","url":"https://www.aaron-gustafson.com/"},"license":"MIT","homepage":"https://github.com/aarongustafson/table-modifiable#readme","repository":{"type":"git","url":"git+https://github.com/aarongustafson/table-modifiable.git"},"bugs":{"url":"https://github.com/aarongustafson/table-modifiable/issues"},"type":"module","main":"index.js","module":"table-modifiable.js","customElements":"custom-elements.json","types":"table-modifiable.d.ts","exports":{".":{"import":"./index.js"},"./table-modifiable.js":{"import":"./table-modifiable.js","types":"./table-modifiable.d.ts"},"./define.js":{"import":"./define.js"},"./custom-elements.json":"./custom-elements.json"},"engines":{"node":">=20.0.0"},"scripts":{"setup":"node scripts/setup.js","test":"vitest","test:ui":"vitest --ui","test:run":"vitest run","test:coverage":"vitest run --coverage","lint":"npm run lint:eslint && npm run lint:prettier","format":"npm run format:eslint && npm run format:prettier","lint:eslint":"eslint .","format:eslint":"eslint . --fix","lint:prettier":"prettier \"**/*.js\" --check --ignore-path .gitignore","format:prettier":"prettier \"**/*.js\" --write --ignore-path .gitignore","version":"node scripts/update-demo-versions.js && git add demo/esm.html","postversion":"git push --follow-tags"},"devDependencies":{"@open-wc/eslint-config":"^13.0.0","@testing-library/dom":"^10.4.1","@testing-library/user-event":"^14.6.1","@vitest/coverage-v8":"^4.0.10","@vitest/ui":"^4.0.10","eslint":"^9.39.1","eslint-config-prettier":"^10.1.8","happy-dom":"^20.0.10","prettier":"^3.6.2","vitest":"^4.0.10"},"publishConfig":{"access":"public"},"gitHead":"6dbab1ebbc1ff31bae07953be9ad585e24c5b632","_id":"@aarongustafson/table-modifiable@1.1.0","_nodeVersion":"20.19.6","_npmVersion":"11.7.0","dist":{"integrity":"sha512-SR2PuNBDVr8f2vEV9CdrEVR+s7Fj48p6GzCOwa7qsEzeXfTmgjhW5TUdegOBJbHS6ka8aT2fHvHZ8yWWSMhjFw==","shasum":"6d2d08a0af8bb7cc2754c8844f3e986e9d45e4cf","tarball":"https://registry.npmjs.org/@aarongustafson/table-modifiable/-/table-modifiable-1.1.0.tgz","fileCount":8,"unpackedSize":28580,"attestations":{"url":"https://registry.npmjs.org/-/npm/v1/attestations/@aarongustafson%2ftable-modifiable@1.1.0","provenance":{"predicateType":"https://slsa.dev/provenance/v1"}},"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEUCIDbDdMFD1OuRgsYcGgBQ9lwSYNZjgUxsgJLrVHWDombbAiEAv/LkuQCL34kiOQqyIRgw3tOmtGizNexnHE1wT+4e5og="}]},"_npmUser":{"name":"GitHub Actions","email":"npm-oidc-no-reply@github.com","trustedPublisher":{"id":"github","oidcConfigId":"oidc:bc097d91-2444-40fa-8c1d-624fc5c2c7a8"}},"directories":{},"maintainers":[{"name":"aarongustafson","email":"aaron@easy-designs.net"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/table-modifiable_1.1.0_1765773832065_0.41118794703155537"},"_hasShrinkwrap":false}},"time":{"created":"2025-12-09T23:53:34.355Z","modified":"2025-12-15T04:43:52.568Z","0.0.1":"2025-12-09T23:53:34.588Z","1.0.0":"2025-12-09T23:54:57.123Z","1.1.0":"2025-12-15T04:43:52.222Z"},"bugs":{"url":"https://github.com/aarongustafson/table-modifiable/issues"},"author":{"name":"Aaron Gustafson","email":"aaron@easy-designs.net","url":"https://www.aaron-gustafson.com/"},"license":"MIT","homepage":"https://github.com/aarongustafson/table-modifiable#readme","keywords":["html","custom element","web component"],"repository":{"type":"git","url":"git+https://github.com/aarongustafson/table-modifiable.git"},"description":"A web component that enables users to hide & show columns on an HTML table.","maintainers":[{"name":"aarongustafson","email":"aaron@easy-designs.net"}],"readme":"# table-modifiable Web Component\n\n[![npm version](https://img.shields.io/npm/v/@aarongustafson/table-modifiable.svg)](https://www.npmjs.com/package/@aarongustafson/table-modifiable) [![Build Status](https://img.shields.io/github/actions/workflow/status/aarongustafson/table-modifiable/ci.yml?branch=main)](https://github.com/aarongustafson/table-modifiable/actions)\n\nA web component that enables users to hide & show columns on an HTML table.\n\n## Demo\n\n[Live Demo](https://aarongustafson.github.io/table-modifiable/demo/) ([Source](./demo/index.html))\n\nAdditional demos:\n\n- [ESM CDN Demo](https://aarongustafson.github.io/table-modifiable/demo/esm.html) ([Source](./demo/esm.html))\n- [Unpkg CDN Demo](https://aarongustafson.github.io/table-modifiable/demo/unpkg.html) ([Source](./demo/unpkg.html))\n\n## Installation\n\n```bash\nnpm install @aarongustafson/table-modifiable\n```\n\n## Usage\n\n### Option 1: Auto-define the custom element (easiest)\n\nImport the package to automatically define the `` custom element:\n\n```javascript\nimport '@aarongustafson/table-modifiable';\n```\n\nOr use the define-only script in HTML:\n\n```html\n\n```\n\n### Option 2: Import the class and define manually\n\nImport the class and define the custom element with your preferred tag name:\n\n```javascript\nimport { TableModifiableElement } from '@aarongustafson/table-modifiable/table-modifiable.js';\n\ncustomElements.define('my-custom-name', TableModifiableElement);\n```\n\nYou can also call the provided helper to register the element without importing the class:\n\n```javascript\nimport { defineTableModifiable } from '@aarongustafson/table-modifiable/define.js';\n\ndefineTableModifiable('my-custom-name');\n```\n\n### Basic Example\n\n```html\n\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n
NameEmailPhone
John Doejohn@example.com555-1234
\n\n```\n\n## Attributes\n\n| Attribute | Type | Default | Description |\n|-----------|------|---------|-------------|\n| `removable` | `string` | `\"\"` | Comma-separated list of all column names that can be shown/hidden |\n| `start-with` | `string` | (all removable) | Comma-separated list of which columns should be visible by default. If not specified, all removable columns will be shown initially |\n| `button-label` | `string` | `\"Modify Table\"` | Text label for the toggle button |\n| `button-aria-label` | `string` | (same as button-label) | Accessible label for the toggle button. Use this to provide a more descriptive label for screen readers if needed |\n| `tools-label` | `string` | `\"Show/Hide Columns\"` | Heading text for the popover panel |\n\n## Properties\n\nAll of the attributes above have matching camelCase properties (`removable`, `startWith`, `buttonLabel`, `buttonAriaLabel`, `toolsLabel`). Setting a property updates the corresponding attribute and schedules the component to re-render.\n\n```javascript\nconst modifiable = document.querySelector('table-modifiable');\nmodifiable.removable = 'Name,Email';\nmodifiable.startWith = 'Name';\n```\n\n## Events\n\nThe component fires custom events that you can listen to:\n\n| Event | Description | Detail |\n|-------|-------------|--------|\n| `table-modifiable:change` | Fired when a column's visibility is toggled | `{ column: string, visible: boolean }` |\n\n### Example Event Handling\n\n```javascript\nconst element = document.querySelector('table-modifiable');\n\nelement.addEventListener('table-modifiable:change', (event) => {\n console.log(`Column \"${event.detail.column}\" is now ${event.detail.visible ? 'visible' : 'hidden'}`);\n});\n```\n\n## CSS Custom Properties\n\n| Property | Default | Description |\n|----------|---------|-------------|\n| `--table-modifiable-tool-bg` | (none) | Background color for the modification tools popover |\n| `--table-modifiable-tool-color` | (none) | Text color for the modification tools popover |\n\n### Example Styling\n\nYou can style the generated elements directly to customize the appearance:\n\n```css\n/* Style the toggle button */\n.modification-tools-toggle {\n background: #0969da;\n color: white;\n border: none;\n padding: 0.5rem 1rem;\n border-radius: 4px;\n font-size: 1rem;\n cursor: pointer;\n}\n\n.modification-tools-toggle:hover {\n background: #0860ca;\n}\n\n/* Style the popover */\n.modification-tools {\n background: var(--table-modifiable-tool-bg, white);\n color: var(--table-modifiable-tool-color, #333);\n padding: 1rem;\n border-radius: 6px;\n border: 1px solid #d0d7de;\n box-shadow: 0 8px 24px rgba(140, 149, 159, 0.2);\n min-width: 250px;\n}\n\n.modification-tools-heading {\n font-weight: bold;\n display: block;\n margin-bottom: 0.75rem;\n font-size: 1.1rem;\n}\n\n.modification-tools ul {\n list-style: none;\n padding: 0;\n margin: 0;\n display: flex;\n flex-direction: column;\n gap: 0.5rem;\n}\n\n.modification-tools li {\n margin: 0;\n}\n\n.modification-tools label {\n cursor: pointer;\n user-select: none;\n}\n```\n\n## How It Works\n\nThis component wraps an HTML table and adds interactive controls to show/hide columns:\n\n1. **Place your table inside the component**: The component uses Light DOM, so your table remains in the regular DOM and is fully accessible.\n\n2. **Specify removable columns**: Use the `removable` attribute to list which columns can be toggled. The column names must match the text content of the `` elements in the first header row exactly.\n\n3. **Set initial visibility**: Optionally use `start-with` to specify which columns should be visible when the page loads. Any columns in `removable` but not in `start-with` will be hidden initially.\n\n4. **Toggle via popover**: The component creates a button that opens a popover with checkboxes. Users can check/uncheck these to show/hide the corresponding columns. The popover uses the native [Popover API](https://developer.mozilla.org/en-US/docs/Web/API/Popover_API).\n\n5. **Customize labels**: Use the `button-label`, `button-aria-label`, and `tools-label` attributes to customize the text shown to users.\n\n**Note**: This component works with simple tables (one header row, matching body cells). It does not support `colspan` or `rowspan` attributes.\n\n## Advanced Examples\n\n### Table with Multiple Columns\n\n```html\n\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n
ProductPriceStockCategory
Widget$9.9942Tools
\n\n```\n\n### Customizing Labels\n\n```html\n\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n
NameEmailPhoneAddress
Jane Doejane@example.com555-5678123 Main St
\n\n```\n\n## TypeScript\n\nThis package ships bundled type definitions (`table-modifiable.d.ts`). You can import the element type, the change event payload, and the registration helper:\n\n```ts\nimport type {\n TableModifiableElement,\n TableModifiableChangeEvent,\n} from '@aarongustafson/table-modifiable/table-modifiable.js';\nimport { defineTableModifiable } from '@aarongustafson/table-modifiable/define.js';\n\ndefineTableModifiable();\n\nconst element = document.querySelector('table-modifiable') as TableModifiableElement;\n\nelement.addEventListener(\n 'table-modifiable:change',\n (event: TableModifiableChangeEvent) => {\n console.log(event.detail.column, event.detail.visible);\n },\n);\n```\n\n## Browser Support\n\nThis component uses modern web standards:\n- Custom Elements v1\n- ES Modules\n- Popover API\n\nFor older browsers, you may need polyfills.\n\n## Development\n\n```bash\n# Install dependencies\nnpm install\n\n# Run tests\nnpm test\n\n# Run tests with coverage\nnpm run test:coverage\n\n# Lint code\nnpm run lint\n\n# Format code\nnpm run format\n\n# View demo\nopen demo/index.html\n```\n\n## License\n\nMIT © [Aaron Gustafson](https://www.aaron-gustafson.com/)\n","readmeFilename":"README.md"}