{"_id":"@aico-test/execel-table-renderer","name":"@aico-test/execel-table-renderer","dist-tags":{"latest":"0.0.1"},"versions":{"0.0.1":{"name":"@aico-test/execel-table-renderer","version":"0.0.1","description":"a based-canvas table renderer","main":"dist/table-renderer.js","types":"dist/index.d.ts","scripts":{"dev":"webpack serve --config build/webpack.dev.js","build":"webpack --config build/webpack.prod.js && ./node_modules/.bin/tsc","format":"prettier --write src test","test":"mocha -r babel-register.js test/*.test.ts"},"repository":{"type":"git","url":"git+https://github.com/wolf-table/table-render.git"},"keywords":["web","table","render","grid"],"author":{"name":"myliang"},"license":"MIT","bugs":{"url":"https://github.com/wolf-table/table-render/issues"},"homepage":"https://github.com/wolf-table/table-render#readme","devDependencies":{"@babel/core":"^7.17.5","@babel/preset-env":"^7.16.11","@babel/preset-typescript":"^7.16.7","@babel/register":"^7.17.0","@types/mocha":"^9.1.0","@types/node":"^17.0.10","babel-loader":"^8.2.3","html-webpack-plugin":"^5.5.0","mocha":"^9.1.4","prettier":"^2.5.1","typescript":"^4.5.5","webpack":"^5.67.0","webpack-cli":"^4.9.1","webpack-dev-server":"^4.7.3","webpack-merge":"^5.8.0"},"dependencies":{},"_id":"@aico-test/execel-table-renderer@0.0.1","gitHead":"753441deded889efeea88d3f6cd54217d21f6c94","_nodeVersion":"24.2.0","_npmVersion":"11.3.0","dist":{"integrity":"sha512-h5MYDVHZPqwjzgKr0ITKhGHK8QwsvCiwDznFUsPbGRDmoDIQHXENrjMf34O5KameH1wH94q1/VzwlcywpBGDfw==","shasum":"4a5c0205d6e83233cc581a0e1fc4cf63805a2c3b","tarball":"https://registry.npmjs.org/@aico-test/execel-table-renderer/-/execel-table-renderer-0.0.1.tgz","fileCount":38,"unpackedSize":155979,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEUCIE03KkwW7lDcpyyF7Gg5rtFVLgaYmFd+z6rbHXA1CjwqAiEAp2kAt4BTq9JTMkr8C0TuIUBdGlDmSWmFNqmkcAXTRdY="}]},"_npmUser":{"name":"dockyun","email":"153967808@qq.com"},"directories":{},"maintainers":[{"name":"dockyun","email":"153967808@qq.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/execel-table-renderer_0.0.1_1754239119814_0.3150852174231442"},"_hasShrinkwrap":false}},"time":{"created":"2025-08-03T16:38:39.722Z","0.0.1":"2025-08-03T16:38:40.013Z","modified":"2025-08-03T16:38:40.274Z"},"maintainers":[{"name":"dockyun","email":"153967808@qq.com"}],"description":"a based-canvas table renderer","homepage":"https://github.com/wolf-table/table-render#readme","keywords":["web","table","render","grid"],"repository":{"type":"git","url":"git+https://github.com/wolf-table/table-render.git"},"author":{"name":"myliang"},"bugs":{"url":"https://github.com/wolf-table/table-render/issues"},"license":"MIT","readme":"

\n \n \n \n

\n\n

\n \"GitHub\n \"npm\n \"GitHub\n \"GitHub\"\n \"\n

\n\n## wolf-table-renderer\n> A web-based(canvas) JavaScript Table Renderer\n\n## Demo\nOpen in Stackblitz\n\n## NPM\nnpm install\n```shell\nnpm install @wolf-table/table-renderer@0.0.1\n```\n\n## Usage\n```javascript\nimport TableRenderer, { Cell, Canvas } from \"@wolf-table/table-renderer\";\nconst longText = {\n value: 'you are a good boy, a very good boy-------!!!',\n style: 0,\n};\n\nfunction cellText(ri: number, ci: number): string | Cell {\n if (ri === 8 && ci === 1) return longText;\n const value = `${ri}-${ci}`;\n if (ri <= 14 && ri >= 13 && ci <= 12 && ci >= 9) {\n return { value, style: 1 };\n }\n if (ri === 4 && ci === 4) return { type: 'select', value };\n if (ri === 4 && ci === 8) return { type: 'bool', value };\n return value;\n}\n\nfunction cellRenderer(canvas: Canvas, { x, y, width, height }, cell) {\n const type = (cell && cell.type) || '';\n if (type === 'bool') {\n canvas\n .prop({ strokeStyle: '#0069c2', lineWidth: 2 })\n .roundRect((width - 12) / 2, height / 2 - 5, 10, 10, 2)\n .stroke();\n } else if (type === 'select') {\n canvas\n .prop({ fillStyle: '#0069c2' })\n .beginPath()\n .moveTo(width - 12, 2)\n .lineTo(width - 2, 2)\n .lineTo(width - 7, 10)\n .closePath()\n .fill();\n }\n return true;\n}\n\nTableRender.create('#table', 1400, 800)\n .scale(1)\n .bgcolor('#fff')\n .colHeader({\n height: 50,\n rows: 2,\n merges: ['A1:C1', 'D1:D2'],\n cellRenderer: (canvas, { x, y, width, height }) => {\n canvas\n .prop({ fillStyle: '#0069c2' })\n .beginPath()\n .moveTo(width - 12, 2)\n .lineTo(width - 2, 2)\n .lineTo(width - 7, 10)\n .closePath()\n .fill();\n return true;\n },\n })\n .merges(['I10:J11', 'B9:D10', 'G21:H22', 'J22:L23', 'I3:K4'])\n .borders([\n ['G3', 'all', 'dashed', '#188038'],\n ['B9', 'outside', 'thick', '#188038'],\n ['M4:N10', 'all', 'medium', '#188038'],\n ['H9:K12', 'inside', 'thick', 'red'],\n ['E14:J16', 'all', 'dotted', 'red'],\n ['E19:M24', 'all', 'thick', '#188038'],\n ])\n // .startRow(1)\n .rows(50)\n .styles([{ bold: true }, { bgcolor: '#ffc107' }])\n .col((index) => (index == 5 ? { width: 100, hide: true } : undefined))\n .freeze('C6')\n .scrollRows(2)\n .scrollCols(1)\n .cell((ri, ci) => cellText(ri, ci))\n .cellRenderer(cellRenderer)\n .render();\n```\n\n## Development\n\n```shell\ngit clone https://github.com/wolf-table/table-renderer.git\ncd table-renderer\nnpm install\nnpm run dev\n```\n\nOpen your browser and visit http://127.0.0.1:8080.\n\n## Browser Support\n\nModern browsers(chrome, firefox, Safari).\n\n## LICENSE\n\nMIT\n\nCopyright (c) 2022-present, myliang","readmeFilename":"README.md","_rev":"1-cf240c5ca2ffa4bc26b2bf3f77ab40a7"}