{"_id":"@agungkes/react-table-hoc-draggable-columns","_rev":"1-09bcdad077a3d23f8d58198a57325eed","name":"@agungkes/react-table-hoc-draggable-columns","dist-tags":{"latest":"0.0.1"},"versions":{"0.0.1":{"name":"@agungkes/react-table-hoc-draggable-columns","version":"0.0.1","description":"ReactTable HOC for draggable columns","author":{"name":"patricktran"},"license":"MIT","repository":{"type":"git","url":"https://github.com/patricktran/react-table-hoc-draggable-columns.git"},"main":"dist/index.js","module":"dist/index.es.js","jsnext:main":"dist/index.es.js","engines":{"node":">=8","npm":">=5"},"scripts":{"test":"cross-env CI=1 react-scripts test --env=jsdom","test:watch":"react-scripts test --env=jsdom","build":"rollup -c","start":"rollup -c -w","prepare":"npm run build","predeploy":"cd example && npm install && npm run build","deploy":"gh-pages -d example/build"},"peerDependencies":{"prop-types":"^15.5.4","react":"^15.0.0 || ^16.0.0","react-dom":"^15.0.0 || ^16.0.0"},"devDependencies":{"@astappiev/rollup-plugin-scss":"^3.0.6","@svgr/rollup":"^2.4.1","babel-core":"^6.26.3","babel-eslint":"^8.2.5","babel-plugin-external-helpers":"^6.22.0","babel-preset-env":"^1.7.0","babel-preset-react":"^6.24.1","babel-preset-stage-0":"^6.24.1","cross-env":"^5.1.4","eslint":"^5.0.1","eslint-config-standard":"^11.0.0","eslint-config-standard-react":"^6.0.0","eslint-plugin-import":"^2.13.0","eslint-plugin-node":"^7.0.1","eslint-plugin-promise":"^4.0.0","eslint-plugin-react":"^7.10.0","eslint-plugin-standard":"^3.1.0","gh-pages":"^1.2.0","react":"^16.8.6","react-dom":"^16.8.6","react-scripts":"3.0.1","rollup":"^1.32.1","rollup-plugin-babel":"^3.0.7","rollup-plugin-commonjs":"^9.1.3","rollup-plugin-node-resolve":"^3.3.0","rollup-plugin-peer-deps-external":"^2.2.0","rollup-plugin-postcss":"^3.1.8","rollup-plugin-url":"^1.4.0"},"keywords":["react","react-table","hoc","draggable","draggable columns"],"dependencies":{"sass":"^1.49.8"},"licenseText":"MIT License\n\nCopyright (c) 2019 Patrick Tran\n\nPermission is hereby granted, free of charge, to any person obtaining a copy\nof this software and associated documentation files (the \"Software\"), to deal\nin the Software without restriction, including without limitation the rights\nto use, copy, modify, merge, publish, distribute, sublicense, and/or sell\ncopies of the Software, and to permit persons to whom the Software is\nfurnished to do so, subject to the following conditions:\n\nThe above copyright notice and this permission notice shall be included in all\ncopies or substantial portions of the Software.\n\nTHE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\nIMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\nFITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\nAUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\nLIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\nOUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE\nSOFTWARE.\n","_id":"@agungkes/react-table-hoc-draggable-columns@0.0.1","dist":{"shasum":"1f6a565e79bd937cf5bd9d48852e7ed883942325","integrity":"sha512-ZoE8zfBHScpUh8pdxF6yEr8NihFk4B8XSJ1lpuL3zBaqC5VpiucnQWwwSzHgp1/YRSLxj1MXpm5sGj2Zxie23w==","tarball":"https://registry.npmjs.org/@agungkes/react-table-hoc-draggable-columns/-/react-table-hoc-draggable-columns-0.0.1.tgz","fileCount":12,"unpackedSize":177123,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiHdDsACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmq7eBAAl65QJBzTI4zBeiT5/Wjn5BJ8xixSTNOk22e6aIMtwTTc8YV4\r\ntxitzi097ry1dYK0nVTn5J/Kh1kY2JRCmhKZnJNTNvAEdrVK4YLX0ml20kho\r\niN0S6Hg/JnYPlmXYxqXH7gMy8s/Baetiz9e0IuGgFG0MKQszrdxFvQQRx87Q\r\no2hPytgnf2kUbA+ZNQgk/vllI8LTkSKe8i4JeYkwRYHdkCMmm7+dvIqZWcwI\r\nTPLvEYTm0ij0sAPSF/lLYQ7AAcyh5+BS3st3wdhXi82Ib/hGDlF9TjA/DGP2\r\nSwwUyeaLqSBaWoab8HaRMlb3XSNM4mRXgrKVzsxbHalExdmB3PpIHuPJw0Jb\r\n/bMAloYYXlIXktQlB2YfzSjm0Xfkm6XzRHoEiNFYE/g5Xh49DSc6KkzIMAd7\r\nizgpxXcNZhaet/70BW7i27rohjZlDrSnCItIsKsjIYZXF/ykKF0wM5WeglBW\r\nUJvmOThA43MWkvoxjRwk5C5N+O2FMWSuwA7ElEr981JHDQ11lpQPvqv4MGDx\r\nRG8/2lnzmEsfHl58ljGeq3CifoAV+OhAp/g1y18u/CVg/1UUMZmyNa0JFLYK\r\nwpts5wO6FHK3rB+UNmEpr4HwUaCzl9+ywkjo45XzyveqH31YD5LOgYzM1y/x\r\nTQGIk7H7oT0l8JZO/pqTQi+f5t9dpr3IF3I=\r\n=eJhZ\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCID/fPuIv6VlsxkxWSiB6cvnDOJRtkkHOLo8NjxNgPn2yAiAESzvF8TsIhjZIx/+iPw0I4kTKlDxsV/BAsV/pfkkzFQ=="}]},"_npmUser":{"name":"agungkes","email":"cintarembo@gmail.com"},"directories":{},"maintainers":[{"name":"agungkes","email":"cintarembo@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-table-hoc-draggable-columns_0.0.1_1646121196682_0.8105118126198139"},"_hasShrinkwrap":false}},"time":{"created":"2022-03-01T07:53:16.626Z","0.0.1":"2022-03-01T07:53:16.856Z","modified":"2022-04-04T12:08:51.838Z"},"maintainers":[{"name":"agungkes","email":"cintarembo@gmail.com"}],"description":"ReactTable HOC for draggable columns","keywords":["react","react-table","hoc","draggable","draggable columns"],"repository":{"type":"git","url":"https://github.com/patricktran/react-table-hoc-draggable-columns.git"},"author":{"name":"patricktran"},"license":"MIT","readme":"# react-table-hoc-draggable-columns\n\n> ReactTable HOC for draggable columns\n\n[![NPM](https://img.shields.io/npm/v/react-table-hoc-draggable-columns.svg)](https://www.npmjs.com/package/react-table-hoc-draggable-columns) [![JavaScript Style Guide](https://img.shields.io/badge/code_style-standard-brightgreen.svg)](https://standardjs.com)\n\nHigher Order Component for [ReactTable](https://react-table.js.org) to enable Draggable columns for reordering or swapping positions.\n\n\\*Note: This version supports V6 of React Table.\n\n# Documentation\n\n- [Install](#install)\n- [Usage](#usage)\n- [Demo](https://patricktran.github.io/react-table-hoc-draggable-columns/)\n\n## Install\n\n```bash\nnpm install --save react-table-hoc-draggable-columns\n```\n\n## Usage\n\n```js\nimport ReactTable from 'react-table';\nimport \"react-table/react-table.css\";\nimport withDraggableColumns from 'react-table-hoc-draggable-columns';\nimport 'react-table-hoc-draggable-columns/dist/styles.css';\n\nconst ReactTableDraggableColumns = withDraggableColumns(ReactTable);\n...\nrender () {\n  return (\n    <ReactTableDraggableColumns\n      draggableColumns= {{\n        mode: 'reorder',\n        draggable: ['firstName', 'age']\n      }}\n      data={data}\n      columns={[\n        {\n          Header: 'First Name',\n          accessor: 'firstName',\n        },\n        {\n          Header: 'Last Name',\n          accessor: 'lastName',\n        },\n        ...\n        {\n          Header: 'age',\n          accessor: 'age',\n        }\n      ]}\n    />\n  )\n}\n```\n\n## Special Considerations\n\nIf any of your React Table columns are hidden (show: false), this HOC will automatically move those columns to the end of the list. This is to prevent hidden columns from throwing off calculating the updated column order.\n\nReactTable Columns Props [https://github.com/tannerlinsley/react-table/tree/v6.10.0#columns]\n\n## draggableColumns Prop\n\n| Property                        | Description                                                                                                                                             | Default value        | Type             | Required |\n| ------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------- | ---------------- | -------- |\n| `mode`                          | mode to either 'reorder' the column or 'swap' column position on drop                                                                                   | 'reorder'            | string           | yes      |\n| `draggable`                     | array of string-based column accessors or column ids (when using a custom accessor) to allow drag and drop                                              |                      | array of strings |          |\n| `enableColumnWideDrag`          | when {true} entire column is draggable. when {false} only header text is draggable                                                                      | true                 | bool             |          |\n| `disableTableScroll`            | disable ReactTable horizontal/vertical scrolling when dragging a column                                                                                 | false                | bool             |          |\n| `overflow`                      | used with disableTableScroll={true} to reset ReactTable overflow style onDragEnd event                                                                  | `auto`               | string           |          |\n| `useDragImage`                  | clone dragged column element? useful for applying a different css class.                                                                                | true                 | bool             |          |\n| `dragImageClassName`            | dragImageClassName only applies when useDragImage={true}                                                                                                | `rt-dragged-item`    | string           |          |\n| `onDragEnterClassName`          | when mode={'swap'} - css class applied on dragged over column                                                                                           | `rt-drag-enter-item` | string           |          |\n| `onDraggedColumnChange`         | callback method to be notified when column order changes - signature: function(columns)                                                                 |                      | function         |          |\n| `onDropSuccess`                 | callback method to be notified when on column drop success - signature: function(draggedColumn, targetColumn, oldIndex, newIndex, oldOffset, newOffset) |                      | function         |          |\n| `reorderIndicatorUpClassName`   | additional className for reorder indicator Up                                                                                                           |                      | string           |          |\n| `reorderIndicatorDownClassName` | additional className for reorder indicator Down                                                                                                         |                      | string           |          |\n\n## License\n\nMIT © [patricktran](https://github.com/patricktran)\n","readmeFilename":"README.md"}