{"_id":"b-canvas-table","_rev":"3-6f32ad69f6df2bd6844205615b541e79","name":"b-canvas-table","dist-tags":{"latest":"1.0.2"},"versions":{"1.0.0":{"name":"b-canvas-table","version":"1.0.0","keywords":["canvas table","canvas","table","grid"],"author":{"name":"baiyang-art"},"license":"MIT","_id":"b-canvas-table@1.0.0","maintainers":[{"name":"baiyang-art","email":"1564160330@qq.com"}],"bugs":{"email":"1564160330@qq.com"},"dist":{"shasum":"2fd69bb5195055dd9c18c862a2b1399f657f967b","tarball":"https://registry.npmjs.org/b-canvas-table/-/b-canvas-table-1.0.0.tgz","fileCount":71,"integrity":"sha512-AQpmnFiCjI8FPW4GNaxgcOIEKmgIetpN1E2WNFnI9hMzUlIalbo/VoKAtDRhF3vJp+cas3jFt/jRGvnMwPu4WA==","signatures":[{"sig":"MEQCICsmRdlDSKdcYEL1rVv1WSEMg+uihM+cfvf9RBoDoBmSAiBIJsJ2CABFuWssCPtOdN+7O0poJFcghCE+FknMJOiWyg==","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":316239},"main":"dist/index.js","gitHead":"a0e826223699a8a1484a6dd5a6625c4592aadb48","private":false,"scripts":{"dev":"webpack-dev-server --config ./webpack/webpack.dev.js --open --content-base","build":"gulp && webpack --config ./webpack/webpack.prod.js","prepare":"husky","lint:css":"stylelint \"**/*.scss\" --fix","build:umd":"webpack --config ./webpack/webpack.prod.js","build:dist":"gulp","lint-staged":"lint-staged"},"typings":"dist/index.d.ts","_npmUser":{"name":"baiyang-art","email":"1564160330@qq.com"},"repository":{"url":"https://gitee.com/bai-yangde/canvastable","type":"git"},"_npmVersion":"8.19.4","description":"a table component got the highest performance that works on canvas.","directories":{},"lint-staged":{"src/**/*.{js,jsx,ts,tsx,css,md,json}":["eslint --fix","prettier --write"]},"_nodeVersion":"16.20.1","_hasShrinkwrap":false,"devDependencies":{"del":"^4.1.1","gulp":"^4.0.2","sass":"^1.50.0","husky":"^9.1.7","eslint":"^7.32.0","merge2":"^1.4.1","postcss":"^8.5.3","webpack":"4.44.2","prettier":"^2.5.1","through2":"4.0.2","gulp-sass":"^5.1.0","stylelint":"^14.16.1","css-loader":"4.3.0","gulp-babel":"8.0.0","gulp-clean":"0.4.0","typescript":"4.0.3","@babel/core":"7.12.3","file-loader":"^6.1.0","lint-staged":"^15.5.0","sass-loader":"^10.2.1","webpack-cli":"3.3.12","babel-loader":"8.1.0","postcss-scss":"^4.0.9","style-loader":"1.2.1","webpack-merge":"5.1.4","stylelint-scss":"^4.7.0","@commitlint/cli":"^19.8.0","gulp-typescript":"6.0.0-alpha.1","stylelint-order":"^6.0.4","@babel/preset-env":"7.11.5","source-map-loader":"1.1.0","webpack-dev-server":"3.11.0","@babel/preset-react":"7.10.4","eslint-plugin-react":"^7.37.5","html-webpack-plugin":"4.5.0","clean-webpack-plugin":"3.0.0","eslint-config-prettier":"^8.3.0","eslint-plugin-prettier":"^3.4.1","@babel/preset-typescript":"^7.12.1","@typescript-eslint/parser":"5.43.0","stylelint-config-standard":"^38.0.0","css-modules-typescript-loader":"4.0.1","style-ext-html-webpack-plugin":"4.1.2","@types/resize-observer-browser":"^0.1.11","stylelint-config-standard-scss":"^6.1.0","@babel/plugin-transform-runtime":"7.12.1","@commitlint/config-conventional":"^19.8.0","@typescript-eslint/eslint-plugin":"5.43.0","@babel/plugin-proposal-class-properties":"7.12.1","@babel/plugin-proposal-optional-chaining":"7.12.1"},"_npmOperationalInternal":{"tmp":"tmp/b-canvas-table_1.0.0_1744272630111_0.7951357190192196","host":"s3://npm-registry-packages-npm-production"}},"1.0.1":{"name":"b-canvas-table","version":"1.0.1","keywords":["canvas table","canvas","table","grid"],"author":{"name":"baiyang-art"},"license":"MIT","_id":"b-canvas-table@1.0.1","maintainers":[{"name":"baiyang-art","email":"1564160330@qq.com"}],"bugs":{"email":"1564160330@qq.com"},"dist":{"shasum":"caebd35cb77ad2bf16a2dfd7f467b74fd251d2ec","tarball":"https://registry.npmjs.org/b-canvas-table/-/b-canvas-table-1.0.1.tgz","fileCount":40,"integrity":"sha512-QHL3YGOGI2T9bVg4kIDXBD6TOSYrTV6PBNptCC3KABh6A5BUmh7eCXk8eh7xuMX2G8FfV9F0QYtaf3e6tAo1kA==","signatures":[{"sig":"MEYCIQCTf5tEZLiRJSsk0uPZrxAgrXtrUKtQfmeU+m6GaNXn9QIhAKfduJL213J/xhUYLZQohF38wy8/QTMWoMHeq53MlI2Z","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":153653},"main":"dist/canvastable.min.js","gitHead":"47af706877d5a7441c71f64c5a44dec5b5c2e86f","private":false,"scripts":{"dev":"webpack-dev-server --config ./webpack/webpack.dev.js --open --content-base","build":"npm run build:ts && npm run build:webpack","serve":"nodemon --watch src --ext ts,tsx,scss --ignore dist/ --exec npm run build","prepare":"husky","build:ts":"tsc --emitDeclarationOnly --outDir dist","lint-staged":"lint-staged","build:webpack":"webpack --config ./webpack/webpack.prod.js"},"typings":"dist/index.d.ts","_npmUser":{"name":"baiyang-art","email":"1564160330@qq.com"},"repository":{"url":"https://gitee.com/bai-yangde/canvastable","type":"git"},"_npmVersion":"8.19.4","description":"a table component got the highest performance that works on canvas.","directories":{},"lint-staged":{"src/**/*.{js,jsx,ts,tsx,css,md,json}":["eslint --fix","prettier --write"]},"_nodeVersion":"16.20.1","_hasShrinkwrap":false,"devDependencies":{"del":"^4.1.1","sass":"^1.50.0","husky":"^9.1.7","eslint":"^7.32.0","merge2":"^1.4.1","nodemon":"^3.1.9","postcss":"^8.5.3","webpack":"4.44.2","prettier":"^2.5.1","through2":"4.0.2","ts-loader":"^8.4.0","css-loader":"4.3.0","typescript":"4.0.3","@babel/core":"7.12.3","file-loader":"^6.1.0","lint-staged":"^15.5.0","sass-loader":"^10.2.1","webpack-cli":"3.3.12","babel-loader":"8.1.0","postcss-scss":"^4.0.9","style-loader":"1.2.1","webpack-merge":"5.1.4","@commitlint/cli":"^19.8.0","@babel/preset-env":"7.11.5","source-map-loader":"1.1.0","webpack-dev-server":"3.11.0","@babel/preset-react":"7.10.4","copy-webpack-plugin":"^6.0.0","eslint-plugin-react":"^7.37.5","html-webpack-plugin":"4.5.0","clean-webpack-plugin":"3.0.0","eslint-config-prettier":"^8.3.0","eslint-plugin-prettier":"^3.4.1","@babel/preset-typescript":"^7.12.1","@typescript-eslint/parser":"5.43.0","css-modules-typescript-loader":"4.0.1","style-ext-html-webpack-plugin":"4.1.2","@types/resize-observer-browser":"^0.1.11","@babel/plugin-transform-runtime":"7.12.1","@commitlint/config-conventional":"^19.8.0","@typescript-eslint/eslint-plugin":"5.43.0","@babel/plugin-proposal-class-properties":"7.12.1","@babel/plugin-proposal-optional-chaining":"7.12.1"},"_npmOperationalInternal":{"tmp":"tmp/b-canvas-table_1.0.1_1744343140918_0.35125152669524473","host":"s3://npm-registry-packages-npm-production"}},"1.0.2":{"name":"b-canvas-table","version":"1.0.2","description":"a table component got the highest performance that works on canvas.","keywords":["canvas table","canvas","table","grid"],"scripts":{"dev":"webpack-dev-server --config ./webpack/webpack.dev.js --open --content-base","build:ts":"tsc --emitDeclarationOnly --outDir dist","build:webpack":"webpack --config ./webpack/webpack.prod.js","build":"npm run build:ts && npm run build:webpack","serve":"nodemon --watch src --ext ts,tsx,scss --ignore dist/ --exec npm run build","prepare":"husky","lint-staged":"lint-staged"},"private":false,"main":"dist/canvastable.min.js","typings":"dist/index.d.ts","repository":{"type":"git","url":"https://gitee.com/bai-yangde/canvastable"},"bugs":{"email":"1564160330@qq.com"},"author":{"name":"baiyang-art"},"license":"MIT","devDependencies":{"@babel/core":"7.12.3","@babel/plugin-proposal-class-properties":"7.12.1","@babel/plugin-proposal-optional-chaining":"7.12.1","@babel/plugin-transform-runtime":"7.12.1","@babel/preset-env":"7.11.5","@babel/preset-react":"7.10.4","@babel/preset-typescript":"^7.12.1","@commitlint/cli":"^19.8.0","@commitlint/config-conventional":"^19.8.0","@types/resize-observer-browser":"^0.1.11","@typescript-eslint/eslint-plugin":"5.43.0","@typescript-eslint/parser":"5.43.0","babel-loader":"8.1.0","clean-webpack-plugin":"3.0.0","copy-webpack-plugin":"^6.0.0","css-loader":"4.3.0","css-modules-typescript-loader":"4.0.1","del":"^4.1.1","eslint":"^7.32.0","eslint-config-prettier":"^8.3.0","eslint-plugin-prettier":"^3.4.1","eslint-plugin-react":"^7.37.5","file-loader":"^6.1.0","html-webpack-plugin":"4.5.0","husky":"^9.1.7","lint-staged":"^15.5.0","merge2":"^1.4.1","nodemon":"^3.1.9","postcss":"^8.5.3","postcss-scss":"^4.0.9","prettier":"^2.5.1","sass":"^1.50.0","sass-loader":"^10.2.1","source-map-loader":"1.1.0","style-ext-html-webpack-plugin":"4.1.2","style-loader":"1.2.1","through2":"4.0.2","ts-loader":"^8.4.0","typescript":"4.0.3","webpack":"4.44.2","webpack-cli":"3.3.12","webpack-dev-server":"3.11.0","webpack-merge":"5.1.4"},"lint-staged":{"src/**/*.{js,jsx,ts,tsx,css,md,json}":["eslint --fix","prettier --write"]},"gitHead":"4175e8551404406af7b4005b107f9053c7756902","_id":"b-canvas-table@1.0.2","_nodeVersion":"16.20.1","_npmVersion":"8.19.4","dist":{"integrity":"sha512-BoAAhlT+kWXy10PTmxOEPmsEAY5iOJV4+7ACjhKk7j6xihlOtCD4nkfJ+F9oUL8VDje3qH6kOgiZYQ6sZGHIgA==","shasum":"13ca7cb3277edbe36ff4804fa90dd28e4181ae5c","tarball":"https://registry.npmjs.org/b-canvas-table/-/b-canvas-table-1.0.2.tgz","fileCount":40,"unpackedSize":154386,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEUCIQDAPaU7FxfYHQH+7au7Mf66Jy7e9kf4A6j0f9fLtJeanQIgCSOLpMhgoox0AfH//TNu54CcI2e0M7K9jp1pAbyl2ig="}]},"_npmUser":{"name":"baiyang-art","email":"1564160330@qq.com"},"directories":{},"maintainers":[{"name":"baiyang-art","email":"1564160330@qq.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/b-canvas-table_1.0.2_1744624073889_0.9606007806856933"},"_hasShrinkwrap":false}},"time":{"created":"2025-04-10T08:10:30.109Z","modified":"2025-04-14T09:47:54.282Z","1.0.0":"2025-04-10T08:10:30.305Z","1.0.1":"2025-04-11T03:45:41.124Z","1.0.2":"2025-04-14T09:47:54.106Z"},"bugs":{"email":"1564160330@qq.com"},"author":{"name":"baiyang-art"},"license":"MIT","keywords":["canvas table","canvas","table","grid"],"repository":{"type":"git","url":"https://gitee.com/bai-yangde/canvastable"},"description":"a table component got the highest performance that works on canvas.","maintainers":[{"name":"baiyang-art","email":"1564160330@qq.com"}],"readme":"# canvas-table\r\n\r\n使用说明\r\n\r\n```javascript\r\n\t\tconst table = new CanvasTable({\r\n\t\t\tcontainer: document.querySelector('#container'), // 挂载dom\r\n\t\t\tcolumns: [{ // 列配置\r\n\t\t\t\ttitle: 'Name',  // 列头 可以传入函数渲染函数\r\n\t\t\t\tdataIndex: 'name', // string 列数据获取字段\r\n\t\t\t\twidth: 200, // 列宽 当有children列的时候，此数据会被覆盖\r\n\t\t\t\teditable: true, // 是否可以编辑 可以传入函数\r\n\t\t\t\tfixed: null, // 固定列 left/right 默认null不固定\r\n\t\t\t\tpopTitle: 'Name', // 列头pop提示文案 默认为title\r\n\t\t\t\tkey: 'name', // 列key\r\n\t\t\t\talign: 'left',// 'left' | 'right' | 'center' 默认left\r\n\t\t\t\tresizable: false, // 是否可以拖动列宽 默认false\r\n\t\t\t\tvalueSetter({ record, column, name, value, index, section }) {}, // 设置值\r\n\t\t\t\trenderEditer({ record, column, value, index, section, closeWapper }) {}, // 编辑器渲染\r\n\t\t\t\tvalueFormatter({ record, column, name, value, index, section }) {}, // 值格式化\r\n\t\t\t\trender({ record, column, value, index, section }) {},// 表体单元格渲染\r\n\t\t\t\tchildren: [],\r\n\t\t\t}],\r\n\t\t\tdraggable: {\r\n\t\t\t\theader: false, // 是否开启拖动列开关 默认false\r\n\t\t\t\tbody: false, // 是否开启拖动行开关 默认false\r\n\t\t\t\tfooter: false, // 是否开启拖动行开关 默认false\r\n\t\t\t\tonDraggableEnd: ({record,  index, section}) => { // 拖拽结束\r\n\t\t\t\t\tconsole.log('拖拽结束', record, index, section)\r\n\t\t\t\t}\r\n\t\t\t} || faslse, // 拖动开关 默认false\t\r\n\t\t\teditable: false , // 是否可以编辑总开关 默认false 此开关关闭时，所有列的editable都为false\r\n\t\t\tscrollToLeftOnChange: false, // 是否开启滚动到左侧开关 默认false\r\n\t\t\tscrollToTopOnChange: false, // 是否开启滚动到底部开关 默认false\r\n\t\t\tstyle: { // 默认样式\r\n\t\t\t\theight: '100%', // 高度\r\n\t\t\t\twidth: '100%', // 宽度\r\n\t\t\t\trowHeight: 32, // 行高\r\n\t\t\t\tcolumnWidth: 150, // 默认列宽 列配置里面没有传值时使用\r\n\t\t\t\tborderColor: '#e8e8e8', // 边框颜色\r\n\t\t\t\ttextColor: 'rgba(0,0,0,0.65)', // 字体颜色\r\n\t\t\t\tfontSize: '14px', // 字体大小\r\n\t\t\t\tfontFamily: '-apple-system,BlinkMacSystemFont,\"Segoe UI\",\"PingFang SC\",\"Hiragino Sans GB\",\"Microsoft YaHei\",\"Helvetica Neue\",Helvetica,Arial,sans-serif,\"Apple Color Emoji\",\"Segoe UI Emoji\",\"Segoe UI Symbol\"', // 字体\r\n\t\t\t\theaderBackColor: '#fafafa', // 表头背景色\r\n\t\t\t\theaderRowHeight: 32, // 表头行高\r\n\t\t\t\tfooterBackColor: '#fafafa', // 表尾背景色\r\n\t\t\t\tbodyBackColor: '#FFFFFF', // 表体背景色\r\n\t\t\t\tpadding: 16, // 表格内边距\r\n\t\t\t\tminColumnWidth: 10, // 列宽最小值\r\n\t\t\t\thoverRowBackColor: '#e6f7ff', // 悬浮行背景色\r\n\t\t\t\tactiveRowBackColor: '#e6f7ff', // 激活行背景色\r\n\t\t\t\tediterBorderColor: '#1447ff', // 编辑器边框颜色\r\n\t\t\t\tscrollWidth: 18 // 滚动条宽度\r\n\t\t\t},\r\n\t\t\tsource: [], // 表体数据\r\n\t\t\tfooterSource: [], // 表尾数据\r\n\t\t\tonScrollTop: () => {\r\n\t\t\t\tconsole.log('滚动到顶部')\t\r\n\t\t\t},\r\n\t\t\tonScrollLoadingAnimation: true // 滚动加载动画开关 默认传入onScrollLoad的时候就默认开启\r\n\t\t\tonScrollLoad: () => {\r\n\t\t\t\tconsole.log('滚动加载')\r\n\t\t\t\treturn Promise.resolve()\r\n\t\t\t},\r\n\t\t\tscrollLoadHeight: 0, // 滚动加载触发高度 默认0\r\n\t\t\tonRow: (record, index) => { // 行事件\r\n\t\t\t\treturn {\r\n\t\t\t\t\tonClick: () => {\r\n\t\t\t\t\t\tconsole.log('点击行', record, index)\r\n\t\t\t\t\t},\r\n\t\t\t\t\tonDoubleClick: () => {\r\n\t\t\t\t\t\tconsole.log('双击行', record, index)\r\n\t\t\t\t\t},\r\n\t\t\t\t\tonContextMenu: () => {\r\n\t\t\t\t\t\tconsole.log('右键行', record, index)\r\n\t\t\t\t\t},\r\n\t\t\t\t\tonMouseEnter: () => {\r\n\t\t\t\t\t\tconsole.log('鼠标进入行', record, index)\r\n\t\t\t\t\t},\r\n\t\t\t\t\tonMouseLeave: () => {\r\n\t\t\t\t\t\tconsole.log('鼠标离开行', record, index)\r\n\t\t\t\t\t},\r\n\t\t\t\t\tonMouseDown: () => {\r\n\t\t\t\t\t\tconsole.log('鼠标按下行', record, index)\r\n\t\t\t\t\t}\r\n\t\t\t\t}\r\n\t\t\t},\r\n\t\t\tonResizeEnd: (columns: HeaderTreeNode) => {\r\n\t\t\t\tconsole.log('列宽改变', columns)\r\n\t\t\t},\r\n\t\t\tstartEditerCallback: ({ record, column, name, value, index, section }) => {\r\n\t\t\t\tconsole.log('开始编辑', record, column, name, value, index, section)\r\n\t\t\t}\r\n\t\t})\r\n\t\tconst createData = (count) => {\r\n\t\t\treturn new Array(count).fill(0).map((item, index) => {\r\n\t\t\t\treturn {\r\n\t\t\t\t\tname: 'John' + index,\r\n\t\t\t\t\tage: 30,\r\n\t\t\t\t\tcity: 'New York',\r\n\t\t\t\t}\r\n\t\t\t})\r\n\t\t}\r\n\t\tconst data = createData(1000) // 插入表体数据\r\n\t\ttable.columns = [] // 更新列配置\r\n\t\ttable.source = data // 更新表体数据\r\n\t\ttable.footerSource = data[0] // 更新表尾数据\r\n\t\ttable.bodyMergedCells = [{ // 表体合并单元格\r\n\t\t\tfromCol: 0\r\n\t\t\tfromRow: 0\r\n\t\t\ttoCol: 0\r\n\t\t\ttoRow: 0\r\n\t\t}]\r\n\t\ttable.footerMergedCells = [] // 表尾合并单元格 同理\r\n\t\ttable.columns // 获取列配置\r\n\t\ttable.source // 获取表体数据\r\n\t\ttable.footerSource // 获取表尾数据\r\n\t\ttable.bodyMergedCells // 获取表体合并单元格\r\n\t\ttable.footerMergedCells // 获取表尾合并单元格\r\n\t\ttable.render() // 更新渲染\r\n\t\ttable.destroy() // 销毁实例\r\n\t\ttable.stopRender() // 停止渲染 可以配合startRender使用\r\n\t\ttable.startRender() // 继续渲染 可以配合stopRender使用 执行后再执行table.render()可以成功\r\n\t\ttable.focusBodyCell(rowIndex, colKey) // 聚焦表体单元格\r\n\t\ttable.focusFooterCell(rowIndex, colKey) // 聚焦表尾单元格\r\n\t\t// 当普通显示不能满足要求，可以使用以下组件\r\n\t\tCanvasTable.Button // 按钮组件 配合render使用\r\n\t\tCanvasTable.Text // 文本组件 配合render使用\r\n\t\tCanvasTable.Svg // svg组件 配合render使用\r\n\t\tCanvasTable.Img // 图片组件 配合render使用\r\n\t\tCanvasTable.CustomLayer // 自定义层组件 配合render使用\r\n\t\tCanvasTable.Layer // 层组件 配合render使用\r\n\t\tCanvasTable.Editer // 编辑器组件 配合renderEditer使用 renderEditer返回一个此类的子类或者一个此类的实例既可\r\n```\r\n","readmeFilename":"README.md"}