{"_id":"@alita/s2-react","name":"@alita/s2-react","dist-tags":{"latest":"1.28.0"},"versions":{"1.28.0":{"private":false,"name":"@alita/s2-react","version":"1.28.0","main":"lib/index.js","unpkg":"dist/index.min.js","module":"esm/index.js","types":"esm/index.d.ts","description":"use S2 with react","license":"MIT","homepage":"https://s2.antv.vision","author":{"name":"https://github.com/orgs/antvis/people"},"directories":{"lib":"lib","test":"tests"},"repository":{"type":"git","url":"git+https://github.com/antvis/S2.git"},"bugs":{"url":"https://github.com/antvis/S2/issues"},"keywords":["antv","s2","s2-react","spreadsheet","pivot table","table"],"scripts":{"start":"cross-env PLAYGROUND=true vite","clean":"rimraf lib esm dist temp","build":"npm-run-all clean --parallel build:umd build:cjs build:esm build:dts","build:esm":"cross-env FORMAT=es vite build","build:cjs":"cross-env FORMAT=cjs vite build","build:umd":"cross-env FORMAT=umd vite build","build:analysis":"cross-env FORMAT=es ANALYSIS=true vite build","build:dts":"run-s dts:*","watch":"rimraf esm && yarn build:esm -w","dts:build":"tsc -p tsconfig.declaration.json","dts:extract":"cross-env LIB=s2-react node ../../scripts/dts.js","bundle:size":"bundlesize","test":"jest --passWithNoTests","test:coverage":"yarn test --coverage","test:ci":"yarn test --maxWorkers=3","test:ci-coverage":"yarn test:coverage --maxWorkers=3","test:live":"node ./scripts/test-live.mjs","test:watch":"yarn test --watch","tsc":"tsc --noEmit","changelog":"conventional-changelog -p angular -i CHANGELOG.md -s"},"peerDependencies":{"@ant-design/icons":">=4.7.0","@alita/s2":">=1.0.0","antd":">=4.16.13","react":">=16.8.0","react-dom":">=16.8.0"},"dependencies":{"ahooks":"^3.1.13","classnames":"^2.3.1","lodash":"^4.17.21","react-beautiful-dnd":"^13.1.0"},"devDependencies":{"@alita/s2":"*","@antv/s2-shared":"*","@ant-design/icons":"^4.7.0","@testing-library/react":"^12.1.4","@testing-library/react-hooks":"^7.0.2","@types/react":"17.0.41","@types/react-beautiful-dnd":"^13.1.2","@types/react-dom":"17.0.14","antd":"^4.19.3","react":"^17.0.2","react-color":"^2.19.3","react-dom":"^17.0.2","vite-plugin-svgr":"^2.1.0"},"bundlesize":[{"path":"./dist/index.min.js","maxSize":"650 kB"},{"path":"./dist/style.min.css","maxSize":"205 kB"}],"publishConfig":{"access":"public"},"_id":"@alita/s2-react@1.28.0","_nodeVersion":"16.14.0","_npmVersion":"6.14.10","dist":{"integrity":"sha512-217pMIus/yNmNmHh/FVYgZjx9sMIpawFNmzrKa+jZg995FgFg1B2dEaFV0pqGsBDfcwFUFU8otgKuFuZ8SK3kQ==","shasum":"6bac4c69e823f3761ad21a090a616c9fa2c2680d","tarball":"https://registry.npmjs.org/@alita/s2-react/-/s2-react-1.28.0.tgz","fileCount":12,"unpackedSize":4048344,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQD9XC3UIaPsJVPnV/toARTxLfpf8MfVeNsa6JqhrqTqoQIhAJOTyXz8bi/EH9+M+lceqnJwAl5i8lF50+CguCXmSmOh"}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjW1iAACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrYkBAAoC3ncNVSN5ceL78faam719WoZNSDkVnjX6z2u67xEpN6oYZO\r\nQA4BVIcZUCZ6F+0d9bSx699pi5L+KHKp/X2domGRGN6t3+5+eLgLG6MBBj85\r\nXp75zleHJoinImtsXUIADD8ObfXjeYxhkLP6QFi3vD98TmRKHocks+UESYQR\r\n3oa6zwozn7KcJdeC+pTA3v+uydAZbgRgPR+j9vIGk8BkPnJ57R3Wc+ZDAWNP\r\nvzkn+PEFAlXR38/VNbziR4MQyoqTrDb/fPJdbrR8I20HCMHDgjLIR+CODaTt\r\n7Z3WPSXREtZWfyq3tn5gUzXdlkYLPKzQDGFAFWW9dpwjUmzp5ck/OHeiOXVz\r\n62+jK0QQHTvuuZCyyxBMW+giih7whodd0rYlnfNsOk9hOqpPO6CRMb9nQdtD\r\nAQvOZKKL2NXhUOUYd68lG0UFDpx+SDFYigHa3Ahr5uTzcoCvZuEaSKsAYKRX\r\nc71ZTLnHMFA6GfDGrzjMP9/3oLr2zb9fNwqlbQ5SdO/uQcGeegj75cs6HLAe\r\nUKoMr960xWK6f7Tql+sZnhD4L8lfOmbwOA35dt525UqR3RKi5m36jMPpYhAI\r\ndXDLBBzBTPK2Qixy9WV4EHXG28dJhMAPd1n2596ic8nhixaZQZo8QY6RQ1VD\r\na2XPrH3hQQ4KW0uAfY7TcFpnQDkq0WWCJsU=\r\n=wNs9\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"pengyh","email":"pt370390794@126.com"},"maintainers":[{"name":"pengyh","email":"pt370390794@126.com"},{"name":"ashoka_j","email":"savebtc11@gmail.com"},{"name":"hang1017","email":"437132124@qq.com"},{"name":"hammersjs","email":"1270253618@qq.com"},{"name":"cjy0208","email":"fanluan058@gmail.com"},{"name":"xiaohuoni","email":"448627663@qq.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/s2-react_1.28.0_1666930816659_0.7787029319264476"},"_hasShrinkwrap":false}},"time":{"created":"2022-10-28T04:20:16.602Z","1.28.0":"2022-10-28T04:20:16.933Z","modified":"2022-10-28T04:20:17.113Z"},"maintainers":[{"name":"pengyh","email":"pt370390794@126.com"},{"name":"ashoka_j","email":"savebtc11@gmail.com"},{"name":"hang1017","email":"437132124@qq.com"},{"name":"hammersjs","email":"1270253618@qq.com"},{"name":"cjy0208","email":"fanluan058@gmail.com"},{"name":"xiaohuoni","email":"448627663@qq.com"}],"description":"use S2 with react","homepage":"https://s2.antv.vision","keywords":["antv","s2","s2-react","spreadsheet","pivot table","table"],"repository":{"type":"git","url":"git+https://github.com/antvis/S2.git"},"author":{"name":"https://github.com/orgs/antvis/people"},"bugs":{"url":"https://github.com/antvis/S2/issues"},"license":"MIT","readme":"<h1 align=\"center\">@antv/s2-react</h1>\n\n<div align=\"center\">\n\n数据驱动的多维分析表格 (React 版本）。\n\n<p>\n <a href=\"https://www.npmjs.com/package/@antv/s2-react\" title=\"npm\">\n    <img src=\"https://img.shields.io/npm/dm/@antv/s2-react.svg\" alt=\"npm\"/>\n  </a>\n  <a href=\"https://www.npmjs.com/package/@antv/s2-react\" target=\"_blank\">\n    <img alt=\"Version\" src=\"https://img.shields.io/npm/v/@antv/s2-react/latest.svg\" alt=\"latest version\">\n  </a>\n  <a href=\"https://www.npmjs.com/package/@antv/s2-react\" target=\"_blank\">\n    <img alt=\"Version\" src=\"https://img.shields.io/npm/v/@antv/s2-react/beta.svg\" alt=\"beta version\">\n  </a>\n   <a href=\"https://github.com/antvis/S2/actions/workflows/test.yml\" target=\"_blank\">\n    <img src=\"https://github.com/antvis/S2/actions/workflows/test.yml/badge.svg\" alt=\"ci test status\"/>\n  </a>\n</p>\n\n</div>\n\n## 📦 安装\n\n```bash\n$ npm install @antv/s2-react\n# yarn add @antv/s2-react\n```\n\n## 🔨 使用\n\n### 1. 数据准备\n\n<details>\n  <summary>s2DataConfig</summary>\n\n```ts\nconst s2DataConfig = {\n  fields: {\n    rows: ['province', 'city'],\n    columns: ['type'],\n    values: ['price'],\n  },\n  data: [\n     {\n      province: '浙江',\n      city: '杭州',\n      type: '笔',\n      price: '1',\n    },\n    {\n      province: '浙江',\n      city: '杭州',\n      type: '纸张',\n      price: '2',\n    },\n    {\n      province: '浙江',\n      city: '舟山',\n      type: '笔',\n      price: '17',\n    },\n    {\n      province: '浙江',\n      city: '舟山',\n      type: '纸张',\n      price: '0.5',\n    },\n    {\n      province: '吉林',\n      city: '长春',\n      type: '笔',\n      price: '8',\n    },\n    {\n      province: '吉林',\n      city: '白山',\n      type: '笔',\n      price: '9',\n    },\n    {\n      province: '吉林',\n      city: '长春',\n      type: ' 纸张',\n      price: '3',\n    },\n    {\n      province: '吉林',\n      city: '白山',\n      type: '纸张',\n      price: '1',\n    },\n  ],\n};\n```\n\n</details>\n\n### 2. 配置项准备\n\n<details>\n  <summary>s2Options</summary>\n\n```ts\nconst s2Options = {\n  width: 600,\n  height: 480,\n}\n```\n\n</details>\n\n### 3. 渲染\n\n```html\n<div id=\"container\"></div>\n```\n\n```ts\nimport { SheetComponent } from '@antv/s2-react';\nimport '@antv/s2-react/dist/style.min.css';\n\nconst container = document.getElementById('container');\n\nReactDOM.render(\n  <SheetComponent\n    dataCfg={s2DataConfig}\n    options={s2Options}\n  />,\n  document.getElementById('container'),\n);\n```\n\n### 4. 结果\n\n![result](https://gw.alipayobjects.com/zos/antfincdn/vCukbtVNvl/616f7ef1-e626-4225-99f8-dc8f6ca630dd.png)\n","readmeFilename":"README.md"}