├── .editorconfig ├── .eslintrc.js ├── .github ├── FUNDING.yml ├── ISSUE_TEMPLATE │ ├── bug_report.md │ └── feature_request.md ├── stale.yml └── workflows │ ├── main.yaml │ └── nodejs.yml ├── .gitignore ├── .npmignore ├── .prettierrc ├── .vscode ├── launch.json └── settings.json ├── CHANGELOG.md ├── README.md ├── attributes.json ├── bili.config.js ├── docs ├── advanced_usage.md ├── basic_usage.md ├── examples.md ├── helpers.md ├── index.md ├── install.md └── using_with_components.md ├── examples ├── advanced.html ├── advanced │ ├── custom-sort.mjs │ ├── events.mjs │ ├── force-render.mjs │ ├── global-event-bus.mjs │ ├── multi-column-sort.mjs │ ├── nested-header.mjs │ ├── stock-market.mjs │ ├── virtual-dom.mjs │ └── vue-events.mjs ├── basic.html ├── basic │ ├── auto-update.mjs │ ├── fixed-header.mjs │ ├── from-html-table.mjs │ ├── hello-world.mjs │ ├── hidden-columns.mjs │ ├── loading-state.mjs │ ├── pagination.mjs │ ├── resizable.mjs │ ├── search.mjs │ ├── sorting.mjs │ └── wide-table.mjs ├── customizing.html ├── customizing │ ├── cell-attributes.mjs │ ├── cell-formatting.mjs │ ├── html-in-cells.mjs │ ├── html-in-header-cells.mjs │ ├── row-buttons.mjs │ └── vue-component-in-cells.mjs ├── data-source.html ├── data-source │ ├── async-data-import.mjs │ ├── dynamic-data-import.mjs │ ├── from-html-table.mjs │ ├── import-server-side-data.mjs │ ├── json.mjs │ └── xml.mjs ├── server-side.html ├── server-side │ ├── custom-http-client.mjs │ ├── import-server-side-data.mjs │ ├── server-side-pagination.mjs │ ├── server-side-search.mjs │ └── server-side-sorting.mjs ├── styling.html ├── styling │ ├── css-class-name.mjs │ ├── css-in-js.mjs │ └── css-style.mjs └── test-component.mjs ├── package-lock.json ├── package.json ├── src ├── gridjs-vue.ts ├── lib │ ├── helpers │ │ ├── parseStylesheet.ts │ │ ├── resizeObserver.ts │ │ └── waitForSelector.ts │ ├── install.ts │ ├── lifecycle │ │ ├── onCreated.ts │ │ ├── onDestroyed.ts │ │ └── onMounted.ts │ ├── methods │ │ ├── bindToCell.ts │ │ └── update.ts │ └── setup │ │ ├── options.ts │ │ ├── props.ts │ │ ├── theme.ts │ │ └── watch.ts ├── main.d.ts └── main.ts ├── tags.json └── tsconfig.json /.editorconfig: -------------------------------------------------------------------------------- 1 | # top-most EditorConfig file 2 | root = true 3 | 4 | # Unix-style newlines with a newline ending every file 5 | [*] 6 | end_of_line = lf 7 | insert_final_newline = true 8 | charset = utf-8 9 | indent_style = space 10 | indent_size = 2 11 | -------------------------------------------------------------------------------- /.eslintrc.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | root: true, 3 | env: { 4 | browser: true, 5 | node: false 6 | }, 7 | extends: ['plugin:vue/recommended', 'eslint:recommended', 'plugin:import/errors', 'plugin:import/warnings'], 8 | parserOptions: { 9 | parser: 'babel-eslint' 10 | }, 11 | plugins: ['html'], 12 | rules: { 13 | 'import/no-unresolved': 'warn' 14 | }, 15 | overrides: [ 16 | { 17 | files: ['**/__tests__/*.{j,t}s?(x)', '**/tests/unit/**/*.spec.{j,t}s?(x)'], 18 | env: { 19 | jest: true 20 | } 21 | } 22 | ] 23 | } 24 | -------------------------------------------------------------------------------- /.github/FUNDING.yml: -------------------------------------------------------------------------------- 1 | # These are supported funding model platforms 2 | 3 | # github: [afshinm] 4 | patreon: # Replace with a single Patreon username 5 | open_collective: gridjs 6 | ko_fi: # Replace with a single Ko-fi username 7 | tidelift: # Replace with a single Tidelift platform-name/package-name e.g., npm/babel 8 | community_bridge: # Replace with a single Community Bridge project-name e.g., cloud-foundry 9 | liberapay: # Replace with a single Liberapay username 10 | issuehunt: # Replace with a single IssueHunt username 11 | otechie: # Replace with a single Otechie username 12 | custom: # Replace with up to 4 custom sponsorship URLs e.g., ['link1', 'link2'] 13 | -------------------------------------------------------------------------------- /.github/ISSUE_TEMPLATE/bug_report.md: -------------------------------------------------------------------------------- 1 | --- 2 | name: Bug report 3 | about: Create a report to help us improve 4 | title: '' 5 | labels: '' 6 | assignees: '' 7 | 8 | --- 9 | 10 | **Describe the bug** 11 | A clear and concise description of what the bug is. 12 | 13 | **To Reproduce** 14 | Steps to reproduce the behavior: 15 | 1. Go to '...' 16 | 2. Click on '....' 17 | 3. Scroll down to '....' 18 | 4. See error 19 | 20 | **Expected behavior** 21 | A clear and concise description of what you expected to happen. 22 | 23 | **Screenshots** 24 | If applicable, add screenshots to help explain your problem. 25 | 26 | **Desktop (please complete the following information):** 27 | - OS: [e.g. iOS] 28 | - Browser [e.g. chrome, safari] 29 | - Version [e.g. 22] 30 | 31 | **Smartphone (please complete the following information):** 32 | - Device: [e.g. iPhone6] 33 | - OS: [e.g. iOS8.1] 34 | - Browser [e.g. stock browser, safari] 35 | - Version [e.g. 22] 36 | 37 | **Additional context** 38 | Add any other context about the problem here. 39 | -------------------------------------------------------------------------------- /.github/ISSUE_TEMPLATE/feature_request.md: -------------------------------------------------------------------------------- 1 | --- 2 | name: Feature request 3 | about: Suggest an idea for this project 4 | title: '' 5 | labels: '' 6 | assignees: '' 7 | 8 | --- 9 | 10 | **Is your feature request related to a problem? Please describe.** 11 | A clear and concise description of what the problem is. Ex. I'm always frustrated when [...] 12 | 13 | **Describe the solution you'd like** 14 | A clear and concise description of what you want to happen. 15 | 16 | **Describe alternatives you've considered** 17 | A clear and concise description of any alternative solutions or features you've considered. 18 | 19 | **Additional context** 20 | Add any other context or screenshots about the feature request here. 21 | -------------------------------------------------------------------------------- /.github/stale.yml: -------------------------------------------------------------------------------- 1 | # Number of days of inactivity before an issue becomes stale 2 | daysUntilStale: 30 3 | # Number of days of inactivity before a stale issue is closed 4 | daysUntilClose: 7 5 | # Issues with these labels will never be considered stale 6 | exemptLabels: 7 | - pinned 8 | - security 9 | - feature 10 | - roadmap 11 | - bug 12 | # Label to use when marking an issue as stale 13 | staleLabel: wontfix 14 | # Comment to post when marking an issue as stale. Set to `false` to disable 15 | markComment: > 16 | This issue has been automatically marked as stale because it has not had 17 | recent activity. It will be closed if no further activity occurs. Thank you 18 | for your contributions. 19 | # Comment to post when closing a stale issue. Set to `false` to disable 20 | closeComment: false 21 | -------------------------------------------------------------------------------- /.github/workflows/main.yaml: -------------------------------------------------------------------------------- 1 | name: Compressed Size 2 | 3 | on: [pull_request] 4 | 5 | jobs: 6 | build: 7 | 8 | runs-on: ubuntu-latest 9 | 10 | steps: 11 | - uses: actions/checkout@v2 12 | - uses: preactjs/compressed-size-action@v2 13 | with: 14 | repo-token: "${{ secrets.GITHUB_TOKEN }}" 15 | -------------------------------------------------------------------------------- /.github/workflows/nodejs.yml: -------------------------------------------------------------------------------- 1 | name: Node.js CI 2 | 3 | on: [push] 4 | 5 | jobs: 6 | build: 7 | 8 | runs-on: ubuntu-latest 9 | 10 | strategy: 11 | matrix: 12 | node-version: [11.x, 12.x, 13.x, 14.x] 13 | 14 | steps: 15 | - uses: actions/checkout@v2 16 | - name: Use Node.js ${{ matrix.node-version }} 17 | uses: actions/setup-node@v1 18 | with: 19 | node-version: ${{ matrix.node-version }} 20 | - run: npm install 21 | - run: npm run build 22 | env: 23 | CI: true 24 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | 2 | # Created by https://www.toptal.com/developers/gitignore/api/linux,macos,node,dotenv,visualstudiocode,vuejs 3 | # Edit at https://www.toptal.com/developers/gitignore?templates=linux,macos,node,dotenv,visualstudiocode,vuejs 4 | 5 | ### dotenv ### 6 | .env 7 | 8 | ### Linux ### 9 | *~ 10 | 11 | # temporary files which can be created if a process still has a handle open of a deleted file 12 | .fuse_hidden* 13 | 14 | # KDE directory preferences 15 | .directory 16 | 17 | # Linux trash folder which might appear on any partition or disk 18 | .Trash-* 19 | 20 | # .nfs files are created when an open file is removed but is still being accessed 21 | .nfs* 22 | 23 | ### macOS ### 24 | # General 25 | .DS_Store 26 | .AppleDouble 27 | .LSOverride 28 | 29 | # Icon must end with two \r 30 | Icon 31 | 32 | 33 | # Thumbnails 34 | ._* 35 | 36 | # Files that might appear in the root of a volume 37 | .DocumentRevisions-V100 38 | .fseventsd 39 | .Spotlight-V100 40 | .TemporaryItems 41 | .Trashes 42 | .VolumeIcon.icns 43 | .com.apple.timemachine.donotpresent 44 | 45 | # Directories potentially created on remote AFP share 46 | .AppleDB 47 | .AppleDesktop 48 | Network Trash Folder 49 | Temporary Items 50 | .apdisk 51 | 52 | ### Node ### 53 | # Logs 54 | logs 55 | *.log 56 | npm-debug.log* 57 | yarn-debug.log* 58 | yarn-error.log* 59 | lerna-debug.log* 60 | 61 | # Diagnostic reports (https://nodejs.org/api/report.html) 62 | report.[0-9]*.[0-9]*.[0-9]*.[0-9]*.json 63 | 64 | # Runtime data 65 | pids 66 | *.pid 67 | *.seed 68 | *.pid.lock 69 | 70 | # Directory for instrumented libs generated by jscoverage/JSCover 71 | lib-cov 72 | 73 | # Coverage directory used by tools like istanbul 74 | coverage 75 | *.lcov 76 | 77 | # nyc test coverage 78 | .nyc_output 79 | 80 | # Grunt intermediate storage (https://gruntjs.com/creating-plugins#storing-task-files) 81 | .grunt 82 | 83 | # Bower dependency directory (https://bower.io/) 84 | bower_components 85 | 86 | # node-waf configuration 87 | .lock-wscript 88 | 89 | # Compiled binary addons (https://nodejs.org/api/addons.html) 90 | build/Release 91 | 92 | # Dependency directories 93 | node_modules/ 94 | jspm_packages/ 95 | 96 | # TypeScript v1 declaration files 97 | typings/ 98 | 99 | # TypeScript cache 100 | *.tsbuildinfo 101 | 102 | # Optional npm cache directory 103 | .npm 104 | 105 | # Optional eslint cache 106 | .eslintcache 107 | 108 | # Optional stylelint cache 109 | .stylelintcache 110 | 111 | # Microbundle cache 112 | .rpt2_cache/ 113 | .rts2_cache_cjs/ 114 | .rts2_cache_es/ 115 | .rts2_cache_umd/ 116 | 117 | # Optional REPL history 118 | .node_repl_history 119 | 120 | # Output of 'npm pack' 121 | *.tgz 122 | 123 | # Yarn Integrity file 124 | .yarn-integrity 125 | 126 | # dotenv environment variables file 127 | .env.test 128 | .env*.local 129 | 130 | # parcel-bundler cache (https://parceljs.org/) 131 | .cache 132 | .parcel-cache 133 | 134 | # Next.js build output 135 | .next 136 | 137 | # Nuxt.js build / generate output 138 | .nuxt 139 | dist 140 | 141 | # Storybook build outputs 142 | .out 143 | .storybook-out 144 | storybook-static 145 | 146 | # rollup.js default build output 147 | dist/ 148 | 149 | # Gatsby files 150 | .cache/ 151 | # Comment in the public line in if your project uses Gatsby and not Next.js 152 | # https://nextjs.org/blog/next-9-1#public-directory-support 153 | # public 154 | 155 | # vuepress build output 156 | .vuepress/dist 157 | 158 | # Serverless directories 159 | .serverless/ 160 | 161 | # FuseBox cache 162 | .fusebox/ 163 | 164 | # DynamoDB Local files 165 | .dynamodb/ 166 | 167 | # TernJS port file 168 | .tern-port 169 | 170 | # Stores VSCode versions used for testing VSCode extensions 171 | .vscode-test 172 | 173 | # Temporary folders 174 | tmp/ 175 | temp/ 176 | 177 | ### VisualStudioCode ### 178 | .vscode/* 179 | !.vscode/settings.json 180 | !.vscode/tasks.json 181 | !.vscode/launch.json 182 | !.vscode/extensions.json 183 | *.code-workspace 184 | 185 | ### VisualStudioCode Patch ### 186 | # Ignore all local history of files 187 | .history 188 | .ionide 189 | 190 | ### Vuejs ### 191 | # Recommended template: Node.gitignore 192 | 193 | npm-debug.log 194 | yarn-error.log 195 | 196 | # End of https://www.toptal.com/developers/gitignore/api/linux,macos,node,dotenv,visualstudiocode,vuejs 197 | 198 | .dccache 199 | build 200 | -------------------------------------------------------------------------------- /.npmignore: -------------------------------------------------------------------------------- 1 | !dist 2 | ._* 3 | .apdisk 4 | .AppleDB 5 | .AppleDesktop 6 | .AppleDouble 7 | .cache/ 8 | .com.apple.timemachine.donotpresent 9 | .dccache 10 | .directory 11 | .DocumentRevisions-V100 12 | .DS_Store 13 | .dynamodb/ 14 | .env 15 | .env.test 16 | .env*.local 17 | .eslintcache 18 | .fseventsd 19 | .fuse_hidden* 20 | .fusebox/ 21 | .grunt 22 | .history 23 | .ionide 24 | .lock-wscript 25 | .LSOverride 26 | .next 27 | .nfs* 28 | .node_repl_history 29 | .npm 30 | .nuxt 31 | .nyc_output 32 | .out 33 | .parcel-cache 34 | .rpt2_cache/ 35 | .rts2_cache_cjs/ 36 | .rts2_cache_es/ 37 | .rts2_cache_umd/ 38 | .serverless/ 39 | .Spotlight-V100 40 | .storybook-out 41 | .stylelintcache 42 | .TemporaryItems 43 | .tern-port 44 | .Trash-* 45 | .Trashes 46 | .VolumeIcon.icns 47 | .vscode-test 48 | .vscode/ 49 | .vuepress/dist 50 | .yarn-integrity 51 | *.code-workspace 52 | *.lcov 53 | *.log 54 | *.pid 55 | *.pid.lock 56 | *.seed 57 | *.tgz 58 | *.tsbuildinfo 59 | *~ 60 | bower_components 61 | build 62 | build/Release 63 | coverage 64 | Icon 65 | jspm_packages/ 66 | lerna-debug.log* 67 | lib-cov 68 | logs 69 | Network Trash Folder 70 | node_modules/ 71 | npm-debug.log 72 | npm-debug.log* 73 | pids 74 | report.[0-9]*.[0-9]*.[0-9]*.[0-9]*.json 75 | storybook-static 76 | temp/ 77 | Temporary Items 78 | tmp/ 79 | typings/ 80 | yarn-debug.log* 81 | yarn-error.log 82 | yarn-error.log* 83 | -------------------------------------------------------------------------------- /.prettierrc: -------------------------------------------------------------------------------- 1 | { 2 | "arrowParens": "avoid", 3 | "bracketSpacing": true, 4 | "jsxBracketSameLine": true, 5 | "printWidth": 120, 6 | "proseWrap": "preserve", 7 | "semi": false, 8 | "singleQuote": true, 9 | "tabWidth": 2, 10 | "trailingComma": "none" 11 | } 12 | -------------------------------------------------------------------------------- /.vscode/launch.json: -------------------------------------------------------------------------------- 1 | { 2 | // Use IntelliSense to learn about possible attributes. 3 | // Hover to view descriptions of existing attributes. 4 | // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387 5 | "version": "0.2.0", 6 | "configurations": [ 7 | { 8 | "type": "node", 9 | "name": "vscode-jest-tests", 10 | "request": "launch", 11 | "args": ["--runInBand"], 12 | "cwd": "${workspaceFolder}", 13 | "console": "integratedTerminal", 14 | "internalConsoleOptions": "neverOpen", 15 | "disableOptimisticBPs": true, 16 | "program": "${workspaceFolder}/node_modules/jest/bin/jest" 17 | } 18 | ] 19 | } 20 | -------------------------------------------------------------------------------- /.vscode/settings.json: -------------------------------------------------------------------------------- 1 | { 2 | "deepscan.enable": true, 3 | "deno.enable": false, 4 | "python.pythonPath": "/usr/bin/python3", 5 | "i18n-ally.localesPaths": [] 6 | } -------------------------------------------------------------------------------- /CHANGELOG.md: -------------------------------------------------------------------------------- 1 | # Changelog 2 | 3 | All notable changes to this project will be documented in this file. Dates are displayed in UTC. 4 | 5 | ## [Unreleased] 6 | 7 | - All new documentation af3db2b 8 | - Update README.md 40da820 9 | - update devdeps 17626e7 10 | - Rework new helper function f2cf99b 11 | - Add ready event f88802d 12 | - To the moon and back a5d40d7 13 | - Update table on window resize ea93940 14 | - Change attribute names to match GridJS API 995c66b 15 | - Update attributes.json abdaa15 16 | 17 | ## [5.0.1] - 2021-06-08 18 | 19 | - Major update! 20 | - Changed semantic versioning to match version of Grid.js on which it is built to work 21 | - Moved entirely to an ES6 module 22 | - Dropped npm dependencies in favor of unpkg so it can be used entirely on the frontend without bundlers 23 | - Removed inessential dependencies and lightened the weight of others 24 | - Simplified the testing procedure 25 | 26 | ## [4.0.0] - 2020-07-14 27 | 28 | - Update documentation 29 | 30 | ## [0.4.0] - 2020-07-14 31 | 32 | - Fix global import 33 | - Add createRef, h, html methods 34 | 35 | ## [0.3.5] - 2020-06-28 36 | 37 | - :wrench: another vain attempt at getting release-it to work [`48919aa`](https://gitlab.com/selfagency/vue-gridjs/commit/48919aa36f757260ca6c15922fe2765a8b3864c5) 38 | - Release 0.3.5 [`7ca243f`](https://gitlab.com/selfagency/vue-gridjs/commit/7ca243f23db1cdb05006a873b40f4b92bc753651) 39 | 40 | ## 0.3.4 - 2020-06-28 41 | 42 | - fix url [`#5`](https://gitlab.com/selfagency/vue-gridjs/merge_requests/5) 43 | - fix css module issue and update to latest grid.js api [`5ab77cd`](https://gitlab.com/selfagency/vue-gridjs/commit/5ab77cd6dee279618d8ef23862c85570464bc159) 44 | - initial commit [`178cd64`](https://gitlab.com/selfagency/vue-gridjs/commit/178cd6453a4f364e68fa733031624b6bf803e509) 45 | - fix update api + scoped css [`a479420`](https://gitlab.com/selfagency/vue-gridjs/commit/a479420008d8850ece56bb867d079ab39b0150f7) 46 | 47 | [unreleased]: https://github.com/grid-js/gridjs-vue/compare/v0.0.1...HEAD 48 | [0.4.0]: https://gitlab.com/selfagency/vue-gridjs/compare/v0.3.5...v0.4.0 49 | [0.3.5]: https://gitlab.com/selfagency/vue-gridjs/compare/v0.3.4...v0.3.5 50 | [0.3.4]: https://gitlab.com/selfagency/vue-gridjs/compare/v0.3.3...v0.3.4 51 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # gridjs-vue 2 | 3 | ![gridjs-vue logo](https://user-images.githubusercontent.com/2541728/84843482-ffc31c00-b015-11ea-95e8-dc6fb3931ad5.png) 4 | 5 | A Vue wrapper component for [Grid.js](https://gridjs.io). 6 | 7 | [![npm](https://img.shields.io/npm/v/gridjs-vue?color=blue&label=current&style=flat-square)](https://www.npmjs.com/package/gridjs-vue) 8 | ![Grid.js API 9 | version](https://img.shields.io/badge/Grid.js%20API-v5.0.1-blue?style=flat-square) 10 | ![GitHub last commit](https://img.shields.io/github/last-commit/grid-js/gridjs-vue?color=41B883&style=flat-square) 11 | [![GitHub 12 | issues](https://img.shields.io/github/issues/grid-js/gridjs-vue?color=41B883&style=flat-square)](https://github.com/grid-js/gridjs-vue/issues) 13 | [![Discord](https://img.shields.io/discord/711188165850955858?color=41B883&style=flat-square&label=discord)](https://discord.com/invite/K55BwDY) 14 | 15 | ## Install 16 | 17 | ```sh 18 | npm install gridjs-vue 19 | ``` 20 | 21 | Also available on [unpkg](https://unpkg.com/browse/gridjs-vue/dist/) and [Skypack](https://www.skypack.dev/view/gridjs-vue)! 22 | 23 | ```html 24 | 33 | ``` 34 | 35 | ## Basic Usage 36 | 37 | Pass `columns` (an array of column headers) and either `rows`, `from`, or `server` as a data source to the component. Everything else is optional. Pass in new data to update the table. 38 | 39 | **[Read the full documentation](docs/index.md) for further configuration options.** 40 | 41 | ### Example 42 | 43 | ```html 44 | 47 | 48 | 72 | ``` 73 | 74 | ## 🤝 Contributing 75 | 76 | Originally authored by [Daniel Sieradski](https://twitter.com/self_agency). 77 | 78 | Contributions, issues and feature requests are welcome! 79 | 80 | Feel free to check [issues page](https://github.com/grid-js/gridjs-vue/issues). 81 | 82 | ## Show your support 83 | 84 | Give a ⭐️ if this project helped you! 85 | -------------------------------------------------------------------------------- /attributes.json: -------------------------------------------------------------------------------- 1 | { 2 | "gridjs-vue/autoWidth": { 3 | "type": "boolean", 4 | "description": "Boolean to automatically set table width. Default: true" 5 | }, 6 | "gridjs-vue/classNames": { 7 | "type": "object", 8 | "description": "Object containing CSS class definitions. Default: undefined" 9 | }, 10 | "gridjs-vue/columns": { 11 | "type": "array", 12 | "description": "Array containing strings of column headers. Default: undefined" 13 | }, 14 | "gridjs-vue/fixedHeader": { 15 | "type": "boolean", 16 | "description": "Boolean to fix position of table header. Default: false" 17 | }, 18 | "gridjs-vue/from": { 19 | "type": ["string", "function"], 20 | "description": "String of HTML table selector or function returning HTML table string. Default: undefined" 21 | }, 22 | "gridjs-vue/height": { 23 | "type": "string", 24 | "description": "String that sets the height of the table excluding search, pagination, etc. Default: undefined" 25 | }, 26 | "gridjs-vue/language": { 27 | "type": "object", 28 | "description": "Localization dictionary object. Default: undefined" 29 | }, 30 | "gridjs-vue/pagination": { 31 | "type": ["boolean", "object"], 32 | "description": "Boolean or pagination settings object. Default: true" 33 | }, 34 | "gridjs-vue/resizable": { 35 | "type": "boolean", 36 | "description": "Boolean activating resizable columns. Default: false" 37 | }, 38 | "gridjs-vue/rows": { 39 | "type": ["array", "function"], 40 | "description": "Array containing or function returning row data. Default: undefined" 41 | }, 42 | "gridjs-vue/search": { 43 | "type": ["boolean", "object"], 44 | "description": "Boolean activating search. Default: false" 45 | }, 46 | "gridjs-vue/server": { 47 | "type": ["object", "function"], 48 | "description": "Server settings object or function returning object. Default: undefined" 49 | }, 50 | "gridjs-vue/sort": { 51 | "type": ["boolean", "object"], 52 | "description": "Boolean activating sort on all columns. Default: false" 53 | }, 54 | "gridjs-vue/styles": { 55 | "type": "object", 56 | "description": "Object containing CSS style definitions. Default: undefined" 57 | }, 58 | "gridjs-vue/theme": { 59 | "type": "string", 60 | "description": "String with name of theme or 'none' to disable. Default: 'mermaid'" 61 | }, 62 | "gridjs-vue/width": { 63 | "type": "string", 64 | "description": "String with CSS width value. Default: undefined" 65 | } 66 | } 67 | -------------------------------------------------------------------------------- /bili.config.js: -------------------------------------------------------------------------------- 1 | const config = { 2 | input: 'src/main.ts', 3 | bundleNodeModules: true, 4 | externals: ['vue'], 5 | output: { 6 | format: ['cjs', 'esm', 'umd'], 7 | minify: true, 8 | moduleName: 'Grid', 9 | extractCSS: false, 10 | sourceMap: true, 11 | dir: 'dist/' 12 | }, 13 | plugins: { 14 | babel: false, 15 | vue: { 16 | target: 'browser' 17 | } 18 | } 19 | } 20 | export default config 21 | -------------------------------------------------------------------------------- /docs/advanced_usage.md: -------------------------------------------------------------------------------- 1 | # Advanced Usage 2 | 3 | ## Extended Options 4 | 5 | Refer to [Grid.js documentation](https://gridjs.io/docs/config/) for specific configuration options. 6 | 7 | ```html 8 | 27 | 28 | 140 | ``` 141 | 142 | ## Directly accessing the Grid.js instance 143 | 144 | This component is innately reactive and updates itself when you change the component's data or options in Vue. 145 | Interacting with the Grid.js instance directly should not be necessary but remains optional, as this implementation 146 | demonstrates. The Grid.js instance can be accessed directly using a `ref` attribute, as shown below. 147 | 148 | ```html 149 | 152 | 153 | 179 | ``` 180 | 181 | [< Back to contents](index.md) 182 | -------------------------------------------------------------------------------- /docs/basic_usage.md: -------------------------------------------------------------------------------- 1 | # Basic Usage 2 | 3 | Pass `columns` (an array of column headers) and either `rows`, `from`, or `server` as a data source to the component. Everything else is optional. Pass in new data to update the table. 4 | 5 | ## Example 6 | 7 | ```html 8 | 11 | 12 | 36 | ``` 37 | 38 | ## Default Options 39 | 40 | ```json 41 | { 42 | "autoWidth": true, 43 | "className": undefined, 44 | "columns": [""], 45 | "fixedHeader": false, 46 | "from": undefined, 47 | "height": undefined, 48 | "language": undefined, 49 | "pagination": false, 50 | "resizable": true, 51 | "rows": undefined, 52 | "search": false, 53 | "server": undefined, 54 | "sort": false, 55 | "style": undefined, 56 | "theme": "mermaid", 57 | "width": "100%" 58 | } 59 | ``` 60 | 61 | ## Advanced Usage 62 | 63 | [Click here](advanced_usage.md) for advanced usage instructions. 64 | 65 | [< Back to contents](index.md) 66 | -------------------------------------------------------------------------------- /docs/examples.md: -------------------------------------------------------------------------------- 1 | # Examples 2 | 3 | A large collection of code examples is available within this repository, demonstrating how to implement various Grid.js 4 | functionality in Vue using this component. These examples mirror those found in the [Grid.js documentation](https://gridjs.io/docs/examples). 5 | 6 | ## Basic 7 | 8 | - [Hello World](../examples/basic/hello-world.mjs) 9 | - [From HTML Table](../examples/basic/from-html-table.mjs) 10 | - [Pagination](../examples/basic/pagination.mjs) 11 | - [Search](../examples/basic/search.mjs) 12 | - [Sorting](../examples/basic/sorting.mjs) 13 | - [Resizable Columns](../examples/basic/resizable.mjs) 14 | - [Loading State](../examples/basic/loading-state.mjs) 15 | - [Wide Table](../examples/basic/wide-table.mjs) 16 | - [Fixed Header](../examples/basic/fixed-header.mjs) 17 | - [Hidden Columns](../examples/basic/hidden-columns.mjs) 18 | - [Auto-update](../examples/basic/auto-update.mjs) 19 | 20 | [Preview](../examples/basic.html) 21 | 22 | ## Data Source 23 | 24 | - [JSON](../examples/data-source/json.mjs) 25 | - [XML](../examples/data-source/xml.mjs) 26 | - [From HTML Table](../examples/data-source/from-html-table.mjs) 27 | - [Import server-side data](../examples/data-source/import-server-side-data.mjs) 28 | - [Dynamic data import](../examples/data-source/dynamic-data-import.mjs) 29 | - [Async data import](../examples/data-source/async-data-import.mjs) 30 | 31 | [Preview](../examples/data-source.html) 32 | 33 | ## Server-Side 34 | 35 | - [Import server-side data](../examples/server-side/import-server-side-data.mjs) 36 | - [Server-side Search](../examples/server-side/server-side-search.mjs) 37 | - [Server-side Pagination](../examples/server-side/server-side-pagination.mjs) 38 | - [Server-side Sorting](../examples/server-side/server-side-sorting.mjs) 39 | - [Custom HTTP Client](../examples/server-side/custom-http-client.mjs) 40 | 41 | [Preview](../examples/server-side.html) 42 | 43 | ## Styling 44 | 45 | - [CSS Style](../examples/styling/css-style.mjs) 46 | - [CSS ClassName](../examples/styling/css-class-name.mjs) 47 | - [CSS-in-JS](../examples/styling/css-in-js.mjs) 48 | 49 | [Preview](../examples/styling.html) 50 | 51 | ## Customizing 52 | 53 | - [Cell Formatting](../examples/customizing/cell-formatting.mjs) 54 | - [Cell Attributes](../examples/customizing/cell-attributes.mjs) 55 | - [Row Buttons](../examples/customizing/row-buttons.mjs) 56 | - [HTML in Cells](../examples/customizing/html-in-cells.mjs) 57 | - [HTML in Header Cells](../examples/customizing/html-in-header-cells.mjs) 58 | - [Vue Components in Cells](../examples/customizing/vue-component-in-cells.mjs) 59 | 60 | [Preview](../examples/customizing.html) 61 | 62 | ## Advanced 63 | 64 | - [Nested Header](../examples/advanced/nested-header.mjs) 65 | - [forceRender](../examples/advanced/force-render.mjs) 66 | - [Virtual DOM](../examples/advanced/virtual-dom.mjs) 67 | - [Multi-Column Sort](../examples/advanced/multi-column-sort.mjs) 68 | - [Custom Sort](../examples/advanced/custom-sort.mjs) 69 | - [Stock Market](../examples/advanced/stock-market.mjs) 70 | - [Events](../examples/advanced/events.mjs) 71 | - [Vue Events](../examples/advanced/vue-events.mjs) 72 | - [Global Event Bus](../examples/advanced/global-event-bus.mjs) 73 | 74 | [Preview](../examples/advanced.html) 75 | 76 | [< Back to contents](index.md) 77 | -------------------------------------------------------------------------------- /docs/helpers.md: -------------------------------------------------------------------------------- 1 | # Helper Functions 2 | 3 | ## \$gridjs.helper 4 | 5 | Simplifies use of Vue components in table formatters. 6 | 7 | Usage: 8 | 9 | ```js 10 | export default { 11 | components: { 12 | Grid 13 | }, 14 | data() { 15 | return { 16 | columns: [ 17 | { 18 | name: 'Name', 19 | formatter: cell => 20 | return this.$gridjs.helper({ 21 | components: { TestComponent }, 22 | template: ``, 23 | data() { 24 | return { 25 | content: `🥳 ${cell}` 26 | } 27 | } 28 | }) 29 | }, 30 | 'Email' 31 | ], 32 | rows: Array(5) 33 | .fill() 34 | .map(() => [faker.name.findName(), faker.internet.email()]) 35 | } 36 | }, 37 | template: ` 38 |
39 | ` 40 | } 41 | ``` 42 | 43 | ## \$gridjs.html 44 | 45 | Renders [HTML in a formatter function](https://gridjs.io/docs/examples/html-cells). 46 | 47 | Example: 48 | 49 | ```js 50 | this.columns = [ 51 | { 52 | name: 'Model', 53 | formatter: cell => this.$gridjs.html(`${cell}`) 54 | } 55 | ] 56 | ``` 57 | 58 | ## \$gridjs.h 59 | 60 | Grid.js is built in Preact, so why not take advantage of it? Renders a [Preact virtual DOM instance](https://gridjs.io/docs/examples/virtual-dom). 61 | 62 | Usage: 63 | 64 | ```js 65 | this.columns = [ 66 | { 67 | name: 'Actions', 68 | formatter: (cell, row) => { 69 | return this.$gridjs.h( 70 | 'button', 71 | { 72 | onClick: () => 73 | alert(` 74 | Editing "${row.cells[0].data}" 75 | `) 76 | }, 77 | 'Edit' 78 | ) 79 | } 80 | } 81 | ] 82 | ``` 83 | 84 | [< Back to contents](index.md) 85 | -------------------------------------------------------------------------------- /docs/index.md: -------------------------------------------------------------------------------- 1 | # `gridjs-vue` User Guide 2 | 3 | 1. [Install](install.md) 4 | 2. [Basic Usage](basic_usage.md) 5 | 3. [Advanced Usage](advanced_usage.md) 6 | 4. [Using With Vue Components](using_with_components.md) 7 | 5. [Helpers](helpers.md) 8 | 6. [Examples](examples.md) 9 | -------------------------------------------------------------------------------- /docs/install.md: -------------------------------------------------------------------------------- 1 | # Install 2 | 3 | ```sh 4 | npm install gridjs-vue 5 | ``` 6 | 7 | Also available on [unpkg](https://unpkg.com/browse/gridjs-vue@5.0.1/dist/) and [Skypack](https://www.skypack.dev/view/gridjs-vue)! 8 | 9 | ## Component Registration 10 | 11 | ### Local Registration 12 | 13 | ```html 14 | 23 | ``` 24 | 25 | ### Global Registration 26 | 27 | ```js 28 | /* in `main.js` or wherever you specify your global components */ 29 | import { GridGlobal } from 'gridjs-vue' 30 | 31 | Vue.use(GridGlobal) 32 | ``` 33 | 34 | [< Back to contents](index.md) 35 | -------------------------------------------------------------------------------- /docs/using_with_components.md: -------------------------------------------------------------------------------- 1 | # Using with Vue components 2 | 3 | `gridjs-vue` comes with a [helper method](helpers.md), `$gridjs.helper()`, with which you can insert a Vue component 4 | directly into a table cell or row. 5 | 6 | ```html 7 | 10 | 11 | 46 | ``` 47 | 48 | ## Handling child component events 49 | 50 | If the Vue component you are inserting into the Grid.js instance has events that bubble up, you can handle them by 51 | passing `methods` to `$gridjs.helper()` containing your event handler, just as you would normally. 52 | 53 | ```html 54 | 57 | 58 | 99 | ``` 100 | 101 | ## Using A Global Event Bus 102 | 103 | Because it is instantiating within a Preact component, each Vue component becomes its own Vue instance and therefore cannot 104 | communicate back with the main Vue application unless using a separate global event bus, as shown in the following implementation. 105 | 106 | ```js 107 | import Emittery from 'https://cdn.skypack.dev/emittery' 108 | import faker from 'https://cdn.skypack.dev/faker' 109 | import { Grid } from '../../dist/main.esm.js' 110 | 111 | window.emitter = new Emittery() 112 | 113 | const TestComponent = { 114 | name: 'TestComponent', 115 | props: { 116 | content: { 117 | type: String, 118 | default: 'Hello, world!' 119 | }, 120 | emitter: { 121 | type: Object, 122 | default: null 123 | } 124 | }, 125 | data() { 126 | return { 127 | styling: 'color: #f00;' 128 | } 129 | }, 130 | methods: { 131 | emit(args) { 132 | return window.emitter.emit(args) 133 | } 134 | }, 135 | template: ` 136 |
137 |
138 |
139 | ` 140 | } 141 | 142 | export default { 143 | name: 'SharedEventBus', 144 | components: { 145 | Grid 146 | }, 147 | data() { 148 | return { 149 | emitter: window.emitter, 150 | columns: [ 151 | { 152 | name: 'Name', 153 | formatter: cell => { 154 | return this.$gridjs.helper({ 155 | components: { TestComponent }, 156 | template: ``, 157 | data() { 158 | return { 159 | content: `🥳 ${cell}` 160 | } 161 | } 162 | }) 163 | } 164 | }, 165 | 'Email' 166 | ], 167 | rows: Array(5) 168 | .fill() 169 | .map(() => [faker.name.findName(), faker.internet.email()]) 170 | } 171 | }, 172 | mounted() { 173 | this.emitter.on('sayHello', () => console.log('hello')) 174 | }, 175 | template: ` 176 |
177 | ` 178 | } 179 | ``` 180 | 181 | [< Back to contents](index.md) 182 | -------------------------------------------------------------------------------- /examples/advanced.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Grid.js Vue Component Test 5 | 6 | 7 | 8 |
9 | 10 | 86 | 87 | 88 | -------------------------------------------------------------------------------- /examples/advanced/custom-sort.mjs: -------------------------------------------------------------------------------- 1 | import { Grid } from '../../dist/main.esm.js' 2 | 3 | export default { 4 | name: 'CustomSort', 5 | components: { 6 | Grid 7 | }, 8 | data() { 9 | return { 10 | columns: [ 11 | 'Name', 12 | 'Email', 13 | { 14 | name: 'Phone Number', 15 | sort: { 16 | compare: (a, b) => { 17 | const code = x => x.split(' ')[0] 18 | 19 | if (code(a) > code(b)) { 20 | return 1 21 | } else if (code(b) > code(a)) { 22 | return -1 23 | } else { 24 | return 0 25 | } 26 | } 27 | } 28 | } 29 | ], 30 | sort: true, 31 | rows: [ 32 | ['John', 'john@example.com', '+353 40 222 3333'], 33 | ['Mark', 'mark@gmail.com', '+1 22 888 4444'], 34 | ['Eoin', 'eo3n@yahoo.com', '+355 10 878 5554'], 35 | ['Nisen', 'nis900@gmail.com', '+313 333 1923'] 36 | ] 37 | } 38 | }, 39 | template: ` 40 |
41 | ` 42 | } 43 | -------------------------------------------------------------------------------- /examples/advanced/events.mjs: -------------------------------------------------------------------------------- 1 | import { Grid } from '../../dist/main.esm.js' 2 | 3 | export default { 4 | name: 'Events', 5 | components: { 6 | Grid 7 | }, 8 | data() { 9 | return { 10 | columns: ['Name', 'Email', 'Phone Number'], 11 | sort: true, 12 | search: true, 13 | rows: [ 14 | ['John', 'john@example.com', '(353) 01 222 3333'], 15 | ['Mark', 'mark@gmail.com', '(01) 22 888 4444'], 16 | ['Eoin', 'eo3n@yahoo.com', '(05) 10 878 5554'], 17 | ['Nisen', 'nis900@gmail.com', '313 333 1923'] 18 | ] 19 | } 20 | }, 21 | mounted() { 22 | this.$nextTick(() => { 23 | if (this.$refs.myGrid && this.$refs.myGrid.grid) { 24 | this.$refs.myGrid.grid.on('rowClick', (...args) => { 25 | console.log(`row: ${JSON.stringify(args)}`) 26 | }) 27 | 28 | this.$refs.myGrid.grid.on('cellClick', (...args) => { 29 | console.log(`cell: ${JSON.stringify(args)}`) 30 | }) 31 | } 32 | }) 33 | }, 34 | template: ` 35 |
36 | ` 37 | } 38 | -------------------------------------------------------------------------------- /examples/advanced/force-render.mjs: -------------------------------------------------------------------------------- 1 | import { Grid } from '../../dist/main.esm.js' 2 | 3 | export default { 4 | name: 'ForceRender', 5 | components: { 6 | Grid 7 | }, 8 | data() { 9 | return { 10 | columns: ['Name', 'Email', 'Phone Number'], 11 | rows: [['Mark', 'mark@gmail.com', '(01) 22 888 4444']] 12 | } 13 | }, 14 | mounted() { 15 | setTimeout(() => { 16 | this.$refs.myGrid.grid 17 | .updateConfig({ 18 | search: true, 19 | data: [ 20 | ['John', 'john@example.com', '(353) 01 222 3333'], 21 | ['Mark', 'mark@gmail.com', '(01) 22 888 4444'] 22 | ] 23 | }) 24 | .forceRender() 25 | }, 5000) 26 | }, 27 | template: ` 28 |
29 | ` 30 | } 31 | -------------------------------------------------------------------------------- /examples/advanced/global-event-bus.mjs: -------------------------------------------------------------------------------- 1 | import Emittery from 'https://cdn.skypack.dev/emittery' 2 | import faker from 'https://cdn.skypack.dev/faker' 3 | import { Grid } from '../../dist/main.esm.js' 4 | 5 | window.emitter = new Emittery() 6 | 7 | const TestComponent = { 8 | name: 'TestComponent', 9 | props: { 10 | content: { 11 | type: String, 12 | default: 'Hello, world!' 13 | }, 14 | emitter: { 15 | type: Object, 16 | default: null 17 | } 18 | }, 19 | data() { 20 | return { 21 | styling: 'color: #f00;' 22 | } 23 | }, 24 | methods: { 25 | emit(args) { 26 | return window.emitter.emit(args) 27 | } 28 | }, 29 | template: ` 30 |
31 |
32 |
33 | ` 34 | } 35 | 36 | export default { 37 | name: 'SharedEventBus', 38 | components: { 39 | Grid 40 | }, 41 | data() { 42 | return { 43 | emitter: window.emitter, 44 | columns: [ 45 | { 46 | name: 'Name', 47 | formatter: cell => { 48 | return this.$gridjs.helper({ 49 | components: { TestComponent }, 50 | template: ``, 51 | data() { 52 | return { 53 | content: `🥳 ${cell}` 54 | } 55 | } 56 | }) 57 | } 58 | }, 59 | 'Email' 60 | ], 61 | rows: Array(5) 62 | .fill() 63 | .map(() => [faker.name.findName(), faker.internet.email()]) 64 | } 65 | }, 66 | mounted() { 67 | this.emitter.on('sayHello', () => console.log('hello')) 68 | }, 69 | template: ` 70 |
71 | ` 72 | } 73 | -------------------------------------------------------------------------------- /examples/advanced/multi-column-sort.mjs: -------------------------------------------------------------------------------- 1 | import { Grid } from '../../dist/main.esm.js' 2 | 3 | export default { 4 | name: 'MultiColumnSort', 5 | components: { 6 | Grid 7 | }, 8 | data() { 9 | return { 10 | columns: ['Name', 'Age', 'Email'], 11 | sort: true, 12 | rows: [ 13 | ['Mark', 25, 'john@example.com'], 14 | ['Nancy', 25, 'n99@gmail.com'], 15 | ['Eoin', 55, 'eo3n@yahoo.com'], 16 | ['Nisen', 60, 'nis900@gmail.com'] 17 | ] 18 | } 19 | }, 20 | template: ` 21 |
22 | ` 23 | } 24 | -------------------------------------------------------------------------------- /examples/advanced/nested-header.mjs: -------------------------------------------------------------------------------- 1 | import faker from 'https://cdn.skypack.dev/faker' 2 | import { Grid } from '../../dist/main.esm.js' 3 | 4 | export default { 5 | name: 'NestedHeader', 6 | components: { 7 | Grid 8 | }, 9 | data() { 10 | return { 11 | columns: [ 12 | { 13 | name: 'Name', 14 | columns: [ 15 | { 16 | name: 'First' 17 | }, 18 | { 19 | name: 'Last' 20 | } 21 | ] 22 | }, 23 | 'Email', 24 | { 25 | name: 'Address', 26 | columns: [ 27 | { 28 | name: 'Country' 29 | }, 30 | { 31 | name: 'City', 32 | columns: [ 33 | { 34 | name: 'Name' 35 | } 36 | ] 37 | } 38 | ] 39 | } 40 | ], 41 | rows: Array(5) 42 | .fill() 43 | .map(() => [ 44 | faker.name.firstName(), 45 | faker.name.lastName(), 46 | faker.internet.email(), 47 | faker.address.countryCode(), 48 | faker.address.city() 49 | ]) 50 | } 51 | }, 52 | template: ` 53 |
54 | ` 55 | } 56 | -------------------------------------------------------------------------------- /examples/advanced/stock-market.mjs: -------------------------------------------------------------------------------- 1 | import VueChartist from 'https://cdn.skypack.dev/v-chartist' 2 | import { Grid } from '../../dist/main.esm.js' 3 | 4 | export default { 5 | name: 'StockMarket', 6 | components: { 7 | Grid 8 | }, 9 | data() { 10 | return { 11 | sort: true, 12 | columns: [ 13 | 'Symbol', 14 | 'Last price', 15 | { 16 | name: 'Difference', 17 | formatter: cell => { 18 | return this.$gridjs.helper({ 19 | data() { 20 | return { 21 | content: cell 22 | } 23 | }, 24 | computed: { 25 | status() { 26 | return `color: ${this.content > 0 ? 'green' : 'red'};` 27 | } 28 | }, 29 | template: `{{ content }}` 30 | }) 31 | } 32 | }, 33 | { 34 | name: 'Trend', 35 | sort: false, 36 | width: '100px', 37 | formatter: cell => { 38 | const chart = { 39 | components: { 40 | VueChartist 41 | }, 42 | data() { 43 | return { 44 | data: { series: [cell] }, 45 | options: { 46 | height: '30px', 47 | showPoint: false, 48 | fullWidth: true, 49 | chartPadding: { top: 0, right: 0, bottom: 0, left: 0 }, 50 | axisX: { showGrid: false, showLabel: false, offset: 0 }, 51 | axisY: { showGrid: false, showLabel: false, offset: 0 } 52 | } 53 | } 54 | }, 55 | template: ` 56 |
57 | 58 | 59 |
60 | ` 61 | } 62 | return this.$gridjs.helper(chart) 63 | } 64 | } 65 | ], 66 | rows: [ 67 | ['AAPL', 360.2, 20.19, [360, 363, 366, 361, 366, 350, 370]], 68 | ['ETSY', 102.1, 8.22, [90, 91, 92, 90, 94, 95, 99, 102]], 69 | ['AMZN', 2734.8, -30.01, [2779, 2786, 2792, 2780, 2750, 2765, 2740, 2734]], 70 | ['TSLA', 960.85, -40.91, [993, 990, 985, 983, 970, 985, 988, 960]] 71 | ] 72 | } 73 | }, 74 | template: ` 75 |
76 | ` 77 | } 78 | -------------------------------------------------------------------------------- /examples/advanced/virtual-dom.mjs: -------------------------------------------------------------------------------- 1 | import faker from 'https://cdn.skypack.dev/faker' 2 | import { Grid } from '../../dist/main.esm.js' 3 | 4 | export default { 5 | name: 'VirtualDom', 6 | components: { 7 | Grid 8 | }, 9 | data() { 10 | return { 11 | columns: ['Name', 'Email'], 12 | rows: Array(5) 13 | .fill() 14 | .map(() => [faker.name.findName(), this.bold(faker.internet.email())]) 15 | } 16 | }, 17 | methods: { 18 | bold(text) { 19 | return this.$gridjs.h('b', {}, text) 20 | } 21 | }, 22 | template: ` 23 |
24 | ` 25 | } 26 | -------------------------------------------------------------------------------- /examples/advanced/vue-events.mjs: -------------------------------------------------------------------------------- 1 | import faker from 'https://cdn.skypack.dev/faker' 2 | import { Grid } from '../../dist/main.esm.js' 3 | import TestComponent from '../test-component.mjs' 4 | 5 | export default { 6 | name: 'VueEvents', 7 | components: { 8 | Grid 9 | }, 10 | data() { 11 | return { 12 | columns: [ 13 | { 14 | name: 'Name', 15 | formatter: cell => { 16 | return this.$gridjs.helper({ 17 | components: { TestComponent }, 18 | template: ``, 19 | data() { 20 | return { 21 | content: `🥳 ${cell}` 22 | } 23 | }, 24 | methods: { 25 | hello() { 26 | console.log('Hello!') 27 | } 28 | } 29 | }) 30 | } 31 | }, 32 | 'Email' 33 | ], 34 | rows: Array(5) 35 | .fill() 36 | .map(() => [faker.name.findName(), faker.internet.email()]) 37 | } 38 | }, 39 | template: ` 40 |
41 | ` 42 | } 43 | -------------------------------------------------------------------------------- /examples/basic.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Grid.js Vue Component Test 5 | 6 | 7 | 8 |
9 | 10 | 99 | 100 | 101 | -------------------------------------------------------------------------------- /examples/basic/auto-update.mjs: -------------------------------------------------------------------------------- 1 | import { Grid } from '../../dist/main.esm.js' 2 | 3 | export default { 4 | name: 'AutoUpdate', 5 | components: { 6 | Grid 7 | }, 8 | data() { 9 | return { 10 | columns: ['Name', 'Email', 'Phone Number'], 11 | rows: [['Mark', 'mark@gmail.com', '(01) 22 888 4444']] 12 | } 13 | }, 14 | mounted() { 15 | setTimeout(() => { 16 | this.rows.push(['John', 'john@example.com', '(353) 01 222 3333']) 17 | }, 5000) 18 | }, 19 | template: ` 20 |
21 | ` 22 | } 23 | -------------------------------------------------------------------------------- /examples/basic/fixed-header.mjs: -------------------------------------------------------------------------------- 1 | import faker from 'https://cdn.skypack.dev/faker' 2 | import { Grid } from '../../dist/main.esm.js' 3 | 4 | export default { 5 | name: 'FixedHeader', 6 | components: { 7 | Grid 8 | }, 9 | data() { 10 | return { 11 | columns: ['Name', 'Email', 'Title'], 12 | sort: true, 13 | pagination: true, 14 | fixedHeader: true, 15 | height: '400px', 16 | rows: Array(50) 17 | .fill() 18 | .map(() => [faker.name.findName(), faker.internet.email(), faker.name.title()]) 19 | } 20 | }, 21 | template: ` 22 |
23 | ` 24 | } 25 | -------------------------------------------------------------------------------- /examples/basic/from-html-table.mjs: -------------------------------------------------------------------------------- 1 | import { Grid } from '../../dist/main.esm.js' 2 | 3 | export default { 4 | name: 'FromHtmlTable', 5 | components: { 6 | Grid 7 | }, 8 | template: ` 9 |
10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 |
NameEmail
Johnjohn@example.com
Mikemike@example.com
28 | 29 |
30 | ` 31 | } 32 | -------------------------------------------------------------------------------- /examples/basic/hello-world.mjs: -------------------------------------------------------------------------------- 1 | import { Grid } from '../../dist/main.esm.js' 2 | 3 | export default { 4 | name: 'HelloWorld', 5 | components: { 6 | Grid 7 | }, 8 | data() { 9 | return { 10 | sort: true, 11 | columns: [ 12 | 'Name', 13 | 'Email', 14 | { 15 | name: 'Phone Number', 16 | sort: { 17 | compare: (a, b) => { 18 | a = parseInt(a.replace(/\(|\)|\s/g, '')) 19 | b = parseInt(b.replace(/\(|\)|\s/g, '')) 20 | let out = 0 21 | if (a > b) out = 1 22 | if (a < b) out = -1 23 | return out 24 | } 25 | } 26 | } 27 | ], 28 | rows: [ 29 | ['John', 'john@example.com', '(353) 01 222 3333'], 30 | ['Mark', 'mark@gmail.com', '(01) 22 888 4444'] 31 | ] 32 | } 33 | }, 34 | template: ` 35 |
36 | ` 37 | } 38 | -------------------------------------------------------------------------------- /examples/basic/hidden-columns.mjs: -------------------------------------------------------------------------------- 1 | import faker from 'https://cdn.skypack.dev/faker' 2 | import { Grid } from '../../dist/main.esm.js' 3 | 4 | export default { 5 | name: 'HiddenColumns', 6 | components: { 7 | Grid 8 | }, 9 | data() { 10 | return { 11 | columns: [ 12 | { 13 | name: 'Name', 14 | hidden: true 15 | }, 16 | 'Email', 17 | 'Title' 18 | ], 19 | sort: true, 20 | pagination: true, 21 | rows: Array(50) 22 | .fill() 23 | .map(() => [faker.name.findName(), faker.internet.email(), faker.name.title()]) 24 | } 25 | }, 26 | template: ` 27 |
28 | ` 29 | } 30 | -------------------------------------------------------------------------------- /examples/basic/loading-state.mjs: -------------------------------------------------------------------------------- 1 | import { Grid } from '../../dist/main.esm.js' 2 | 3 | export default { 4 | name: 'LoadingState', 5 | components: { 6 | Grid 7 | }, 8 | data() { 9 | return { 10 | columns: ['Name', 'Email', 'Phone Number'], 11 | sort: true, 12 | search: true, 13 | rows: () => { 14 | return new Promise(resolve => { 15 | setTimeout( 16 | () => 17 | resolve([ 18 | ['John', 'john@example.com', '(353) 01 222 3333'], 19 | ['Mark', 'mark@gmail.com', '(01) 22 888 4444'] 20 | ]), 21 | 2000 22 | ) 23 | }) 24 | } 25 | } 26 | }, 27 | template: ` 28 |
29 | ` 30 | } 31 | -------------------------------------------------------------------------------- /examples/basic/pagination.mjs: -------------------------------------------------------------------------------- 1 | import { Grid } from '../../dist/main.esm.js' 2 | 3 | export default { 4 | name: 'Pagination', 5 | components: { 6 | Grid 7 | }, 8 | data() { 9 | return { 10 | columns: ['Name', 'Email', 'Phone Number'], 11 | pagination: true, 12 | rows: [ 13 | ['John', 'john@example.com', '(353) 01 222 3333'], 14 | ['Mark', 'mark@gmail.com', '(01) 22 888 4444'] 15 | ] 16 | } 17 | }, 18 | template: ` 19 |
20 | ` 21 | } 22 | -------------------------------------------------------------------------------- /examples/basic/resizable.mjs: -------------------------------------------------------------------------------- 1 | import { Grid } from '../../dist/main.esm.js' 2 | 3 | export default { 4 | name: 'Resizable', 5 | components: { 6 | Grid 7 | }, 8 | data() { 9 | return { 10 | columns: ['Name', 'Email', 'Phone Number'], 11 | sort: true, 12 | resizable: true, 13 | rows: [ 14 | ['John', 'john@example.com', '(353) 01 222 3333'], 15 | ['Mark', 'mark@gmail.com', '(01) 22 888 4444'], 16 | ['Eoin', 'eo3n@yahoo.com', '(05) 10 878 5554'], 17 | ['Nisen', 'nis900@gmail.com', '313 333 1923'] 18 | ] 19 | } 20 | }, 21 | template: ` 22 |
23 | ` 24 | } 25 | -------------------------------------------------------------------------------- /examples/basic/search.mjs: -------------------------------------------------------------------------------- 1 | import { Grid } from '../../dist/main.esm.js' 2 | 3 | export default { 4 | name: 'Search', 5 | components: { 6 | Grid 7 | }, 8 | data() { 9 | return { 10 | columns: ['Name', 'Email', 'Phone Number'], 11 | search: true, 12 | rows: [ 13 | ['John', 'john@example.com', '(353) 01 222 3333'], 14 | ['Mark', 'mark@gmail.com', '(01) 22 888 4444'], 15 | ['Eoin', 'eo3n@yahoo.com', '(05) 10 878 5554'], 16 | ['Nisen', 'nis900@gmail.com', '313 333 1923'] 17 | ] 18 | } 19 | }, 20 | template: ` 21 |
22 | ` 23 | } 24 | -------------------------------------------------------------------------------- /examples/basic/sorting.mjs: -------------------------------------------------------------------------------- 1 | import { Grid } from '../../dist/main.esm.js' 2 | 3 | export default { 4 | name: 'Sorting', 5 | components: { 6 | Grid 7 | }, 8 | data() { 9 | return { 10 | columns: ['Name', 'Email', 'Phone Number'], 11 | sort: true, 12 | rows: [ 13 | ['John', 'john@example.com', '(353) 01 222 3333'], 14 | ['Mark', 'mark@gmail.com', '(01) 22 888 4444'], 15 | ['Eoin', 'eo3n@yahoo.com', '(05) 10 878 5554'], 16 | ['Nisen', 'nis900@gmail.com', '313 333 1923'] 17 | ] 18 | } 19 | }, 20 | template: ` 21 |
22 | ` 23 | } 24 | -------------------------------------------------------------------------------- /examples/basic/wide-table.mjs: -------------------------------------------------------------------------------- 1 | import faker from 'https://cdn.skypack.dev/faker' 2 | import { Grid } from '../../dist/main.esm.js' 3 | 4 | export default { 5 | name: 'WideTable', 6 | components: { 7 | Grid 8 | }, 9 | data() { 10 | return { 11 | columns: ['Name', 'Email', 'Title', 'Company', 'Country', 'County'], 12 | sort: true, 13 | pagination: true, 14 | rows: Array(50) 15 | .fill() 16 | .map(() => [ 17 | faker.name.findName(), 18 | faker.internet.email(), 19 | faker.name.title(), 20 | faker.company.companyName(), 21 | faker.address.country(), 22 | faker.address.county() 23 | ]) 24 | } 25 | }, 26 | template: ` 27 |
28 | ` 29 | } 30 | -------------------------------------------------------------------------------- /examples/customizing.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Grid.js Vue Component Test 5 | 6 | 7 | 8 |
9 | 10 | 64 | 65 | 66 | -------------------------------------------------------------------------------- /examples/customizing/cell-attributes.mjs: -------------------------------------------------------------------------------- 1 | import faker from 'https://cdn.skypack.dev/faker' 2 | import { Grid } from '../../dist/main.esm.js' 3 | 4 | export default { 5 | name: 'CellAttributes', 6 | components: { 7 | Grid 8 | }, 9 | data() { 10 | return { 11 | columns: [ 12 | { 13 | name: 'Name', 14 | attributes: { 15 | 'data-field': 'name' 16 | } 17 | }, 18 | 'Email' 19 | ], 20 | rows: Array(5) 21 | .fill() 22 | .map(() => [faker.name.findName(), faker.internet.email()]) 23 | } 24 | }, 25 | template: ` 26 |
27 | ` 28 | } 29 | -------------------------------------------------------------------------------- /examples/customizing/cell-formatting.mjs: -------------------------------------------------------------------------------- 1 | import faker from 'https://cdn.skypack.dev/faker' 2 | import { Grid } from '../../dist/main.esm.js' 3 | 4 | export default { 5 | name: 'CellFormatting', 6 | components: { 7 | Grid 8 | }, 9 | data() { 10 | return { 11 | columns: [ 12 | { 13 | name: 'Name', 14 | formatter: cell => `Name: ${cell}` 15 | }, 16 | 'Email' 17 | ], 18 | rows: Array(5) 19 | .fill() 20 | .map(() => [faker.name.findName(), faker.internet.email()]) 21 | } 22 | }, 23 | template: ` 24 |
25 | ` 26 | } 27 | -------------------------------------------------------------------------------- /examples/customizing/html-in-cells.mjs: -------------------------------------------------------------------------------- 1 | import faker from 'https://cdn.skypack.dev/faker' 2 | import { Grid } from '../../dist/main.esm.js' 3 | 4 | export default { 5 | name: 'HtmlInCells', 6 | components: { 7 | Grid 8 | }, 9 | data() { 10 | return { 11 | columns: [ 12 | { 13 | name: 'Name', 14 | formatter: cell => this.$gridjs.html(`${cell}`) 15 | }, 16 | 'Email', 17 | { 18 | name: 'Actions', 19 | formatter: (_, row) => this.$gridjs.html(`Email`) 20 | } 21 | ], 22 | rows: Array(5) 23 | .fill() 24 | .map(() => [faker.name.findName(), faker.internet.email(), null]) 25 | } 26 | }, 27 | template: ` 28 |
29 | ` 30 | } 31 | -------------------------------------------------------------------------------- /examples/customizing/html-in-header-cells.mjs: -------------------------------------------------------------------------------- 1 | import faker from 'https://cdn.skypack.dev/faker' 2 | import { Grid } from '../../dist/main.esm.js' 3 | 4 | export default { 5 | name: 'HtmlInCells', 6 | components: { 7 | Grid 8 | }, 9 | data() { 10 | return { 11 | columns: [ 12 | { 13 | id: 'name', 14 | name: this.$gridjs.html('Name') 15 | }, 16 | { 17 | id: 'email', 18 | name: this.$gridjs.html( 19 | '
Email
' 20 | ) 21 | } 22 | ], 23 | rows: Array(5) 24 | .fill() 25 | .map(() => [faker.name.findName(), faker.internet.email()]) 26 | } 27 | }, 28 | template: ` 29 |
30 | ` 31 | } 32 | -------------------------------------------------------------------------------- /examples/customizing/row-buttons.mjs: -------------------------------------------------------------------------------- 1 | import faker from 'https://cdn.skypack.dev/faker' 2 | import { Grid } from '../../dist/main.esm.js' 3 | 4 | export default { 5 | name: 'RowButtons', 6 | components: { 7 | Grid 8 | }, 9 | data() { 10 | return { 11 | columns: [ 12 | { 13 | name: 'Name' 14 | }, 15 | 'Email', 16 | { 17 | name: 'Actions', 18 | formatter: (cell, row) => { 19 | return this.$gridjs.h( 20 | 'button', 21 | { 22 | className: 'py-2 mb-4 px-4 border rounded-md text-white bg-blue-600', 23 | onClick: () => alert(`Editing "${row.cells[0].data}" "${row.cells[1].data}"`) 24 | }, 25 | 'Edit' 26 | ) 27 | } 28 | } 29 | ], 30 | rows: Array(5) 31 | .fill() 32 | .map(() => [faker.name.findName(), faker.internet.email(), null]) 33 | } 34 | }, 35 | template: ` 36 |
37 | ` 38 | } 39 | -------------------------------------------------------------------------------- /examples/customizing/vue-component-in-cells.mjs: -------------------------------------------------------------------------------- 1 | import faker from 'https://cdn.skypack.dev/faker' 2 | import { Grid } from '../../dist/main.esm.js' 3 | import TestComponent from '../test-component.mjs' 4 | 5 | export default { 6 | name: 'VueComponentInCells', 7 | components: { 8 | Grid 9 | }, 10 | data() { 11 | return { 12 | columns: [ 13 | { 14 | name: 'Name', 15 | formatter: cell => 16 | this.$gridjs.helper({ 17 | components: { TestComponent }, 18 | template: ``, 19 | data() { 20 | return { 21 | content: `🥳 ${cell}` 22 | } 23 | } 24 | }) 25 | }, 26 | 'Email' 27 | ], 28 | rows: Array(5) 29 | .fill() 30 | .map(() => [faker.name.findName(), faker.internet.email()]) 31 | } 32 | }, 33 | template: ` 34 |
35 | ` 36 | } 37 | -------------------------------------------------------------------------------- /examples/data-source.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Grid.js Vue Component Test 5 | 6 | 7 | 8 |
9 | 10 | 64 | 65 | 66 | -------------------------------------------------------------------------------- /examples/data-source/async-data-import.mjs: -------------------------------------------------------------------------------- 1 | import { Grid } from '../../dist/main.esm.js' 2 | 3 | export default { 4 | name: 'AsyncDataImport', 5 | components: { 6 | Grid 7 | }, 8 | data() { 9 | return { 10 | columns: ['Name', 'Email', 'Phone Number'], 11 | rows: () => { 12 | return new Promise(resolve => { 13 | setTimeout( 14 | () => 15 | resolve([ 16 | ['John', 'john@example.com', '(353) 01 222 3333'], 17 | ['Mark', 'mark@gmail.com', '(01) 22 888 4444'] 18 | ]), 19 | 1000 20 | ) 21 | }) 22 | } 23 | } 24 | }, 25 | template: ` 26 |
27 | ` 28 | } 29 | -------------------------------------------------------------------------------- /examples/data-source/dynamic-data-import.mjs: -------------------------------------------------------------------------------- 1 | import { Grid } from '../../dist/main.esm.js' 2 | 3 | export default { 4 | name: 'DynamicDataImport', 5 | components: { 6 | Grid 7 | }, 8 | data() { 9 | return { 10 | columns: ['Name', 'Email', 'Phone Number'], 11 | rows: () => [ 12 | ['John', 'john@example.com', '(353) 01 222 3333'], 13 | ['Mark', 'mark@gmail.com', '(01) 22 888 4444'] 14 | ] 15 | } 16 | }, 17 | template: ` 18 |
19 | ` 20 | } 21 | -------------------------------------------------------------------------------- /examples/data-source/from-html-table.mjs: -------------------------------------------------------------------------------- 1 | import { Grid } from '../../dist/main.esm.js' 2 | 3 | export default { 4 | name: 'FromHtmlTable', 5 | components: { 6 | Grid 7 | }, 8 | template: ` 9 |
10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 |
NameEmail
Johnjohn@example.com
Mikemike@example.com
28 | 29 |
30 | ` 31 | } 32 | -------------------------------------------------------------------------------- /examples/data-source/import-server-side-data.mjs: -------------------------------------------------------------------------------- 1 | import { Grid } from '../../dist/main.esm.js' 2 | 3 | export default { 4 | name: 'ImportServerSideData', 5 | components: { 6 | Grid 7 | }, 8 | data() { 9 | return { 10 | columns: ['Name', 'Language', 'Released At', 'Artist'], 11 | server: { 12 | url: 'https://api.scryfall.com/cards/search?q=Inspiring', 13 | then: data => data.data.map(card => [card.name, card.lang, card.released_at, card.artist]) 14 | } 15 | } 16 | }, 17 | template: ` 18 |
19 | ` 20 | } 21 | -------------------------------------------------------------------------------- /examples/data-source/json.mjs: -------------------------------------------------------------------------------- 1 | import { Grid } from '../../dist/main.esm.js' 2 | 3 | export default { 4 | name: 'Json', 5 | components: { 6 | Grid 7 | }, 8 | data() { 9 | return { 10 | columns: [ 11 | { 12 | id: 'name', 13 | name: 'Name' 14 | }, 15 | { 16 | id: 'email', 17 | name: 'Email' 18 | }, 19 | { 20 | id: 'phoneNumber', 21 | name: 'Phone Number' 22 | } 23 | ], 24 | rows: [ 25 | { name: 'John', email: 'john@example.com', phoneNumber: '(353) 01 222 3333' }, 26 | { name: 'Mark', email: 'mark@gmail.com', phoneNumber: '(01) 22 888 4444' } 27 | ] 28 | } 29 | }, 30 | template: ` 31 |
32 | ` 33 | } 34 | -------------------------------------------------------------------------------- /examples/data-source/xml.mjs: -------------------------------------------------------------------------------- 1 | import { Grid } from '../../dist/main.esm.js' 2 | 3 | export default { 4 | name: 'Json', 5 | components: { 6 | Grid 7 | }, 8 | data() { 9 | return { 10 | sort: true, 11 | search: true, 12 | pagination: true, 13 | columns: ['Location', 'Change Frequency', 'Priority'], 14 | server: { 15 | url: 'https://gridjs.io/sitemap.xml', 16 | handle: res => { 17 | return res.text().then(str => new window.DOMParser().parseFromString(str, 'text/xml')) 18 | }, 19 | then: data => { 20 | return Array.from(data.querySelectorAll('url')).map(row => [ 21 | row.querySelector('loc').innerHTML, 22 | row.querySelector('changefreq').innerHTML, 23 | row.querySelector('priority').innerHTML 24 | ]) 25 | } 26 | } 27 | } 28 | }, 29 | template: ` 30 |
31 | ` 32 | } 33 | -------------------------------------------------------------------------------- /examples/server-side.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Grid.js Vue Component Test 5 | 6 | 7 | 8 |
9 | 10 | 57 | 58 | 59 | -------------------------------------------------------------------------------- /examples/server-side/custom-http-client.mjs: -------------------------------------------------------------------------------- 1 | import { Grid } from '../../dist/main.esm.js' 2 | 3 | export default { 4 | name: 'CustomHttpClient', 5 | components: { 6 | Grid 7 | }, 8 | data() { 9 | return { 10 | columns: ['Name', 'Language', 'Released At', 'Artist'], 11 | server: { 12 | url: 'https://api.scryfall.com/cards/search?q=Inspiring', 13 | data: opts => { 14 | return new Promise((resolve, reject) => { 15 | // let's implement our own HTTP client 16 | const xhttp = new XMLHttpRequest() 17 | xhttp.onreadystatechange = function () { 18 | if (this.readyState === 4) { 19 | if (this.status === 200) { 20 | const resp = JSON.parse(this.response) 21 | 22 | // make sure the output conforms to StorageResponse format: 23 | // https://github.com/grid-js/gridjs/blob/master/src/storage/storage.ts#L21-L24 24 | resolve({ 25 | data: resp.data.map(card => [card.name, card.lang, card.released_at, card.artist]), 26 | total: resp.total_cards 27 | }) 28 | } else { 29 | reject() 30 | } 31 | } 32 | } 33 | xhttp.open('GET', opts.url, true) 34 | xhttp.send() 35 | }) 36 | } 37 | }, 38 | pagination: { 39 | limit: 5 40 | } 41 | } 42 | }, 43 | template: ` 44 |
45 | ` 46 | } 47 | -------------------------------------------------------------------------------- /examples/server-side/import-server-side-data.mjs: -------------------------------------------------------------------------------- 1 | import { Grid } from '../../dist/main.esm.js' 2 | 3 | export default { 4 | name: 'ImportServerSideData', 5 | components: { 6 | Grid 7 | }, 8 | data() { 9 | return { 10 | columns: ['Name', 'Language', 'Released At', 'Artist'], 11 | server: { 12 | url: 'https://api.scryfall.com/cards/search?q=Inspiring', 13 | then: data => data.data.map(card => [card.name, card.lang, card.released_at, card.artist]) 14 | } 15 | } 16 | }, 17 | template: ` 18 |
19 | ` 20 | } 21 | -------------------------------------------------------------------------------- /examples/server-side/server-side-pagination.mjs: -------------------------------------------------------------------------------- 1 | import { Grid } from '../../dist/main.esm.js' 2 | 3 | export default { 4 | name: 'ServerSidePagination', 5 | components: { 6 | Grid 7 | }, 8 | data() { 9 | return { 10 | columns: ['Pokemon', 'URL'], 11 | pagination: { 12 | enabled: true, 13 | limit: 5, 14 | server: { 15 | url: (prev, page, limit) => `${prev}?limit=${limit}&offset=${page * limit}` 16 | } 17 | }, 18 | server: { 19 | url: 'https://pokeapi.co/api/v2/pokemon', 20 | then: data => 21 | data.results.map(pokemon => [ 22 | pokemon.name, 23 | this.$gridjs.html(`Link to ${pokemon.name}`) 24 | ]), 25 | total: data => data.count 26 | } 27 | } 28 | }, 29 | template: ` 30 |
31 | ` 32 | } 33 | -------------------------------------------------------------------------------- /examples/server-side/server-side-search.mjs: -------------------------------------------------------------------------------- 1 | import { Grid } from '../../dist/main.esm.js' 2 | 3 | export default { 4 | name: 'ServerSideSearch', 5 | components: { 6 | Grid 7 | }, 8 | data() { 9 | return { 10 | pagination: true, 11 | search: { 12 | server: { 13 | url: (prev, keyword) => `${prev}?search=${keyword}` 14 | } 15 | }, 16 | columns: ['Title', 'Director', 'Producer'], 17 | server: { 18 | url: 'https://swapi.dev/api/films/', 19 | then: data => data.results.map(movie => [movie.title, movie.director, movie.producer]) 20 | } 21 | } 22 | }, 23 | template: ` 24 |
25 | ` 26 | } 27 | -------------------------------------------------------------------------------- /examples/server-side/server-side-sorting.mjs: -------------------------------------------------------------------------------- 1 | import { Grid } from '../../dist/main.esm.js' 2 | 3 | export default { 4 | name: 'ServerSideSorting', 5 | components: { 6 | Grid 7 | }, 8 | data() { 9 | return { 10 | sort: { 11 | multiColumn: false, 12 | server: { 13 | url: (prev, columns) => { 14 | if (!columns.length) return prev 15 | 16 | const col = columns[0] 17 | const dir = col.direction === 1 ? 'asc' : 'desc' 18 | let colName = ['name', 'rarity'][col.index] 19 | 20 | return `${prev}&order=${colName}&dir=${dir}` 21 | } 22 | } 23 | }, 24 | columns: [ 25 | 'Name', 26 | 'Rarity', 27 | { 28 | name: 'Image', 29 | width: '50px', 30 | sort: false, 31 | formatter: img => this.$gridjs.html(`
`) 32 | } 33 | ], 34 | server: { 35 | url: 'https://api.scryfall.com/cards/search?q=Inspiring', 36 | then: data => data.data.map(card => [card.name, card.rarity, card.image_uris.small]), 37 | total: data => data.total_cards 38 | } 39 | } 40 | }, 41 | template: ` 42 |
43 | ` 44 | } 45 | -------------------------------------------------------------------------------- /examples/styling.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Grid.js Vue Component Test 5 | 6 | 7 | 8 |
9 | 10 | 43 | 44 | 50 | 51 | 52 | -------------------------------------------------------------------------------- /examples/styling/css-class-name.mjs: -------------------------------------------------------------------------------- 1 | import { Grid } from '../../dist/main.esm.js' 2 | 3 | export default { 4 | name: 'CssClassName', 5 | components: { 6 | Grid 7 | }, 8 | data() { 9 | return { 10 | columns: ['Name', 'Email', 'Phone Number'], 11 | search: true, 12 | rows: [ 13 | ['John', 'john@example.com', '(353) 01 222 3333'], 14 | ['Mark', 'mark@gmail.com', '(01) 22 888 4444'], 15 | ['Eoin', 'eo3n@yahoo.com', '(05) 10 878 5554'], 16 | ['Nisen', 'nis900@gmail.com', '313 333 1923'] 17 | ], 18 | className: { 19 | td: 'my-custom-td-class', 20 | table: 'custom-table-classname' 21 | } 22 | } 23 | }, 24 | template: ` 25 |
26 | 27 |
28 | ` 29 | } 30 | -------------------------------------------------------------------------------- /examples/styling/css-in-js.mjs: -------------------------------------------------------------------------------- 1 | import { css } from 'https://cdn.skypack.dev/@emotion/css' 2 | import { Grid } from '../../dist/main.esm.js' 3 | 4 | export default { 5 | name: 'CssStyle', 6 | components: { 7 | Grid 8 | }, 9 | data() { 10 | return { 11 | columns: ['Name', 'Email', 'Phone Number'], 12 | search: true, 13 | rows: [ 14 | ['John', 'john@example.com', '(353) 01 222 3333'], 15 | ['Mark', 'mark@gmail.com', '(01) 22 888 4444'], 16 | ['Eoin', 'eo3n@yahoo.com', '(05) 10 878 5554'], 17 | ['Nisen', 'nis900@gmail.com', '313 333 1923'] 18 | ], 19 | className: { 20 | container: css` 21 | * { 22 | font-family: 'Tahoma'; 23 | } 24 | `, 25 | table: css` 26 | tr:hover td { 27 | background-color: rgba(0, 0, 0, 0.1); 28 | } 29 | `, 30 | th: css` 31 | text-align: center; 32 | &:hover { 33 | background-color: #999; 34 | color: #fff; 35 | } 36 | `, 37 | td: css` 38 | color: #999; 39 | &:hover { 40 | color: #000; 41 | } 42 | ` 43 | } 44 | } 45 | }, 46 | template: ` 47 |
48 | ` 49 | } 50 | -------------------------------------------------------------------------------- /examples/styling/css-style.mjs: -------------------------------------------------------------------------------- 1 | import { Grid } from '../../dist/main.esm.js' 2 | 3 | export default { 4 | name: 'CssStyle', 5 | components: { 6 | Grid 7 | }, 8 | data() { 9 | return { 10 | columns: ['Name', 'Email', 'Phone Number'], 11 | search: true, 12 | rows: [ 13 | ['John', 'john@example.com', '(353) 01 222 3333'], 14 | ['Mark', 'mark@gmail.com', '(01) 22 888 4444'], 15 | ['Eoin', 'eo3n@yahoo.com', '(05) 10 878 5554'], 16 | ['Nisen', 'nis900@gmail.com', '313 333 1923'] 17 | ], 18 | styles: { 19 | table: { 20 | border: '8px solid #ccc' 21 | }, 22 | th: { 23 | 'background-color': 'rgba(81, 212, 0, 0.5)', 24 | color: '#000', 25 | 'border-bottom': '3px solid #ccc', 26 | 'text-align': 'center' 27 | }, 28 | td: { 29 | 'text-align': 'center' 30 | } 31 | } 32 | } 33 | }, 34 | template: ` 35 |
36 | ` 37 | } 38 | -------------------------------------------------------------------------------- /examples/test-component.mjs: -------------------------------------------------------------------------------- 1 | export default { 2 | name: 'TestComponent', 3 | props: { 4 | content: { 5 | type: String, 6 | default: 'Hello, world!' 7 | } 8 | }, 9 | data() { 10 | return { 11 | styling: 'color: #f00;' 12 | } 13 | }, 14 | template: ` 15 |
16 |
17 |
18 | ` 19 | } 20 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "gridjs-vue", 3 | "description": "A Vue.js wrapper component for Grid.js", 4 | "version": "5.0.4", 5 | "license": "MIT", 6 | "private": false, 7 | "authors": [ 8 | "Daniel Sieradski ", 9 | "Afshin Mehrabani " 10 | ], 11 | "homepage": "https://gridjs.io/", 12 | "bugs": "https://github.com/grid-js/gridjs-vue/issues", 13 | "repository": { 14 | "type": "git", 15 | "url": "https://github.com/grid-js/gridjs-vue.git" 16 | }, 17 | "keywords": [ 18 | "table", 19 | "grid", 20 | "spreadsheet", 21 | "vue", 22 | "vue-component" 23 | ], 24 | "main": "./dist/main.esm.js", 25 | "umd": "./dist/main.umd.js", 26 | "exports": { 27 | "require": "./dist/main.js", 28 | "import": "./dist/main.esm.js", 29 | "default": "./dist/main.esm.js" 30 | }, 31 | "scripts": { 32 | "build": "rm -rf dist; bili;" 33 | }, 34 | "files": [ 35 | "dist/*", 36 | "src/*", 37 | "./attributes.json", 38 | "./tags.json" 39 | ], 40 | "types": "./dist/src/main.ts", 41 | "vetur": { 42 | "tags": "tags.json", 43 | "attributes": "attributes.json" 44 | }, 45 | "devDependencies": { 46 | "@juggle/resize-observer": "^3.3.1", 47 | "@lesniewski.pro/necktie": "^1.1.3", 48 | "@types/node": "^16.4.13", 49 | "@typescript-eslint/eslint-plugin": "^4.29.0", 50 | "@typescript-eslint/parser": "^4.29.0", 51 | "@vue/compiler-sfc": "^3.1.5", 52 | "@vue/eslint-config-prettier": "^6.0.0", 53 | "bili": "^5.0.5", 54 | "eslint": "^7.32.0", 55 | "eslint-plugin-html": "^6.1.2", 56 | "eslint-plugin-import": "^2.23.4", 57 | "eslint-plugin-prettier": "^3.4.0", 58 | "eslint-plugin-vue": "^7.15.1", 59 | "gridjs": "^5.0.2", 60 | "prettier": "^2.3.2", 61 | "rollup-plugin-external-globals": "^0.6.1", 62 | "rollup-plugin-typescript2": "^0.30.0", 63 | "rollup-plugin-vue": "^6.0.0", 64 | "styl-injector": "^1.4.0", 65 | "typescript": "^4.3.5", 66 | "uid": "^2.0.0", 67 | "vue": "^2.6.14", 68 | "vue-template-compiler": "^2.6.14" 69 | } 70 | } 71 | -------------------------------------------------------------------------------- /src/gridjs-vue.ts: -------------------------------------------------------------------------------- 1 | import onCreated from './lib/lifecycle/onCreated' 2 | import onDestroyed from './lib/lifecycle/onDestroyed' 3 | import onMounted from './lib/lifecycle/onMounted' 4 | import setOptions from './lib/setup/options' 5 | import props from './lib/setup/props' 6 | import { setTheme } from './lib/setup/theme' 7 | import watcher from './lib/setup/watch' 8 | import { Grid, GridOptions, GridVue } from './main.d' 9 | 10 | export default Vue.extend({ 11 | name: 'Grid', 12 | props, 13 | data() { 14 | return { 15 | grid: null as null | Grid, 16 | resize: null as null | ResizeObserver, 17 | uuid: null as null | string, 18 | wrapper: null as null | HTMLElement 19 | } 20 | }, 21 | computed: { 22 | options(): GridOptions { 23 | return setOptions(this) 24 | }, 25 | activeTheme(): string { 26 | return setTheme(this) 27 | }, 28 | divId(): string { 29 | return `gridjs__${this.uuid}` 30 | } 31 | }, 32 | watch: watcher(this), 33 | async created(): Promise { 34 | return await onCreated(this as GridVue) 35 | }, 36 | mounted(): GridVue | undefined { 37 | return onMounted(this as GridVue) 38 | }, 39 | destroyed(): void { 40 | return onDestroyed(this as GridVue) 41 | }, 42 | template: ` 43 |
44 | ` 45 | }) 46 | -------------------------------------------------------------------------------- /src/lib/helpers/parseStylesheet.ts: -------------------------------------------------------------------------------- 1 | const parseStylesheet = (input: string): CSSStyleSheet | null => { 2 | try { 3 | const iframe = document.createElement('iframe') 4 | document.head.appendChild(iframe) 5 | 6 | if (iframe && iframe.contentDocument) { 7 | const style = iframe.contentDocument.createElement('style') 8 | style.textContent = input 9 | iframe.contentDocument.head.appendChild(style) 10 | const stylesheet = iframe.contentDocument.styleSheets[0] 11 | iframe.remove() 12 | return stylesheet 13 | } 14 | 15 | return null 16 | } catch (error) { 17 | console.error(error) 18 | return null 19 | } 20 | } 21 | 22 | export default parseStylesheet 23 | -------------------------------------------------------------------------------- /src/lib/helpers/resizeObserver.ts: -------------------------------------------------------------------------------- 1 | import { ResizeObserver as Polyfill } from '@juggle/resize-observer' 2 | import { GridVue } from '../../main.d' 3 | import update from '../methods/update' 4 | 5 | const resizeObserver = (component: GridVue) => { 6 | try { 7 | const ResizeObserver = window.ResizeObserver || Polyfill 8 | 9 | component.resize = new ResizeObserver(() => { 10 | update(component) 11 | }) 12 | 13 | if (component.$refs && component.uuid && component.$refs[component.uuid]) 14 | component.resize.observe(component.$refs[component.uuid] as Element) 15 | } catch (error) { 16 | console.error(error) 17 | } 18 | } 19 | 20 | export default resizeObserver 21 | -------------------------------------------------------------------------------- /src/lib/helpers/waitForSelector.ts: -------------------------------------------------------------------------------- 1 | const waitForSelector = (selector: string): Promise => { 2 | return new Promise((resolve, reject) => { 3 | try { 4 | const element = document.querySelector(selector) 5 | if (element) return element 6 | 7 | const mutObserver = new MutationObserver(mutations => { 8 | for (const mutation of mutations) { 9 | const nodes = Array.from(mutation.addedNodes) as HTMLElement[] 10 | for (const node of nodes) { 11 | if (node.nodeType === 1) { 12 | const check = node.querySelector(selector) 13 | if (check) { 14 | mutObserver.disconnect() 15 | resolve(node) 16 | } 17 | } 18 | } 19 | } 20 | }) 21 | 22 | mutObserver.observe(document.documentElement, { childList: true, subtree: true }) 23 | } catch (error) { 24 | console.error(error) 25 | reject(error) 26 | } 27 | }) 28 | } 29 | 30 | export default waitForSelector 31 | -------------------------------------------------------------------------------- /src/lib/install.ts: -------------------------------------------------------------------------------- 1 | import { h, html, PluginPosition } from 'gridjs' 2 | import Grid from '../gridjs-vue' 3 | import { VueInstance } from '../main.d' 4 | import bindToCell from './methods/bindToCell' 5 | 6 | const install = (instance: VueInstance, options = {}): void => { 7 | try { 8 | if (instance.installed) return 9 | instance.installed = true 10 | 11 | if (instance.prototype && !instance.prototype.$gridjs) { 12 | instance.prototype.$gridjs = { 13 | h, 14 | helper: bindToCell, 15 | html, 16 | options, 17 | PluginPosition 18 | } 19 | } 20 | 21 | instance.component('Grid', Grid) 22 | } catch (error) { 23 | console.error(error) 24 | } 25 | } 26 | 27 | export default install 28 | -------------------------------------------------------------------------------- /src/lib/lifecycle/onCreated.ts: -------------------------------------------------------------------------------- 1 | import { Grid } from 'gridjs' 2 | import { UserConfig } from 'gridjs/dist/src/config.d' 3 | import { uid } from 'uid' 4 | import { GridVue } from '../../main.d' 5 | import waitForSelector from '../helpers/waitForSelector' 6 | 7 | const onCreated = async (component: GridVue) => { 8 | try { 9 | // give table a unique id 10 | component.uuid = uid(16) 11 | 12 | // get the wrapper 13 | if (component.divId) { 14 | await waitForSelector(`#${component.divId}`) 15 | component.wrapper = document.getElementById(component.divId) 16 | } 17 | 18 | // instantiate grid.js 19 | if ( 20 | component.wrapper && 21 | component.options && 22 | (component.options.data || component.options.from || component.options.server) 23 | ) { 24 | component.grid = new Grid(component.options as UserConfig).render(component.wrapper) 25 | } 26 | 27 | // return the updated component 28 | return component 29 | } catch (error) { 30 | console.error(error) 31 | } 32 | } 33 | 34 | export default onCreated 35 | -------------------------------------------------------------------------------- /src/lib/lifecycle/onDestroyed.ts: -------------------------------------------------------------------------------- 1 | import { GridVue } from '../../main.d' 2 | 3 | const onDestroyed = (component: GridVue) => { 4 | // unload from memory 5 | try { 6 | if (component.resize) component.resize.disconnect() 7 | component.grid = undefined 8 | component.wrapper = undefined 9 | } catch (error) { 10 | console.error(error) 11 | } 12 | } 13 | 14 | export default onDestroyed 15 | -------------------------------------------------------------------------------- /src/lib/lifecycle/onMounted.ts: -------------------------------------------------------------------------------- 1 | import { GridVue } from '../../main.d' 2 | import resizeObserver from '../helpers/resizeObserver' 3 | import { activatePlugins } from '../setup/options' 4 | import { assignTheme } from '../setup/theme' 5 | 6 | const onMounted = (component: GridVue) => { 7 | try { 8 | assignTheme(component) 9 | activatePlugins(component) 10 | resizeObserver(component) 11 | component.$nextTick(() => component.$emit('ready')) 12 | return component 13 | } catch (error) { 14 | console.error(error) 15 | } 16 | } 17 | 18 | export default onMounted 19 | -------------------------------------------------------------------------------- /src/lib/methods/bindToCell.ts: -------------------------------------------------------------------------------- 1 | import { Necktie } from '@lesniewski.pro/necktie' 2 | import { html } from 'gridjs' 3 | import { uid } from 'uid' 4 | import { ComponentOptions } from 'vue/types' 5 | 6 | const bindToCell = (component: ComponentOptions) => { 7 | try { 8 | const uuid = uid(16) 9 | const tie = new Necktie() 10 | tie.startListening() 11 | 12 | tie.bind( 13 | `[data-obj-id='${uuid}']`, 14 | (el: string) => 15 | new Vue({ 16 | el, 17 | ...component 18 | }) 19 | ) 20 | 21 | return html(``) 22 | } catch (error) { 23 | console.error(error) 24 | } 25 | } 26 | 27 | export default bindToCell 28 | -------------------------------------------------------------------------------- /src/lib/methods/update.ts: -------------------------------------------------------------------------------- 1 | import { UserConfig } from 'gridjs/dist/src/config.d' 2 | import { GridVue } from '../../main.d' 3 | 4 | const update = (component: GridVue) => { 5 | try { 6 | if (component) { 7 | const opts = component.options as Partial 8 | if (component.grid) component.grid.updateConfig(opts).forceRender() 9 | } 10 | } catch (error) { 11 | console.error(error) 12 | } 13 | } 14 | 15 | export default update 16 | -------------------------------------------------------------------------------- /src/lib/setup/options.ts: -------------------------------------------------------------------------------- 1 | import { Plugin } from 'gridjs/dist/src/plugin.d' 2 | import { GridFrom, GridOptions } from '../../main.d' 3 | 4 | // activate plugins 5 | const activatePlugins = (component: any): void => { 6 | try { 7 | const plugins = component.$gridjs.options.plugins 8 | 9 | if (plugins) { 10 | plugins.forEach((plugin: Plugin) => { 11 | component.grid.plugin.add(plugin) 12 | }) 13 | } 14 | } catch (error) { 15 | console.error(error) 16 | } 17 | } 18 | 19 | // build table from element or HTML blob 20 | const from = (input: GridFrom): HTMLElement | DocumentFragment | null => { 21 | try { 22 | if (input && typeof input === 'string') { 23 | return ( 24 | document.querySelector(input) || (document.createRange().createContextualFragment(input) as DocumentFragment) 25 | ) 26 | } 27 | 28 | return null 29 | } catch (error) { 30 | console.error(error) 31 | return null 32 | } 33 | } 34 | 35 | // return options 36 | function options(component: any): GridOptions { 37 | try { 38 | let options = { 39 | ...component.$gridjs.options, 40 | autoWidth: component.autoWidth, 41 | className: component.className, 42 | columns: component.columns, 43 | data: component.rows, 44 | fixedHeader: component.fixedHeader, 45 | from: from(component.from), 46 | height: component.height, 47 | language: component.language, 48 | pagination: component.pagination, 49 | resizable: component.resizable, 50 | search: component.search, 51 | server: component.server, 52 | sort: component.sort, 53 | style: component.styles || { 54 | container: { 55 | width: '100%' 56 | }, 57 | table: { 58 | width: '100%' 59 | }, 60 | header: { 61 | width: '100%' 62 | } 63 | }, 64 | width: component.width 65 | } 66 | 67 | for (const key in options) { 68 | if (options[key] === undefined) { 69 | delete options[key] 70 | } 71 | } 72 | 73 | return options 74 | } catch (error) { 75 | console.error(error) 76 | return {} 77 | } 78 | } 79 | 80 | export default options 81 | export { activatePlugins } 82 | -------------------------------------------------------------------------------- /src/lib/setup/props.ts: -------------------------------------------------------------------------------- 1 | export default { 2 | autoWidth: { 3 | type: Boolean, 4 | default: true 5 | }, 6 | className: { 7 | type: Object, 8 | default: undefined 9 | }, 10 | columns: { 11 | type: [Array, Function], 12 | default: undefined 13 | }, 14 | fixedHeader: { 15 | type: Boolean, 16 | default: false 17 | }, 18 | from: { 19 | type: [String, Function], 20 | default: undefined 21 | }, 22 | height: { 23 | type: String, 24 | default: undefined 25 | }, 26 | language: { 27 | type: Object, 28 | default: undefined 29 | }, 30 | pagination: { 31 | type: [Object, Boolean], 32 | default: false 33 | }, 34 | resizable: { 35 | type: Boolean, 36 | default: false 37 | }, 38 | rows: { 39 | type: [Array, Function], 40 | default: undefined 41 | }, 42 | search: { 43 | type: [Object, Boolean], 44 | default: false 45 | }, 46 | server: { 47 | type: [Object, Function], 48 | default: undefined 49 | }, 50 | sort: { 51 | type: [Object, Boolean], 52 | default: false 53 | }, 54 | styles: { 55 | type: Object, 56 | default: undefined 57 | }, 58 | theme: { 59 | type: String, 60 | default: undefined 61 | }, 62 | width: { 63 | type: String, 64 | default: '100%' 65 | } 66 | } 67 | -------------------------------------------------------------------------------- /src/lib/setup/theme.ts: -------------------------------------------------------------------------------- 1 | import { injectStyle } from 'styl-injector' 2 | import parseStylesheet from '../helpers/parseStylesheet' 3 | 4 | const setTheme = (component: any) => { 5 | try { 6 | if (component.theme) return component.theme 7 | if (component.$gridjs.options.theme) return component.$gridjs.options.theme 8 | return 'mermaid' 9 | } catch (error) { 10 | console.log(error) 11 | } 12 | } 13 | 14 | const assignTheme = async (component: any) => { 15 | try { 16 | if (component.activeTheme !== 'none') { 17 | let theme, 18 | stylesheet = '' 19 | 20 | theme = parseStylesheet( 21 | await (await fetch(`https://unpkg.com/gridjs/dist/theme/${component.activeTheme}.css`)).text() 22 | ) 23 | 24 | if (theme) { 25 | for (const index in theme.cssRules) { 26 | let css = theme.cssRules[index].cssText 27 | if (css && !/^@/g.test(css)) { 28 | stylesheet = `${stylesheet}\n\n#${component.divId} ${css}` 29 | } 30 | } 31 | 32 | injectStyle(stylesheet, `${component.divId}__theme`) 33 | } 34 | } 35 | } catch (error) { 36 | console.error(error) 37 | } 38 | } 39 | 40 | export { setTheme, assignTheme } 41 | -------------------------------------------------------------------------------- /src/lib/setup/watch.ts: -------------------------------------------------------------------------------- 1 | import update from '../methods/update' 2 | 3 | function watcher(component: any) { 4 | return { 5 | autoWidth() { 6 | update(component) 7 | }, 8 | className() { 9 | update(component) 10 | }, 11 | columns() { 12 | update(component) 13 | }, 14 | fixedHeader() { 15 | update(component) 16 | }, 17 | from() { 18 | update(component) 19 | }, 20 | height() { 21 | update(component) 22 | }, 23 | language() { 24 | update(component) 25 | }, 26 | pagination() { 27 | update(component) 28 | }, 29 | resizable() { 30 | update(component) 31 | }, 32 | rows() { 33 | update(component) 34 | }, 35 | search() { 36 | update(component) 37 | }, 38 | server() { 39 | update(component) 40 | }, 41 | sort() { 42 | update(component) 43 | }, 44 | style() { 45 | update(component) 46 | }, 47 | theme() { 48 | update(component) 49 | }, 50 | width() { 51 | update(component) 52 | } 53 | } 54 | } 55 | 56 | export default watcher 57 | -------------------------------------------------------------------------------- /src/main.d.ts: -------------------------------------------------------------------------------- 1 | import { Grid, UserConfig } from 'gridjs/dist/main.d' 2 | import { CombinedVueInstance, Vue, VueConstructor } from 'vue/types/vue.d' 3 | 4 | interface GridFrom { 5 | from?: HTMLElement | DocumentFragment | string | null 6 | } 7 | 8 | interface GridOptions extends Partial { 9 | autoWidth?: boolean 10 | className?: object 11 | columns?: Function | any[] 12 | data?: Function | any[] 13 | fixedHeader?: boolean 14 | from?: From 15 | height?: string 16 | language?: string 17 | pagination?: object | boolean 18 | resizable?: boolean 19 | search?: object | boolean 20 | server?: object 21 | sort?: object | boolean 22 | style?: object 23 | styles?: string 24 | width?: string 25 | } 26 | 27 | interface GridVue extends GridOptions, CombinedVueInstance, Vue { 28 | $gridjs?: any 29 | activeTheme?: string | null 30 | divId?: string | null 31 | grid?: Grid 32 | options?: GridOptions 33 | resize?: ResizeObserver | null 34 | rows?: Function | any[] 35 | update?: Function 36 | uuid?: string | null 37 | wrapper?: HTMLElement | null 38 | } 39 | 40 | interface VueInstance extends VueConstructor { 41 | prototype?: { 42 | $gridjs?: any 43 | } 44 | installed?: boolean 45 | } 46 | 47 | export { GridFrom, GridOptions, GridVue, Grid, VueInstance } 48 | -------------------------------------------------------------------------------- /src/main.ts: -------------------------------------------------------------------------------- 1 | import Grid from './gridjs-vue' 2 | import install from './lib/install' 3 | 4 | const plugin = { 5 | install: install 6 | } 7 | 8 | let GlobalVue = null 9 | 10 | if (typeof window !== 'undefined') { 11 | GlobalVue = window.Vue 12 | } else if (typeof global !== 'undefined') { 13 | GlobalVue = global.Vue 14 | } 15 | 16 | if (GlobalVue) { 17 | GlobalVue.use(plugin) 18 | } 19 | 20 | export { Grid, plugin as GridGlobal } 21 | export default Grid 22 | -------------------------------------------------------------------------------- /tags.json: -------------------------------------------------------------------------------- 1 | { 2 | "gridjs-vue": { 3 | "attributes": [ 4 | "autoWidth", 5 | "classNames", 6 | "cols", 7 | "from", 8 | "language", 9 | "pagination", 10 | "rows", 11 | "search", 12 | "server", 13 | "sort", 14 | "styles", 15 | "theme", 16 | "width" 17 | ], 18 | "description": "A Vue.js wrapper for Grid.js" 19 | } 20 | } 21 | -------------------------------------------------------------------------------- /tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "include": ["src/**/*.ts"], 3 | "exclude": ["bili.config.js", "build/**/*.js"], 4 | "compilerOptions": { 5 | /* Visit https://aka.ms/tsconfig.json to read more about this file */ 6 | 7 | /* Basic Options */ 8 | // "incremental": true, /* Enable incremental compilation */ 9 | "target": "esnext" /* Specify ECMAScript target version: 'ES3' (default), 'ES5', 'ES2015', 'ES2016', 'ES2017', 'ES2018', 'ES2019', 'ES2020', 'ES2021', or 'ESNEXT'. */, 10 | "module": "es6" /* Specify module code generation: 'none', 'commonjs', 'amd', 'system', 'umd', 'es2015', 'es2020', or 'ESNext'. */, 11 | // "lib": [], /* Specify library files to be included in the compilation. */ 12 | "allowJs": true /* Allow javascript files to be compiled. */, 13 | "checkJs": true /* Report errors in .js files. */, 14 | // "jsx": "preserve", /* Specify JSX code generation: 'preserve', 'react-native', 'react', 'react-jsx' or 'react-jsxdev'. */ 15 | "declaration": true /* Generates corresponding '.d.ts' file. */, 16 | // "declarationMap": true, /* Generates a sourcemap for each corresponding '.d.ts' file. */ 17 | // "sourceMap": true, /* Generates corresponding '.map' file. */ 18 | // "outFile": "./", /* Concatenate and emit output to single file. */ 19 | "outDir": "./build" /* Redirect output structure to the directory. */, 20 | // "rootDir": "./src" /* Specify the root directory of input files. Use to control the output directory structure with --outDir. */, 21 | // "composite": true, /* Enable project compilation */ 22 | // "tsBuildInfoFile": "./", /* Specify file to store incremental compilation information */ 23 | "removeComments": true /* Do not emit comments to output. */, 24 | // "noEmit": true, /* Do not emit outputs. */ 25 | // "importHelpers": true, /* Import emit helpers from 'tslib'. */ 26 | // "downlevelIteration": true, /* Provide full support for iterables in 'for-of', spread, and destructuring when targeting 'ES5' or 'ES3'. */ 27 | // "isolatedModules": true, /* Transpile each file as a separate module (similar to 'ts.transpileModule'). */ 28 | 29 | /* Strict Type-Checking Options */ 30 | "strict": true /* Enable all strict type-checking options. */, 31 | // "noImplicitAny": true, /* Raise error on expressions and declarations with an implied 'any' type. */ 32 | // "strictNullChecks": true, /* Enable strict null checks. */ 33 | // "strictFunctionTypes": true, /* Enable strict checking of function types. */ 34 | // "strictBindCallApply": true, /* Enable strict 'bind', 'call', and 'apply' methods on functions. */ 35 | // "strictPropertyInitialization": true, /* Enable strict checking of property initialization in classes. */ 36 | // "noImplicitThis": true, /* Raise error on 'this' expressions with an implied 'any' type. */ 37 | // "alwaysStrict": true, /* Parse in strict mode and emit "use strict" for each source file. */ 38 | 39 | /* Additional Checks */ 40 | // "noUnusedLocals": true, /* Report errors on unused locals. */ 41 | // "noUnusedParameters": true, /* Report errors on unused parameters. */ 42 | // "noImplicitReturns": true, /* Report error when not all code paths in function return a value. */ 43 | // "noFallthroughCasesInSwitch": true, /* Report errors for fallthrough cases in switch statement. */ 44 | // "noUncheckedIndexedAccess": true, /* Include 'undefined' in index signature results */ 45 | // "noImplicitOverride": true, /* Ensure overriding members in derived classes are marked with an 'override' modifier. */ 46 | // "noPropertyAccessFromIndexSignature": true, /* Require undeclared properties from index signatures to use element accesses. */ 47 | 48 | /* Module Resolution Options */ 49 | "moduleResolution": "node" /* Specify module resolution strategy: 'node' (Node.js) or 'classic' (TypeScript pre-1.6). */, 50 | // "baseUrl": "./", /* Base directory to resolve non-absolute module names. */ 51 | // "paths": {}, /* A series of entries which re-map imports to lookup locations relative to the 'baseUrl'. */ 52 | // "rootDirs": [], /* List of root folders whose combined content represents the structure of the project at runtime. */ 53 | "typeRoots": [ 54 | "node_modules/gridjs/dist/src", 55 | "node_modules/vue/types" 56 | ] /* List of folders to include type definitions from. */, 57 | "types": ["node"] /* Type declaration files to be included in compilation. */, 58 | "allowSyntheticDefaultImports": true /* Allow default imports from modules with no default export. This does not affect code emit, just typechecking. */, 59 | "esModuleInterop": true /* Enables emit interoperability between CommonJS and ES Modules via creation of namespace objects for all imports. Implies 'allowSyntheticDefaultImports'. */, 60 | // "preserveSymlinks": true, /* Do not resolve the real path of symlinks. */ 61 | "allowUmdGlobalAccess": true /* Allow accessing UMD globals from modules. */, 62 | 63 | /* Source Map Options */ 64 | // "sourceRoot": "", /* Specify the location where debugger should locate TypeScript files instead of source locations. */ 65 | // "mapRoot": "", /* Specify the location where debugger should locate map files instead of generated locations. */ 66 | "inlineSourceMap": true /* Emit a single file with source maps instead of having a separate file. */, 67 | // "inlineSources": true, /* Emit the source alongside the sourcemaps within a single file; requires '--inlineSourceMap' or '--sourceMap' to be set. */ 68 | 69 | /* Experimental Options */ 70 | // "experimentalDecorators": true, /* Enables experimental support for ES7 decorators. */ 71 | // "emitDecoratorMetadata": true, /* Enables experimental support for emitting type metadata for decorators. */ 72 | 73 | /* Advanced Options */ 74 | "skipLibCheck": true /* Skip type checking of declaration files. */, 75 | "forceConsistentCasingInFileNames": true /* Disallow inconsistently-cased references to the same file. */ 76 | } 77 | } 78 | --------------------------------------------------------------------------------