{"id":13821836,"url":"https://github.com/joffreyBerrier/vue-spreadsheet","last_synced_at":"2025-05-16T15:31:09.208Z","repository":{"id":40674406,"uuid":"151647543","full_name":"joffreyBerrier/vue-spreadsheet","owner":"joffreyBerrier","description":"👊 An easier Spreadsheet in Vue.js 👊","archived":false,"fork":false,"pushed_at":"2023-04-06T12:22:16.000Z","size":6204,"stargazers_count":184,"open_issues_count":7,"forks_count":31,"subscribers_count":4,"default_branch":"master","last_synced_at":"2024-07-04T06:16:29.465Z","etag":null,"topics":["javascript","vue","vue-spreadsheet"],"latest_commit_sha":null,"homepage":"https://codesandbox.io/s/vue-spreadsheet-wctsv?fontsize=14\u0026hidenavigation=1\u0026theme=dark\u0026view=preview\u0026file=/src/App.vue","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/joffreyBerrier.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null}},"created_at":"2018-10-04T23:19:52.000Z","updated_at":"2024-06-01T09:47:43.000Z","dependencies_parsed_at":"2024-01-15T16:02:36.659Z","dependency_job_id":null,"html_url":"https://github.com/joffreyBerrier/vue-spreadsheet","commit_stats":{"total_commits":432,"total_committers":7,"mean_commits":"61.714285714285715","dds":0.09259259259259256,"last_synced_commit":"f6c51d37ebdcf0b107c12d8742c455ca372d7991"},"previous_names":[],"tags_count":26,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/joffreyBerrier%2Fvue-spreadsheet","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/joffreyBerrier%2Fvue-spreadsheet/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/joffreyBerrier%2Fvue-spreadsheet/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/joffreyBerrier%2Fvue-spreadsheet/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/joffreyBerrier","download_url":"https://codeload.github.com/joffreyBerrier/vue-spreadsheet/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":213893315,"owners_count":15653524,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["javascript","vue","vue-spreadsheet"],"created_at":"2024-08-04T08:01:30.169Z","updated_at":"2024-08-04T08:07:07.554Z","avatar_url":"https://github.com/joffreyBerrier.png","language":"JavaScript","funding_links":[],"categories":["JavaScript"],"sub_categories":[],"readme":"# Vue3 version\nhttps://github.com/joffreyBerrier/vue-datepicker\n\n# :fire: Vue Spreadsheet 2.2.1 :fire:\nhttps://github.com/joffreyBerrier/vue-spreadsheet/releases/tag/2.2.1\n\n# Medium article (in french)\nhttps://medium.com/scalia/vuejs-spreadsheet-692cab2cb5c8\n\n# Medium article for publish your own component on npm\nhttps://medium.com/js-dojo/how-to-publish-a-vuejs-component-on-npm-aa703714b512\n\n# Sandbox example\n\n*Open this link on a new tab*\n\n[![Edit vuejs-spreadsheet](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/vue-spreadsheet-wctsv?fontsize=14\u0026hidenavigation=1\u0026theme=dark\u0026view=preview\u0026file=/src/App.vue)\n\n\n## Description\n\n:facepunch: An easier Spreadsheet in Vue.js :facepunch:\n\nDo not hesitate to :star: my repo\n\n\n## Project setup\n\n```\nyarn add vuejs-spreadsheet\n\nnpm i vuejs-spreadsheet\n```\n\n```\n\u003cscript\u003e\n  import VueTable from 'vuejs-spreadsheet';\n  export default {\n    name: 'app',\n    data() {\n    },\n    components: {\n      VueTable,\n    },\n  };\n\u003c/script\u003e\n```\n\n## Contributing to development\n\n- First, fork the repo from github.\n- Clone your forked repo and run: `yarn` or `npm i`\n- You can use the `/example` folder to test out the component, or use `npm link` to another project (_cf. next sub section_).\n- Then, make your changes on any branch you want and push it.\n- Naming your branch with the gitflow convention:\n  - Feature branches? [feature/]\n  - Release branches? [release/]\n  - Hotfix branches? [hotfix/]\n  - Support branches? [support/]\n- Finally, open a pull request on the official repo, using the source branch from your forked repo.\n\n### Debugging and testing from another project\n\nIf you want to link the local project to another project 'B' with access to the sources, follow these intructions:\n- go to the root of this project's folder\n- update the package.json to point to the source entry point instead of the dist/ `main: 'src/index.js'`\n- run `npm link` (or `yarn link`).\n- go to the project you import the library\n- run `npm link vuejs-spreadsheet`\n- Now, in your `node_modules`, the vuejs-spreadsheet dependencies should be a symlink to this local folder!\n\nIn order to make it work, you make change your webpack's configuration by using:\n```\nconfig: {\n  resolve: {\n    symlinks: true,\n  }\n}\n```\n\nThis will enable your project's B to compile this library using the babel / webpack configuration here, as if it was a real compiled _node_module_.\n\n_(This configuration may depend on your webpack builder)_\n\n## Wiki :mortar_board:\n\nData binding                           | Type       | Description\n---------------------------------------|------------|-------------------------\nv-model                                | Array      | That contains data\n\nProps                                  | Type       | Description\n---------------------------------------|------------|-------------------------\n  :headers                             | Array      | That contains headers\n  :custom-options                      | Object     | That contains Options\n  :style-wrap-vue-table                | Object     | That contains style of the wrapper tableVue\n  :disable-cells                       | Array      | That contains the headerKey you want to disable\n  :disable-sort-thead                  | Array      | That contains the disabled th\n  :loading                             | Boolean    | True =\u003e Hidden TbodyData / show slot loader | false =\u003e contrary\n  :parent-scroll-element               | Object     | That contains the HTML attribute which overflow-y: scroll (by-default is 'html')\n  :select-position                     | Object     | That contains a top and left position you want to add to the select\n  :submenu-tbody                       | Array      | That contains the submenu-tbody\n  :submenu-thead                       | Array      | That contains the submenu-thead\n\nOptions                                | Type       | Description\n---------------------------------------|------------|-------------------------\n  :fuse-options                        | Object     | That contains an object of fuse configuration look on her website: http://fusejs.io/\n  :new-data                            | Object     | That contains the type of data when you have empty cell in a row\n  :sort-header                         | Boolean    | That activates sort button on header\n  :tbody-index                         | Boolean    | That displays the index of each row on the left of the table\n  :trad                                | Object     | That contains an object of translating\n\nFunction                               | Type       | Description\n---------------------------------------|------------|-------------------------\n  @tbody-all-checked-row           | Function   | Fired when the checkedAll row has checked\n  @tbody-checked-row               | Function   | Fired when row has checked\n  @tbody-change-data               | Function   | Fired when data undergo modifications\n  @tbody-input-change              | Function   | When the **input changes**\n  @tbody-input-keydown             | Function   | Trigger keydown when the **input changes**\n  @tbody-select-change             | Function   | When the **select change**\n  @handle-up-drag-size-header      | Function   | Fired when the header size changed\n  @thead-td-sort                   | Function   | When you press the button sort\n  @tbody-undo-data                 | Function   | When you hit Ctrl / Cmd + Z for undo\n  @tbody-paste-data                | Function   | When you paste data to a cell\n  @tbody-up-dragtofill             | Function   | Fired when pressed up on dragToFill\n  @tbody-move-dragtofill           | Function   | Fired when moved on dragToFill\n  @tbody-nav-backspace             | Function   | When you press backspace on cell (event, actualElement, actualCol, rowIndex, colIndex)\n  @tbody-nav-multiple-backspace    | Function   | Fired when the multiple cell are delete\n  @tbody-submenu-click-{#}         | Function   | {#} - Name of the function declared on **submenu-tbody**\n\n\n### Example\n``` javascript\n  \u003cvue-table\n    v-model=\"Array\"\n    :headers=\"Array\"\n    :custom-options=\"Object\"\n    :style-wrap-vue-table=\"Object\"\n    :disable-cells=\"Array\"\n    :disable-sort-thead=\"Array\"\n    :loading=\"Boolean\"\n    :parent-scroll-element=\"Object\"\n    :select-position=\"Object\"\n    :submenu-tbody=\"Array\"\n    :submenu-thead=\"Array\"\n    @tbody-checked-row=\"checkedData\"\n    @tbody-all-checked-row=\"checkedAllData\"\n    @tbody-change-data=\"changeData\"\n    @tbody-undo-data=\"undoData\"\n    @tbody-submenu-click-change-color=\"changeColorTbody\"\n    @tbody-submenu-click-change-value=\"changeValueTbody\"\n    @thead-submenu-click-change-color=\"changeColorThead\"\n    @thead-submenu-click-change-value=\"changeValueThead\"\n    @thead-td-sort=\"sortProduct\"\u003e\n\n    // if your want to add an specific header\n    \u003cdiv slot=\"header\"\u003e\n      Specific Header\n    \u003c/div\u003e\n\n    // if your want to add a loader\n    \u003cdiv slot=\"loader\"\u003e\n      Loader\n    \u003c/div\u003e\n  \u003c/vue-table\u003e\n```\n\n### Options :honeybee:\n```\n  customOptions: {\n    dragToFill: true,\n    tbodyCheckbox: false,\n    tbodyIndex: true,\n    sortHeader: true,\n    trad: {\n      lang: 'fr',\n      en: {\n        select: {\n          placeholder: 'Search by typing',\n        },\n      },\n      fr: {\n        select: {\n          placeholder: 'Taper pour chercher',\n        },\n      },\n    },\n    newData: {\n      type: 'input',\n      value: '',\n      active: false,\n      style: {\n        color: '#000',\n      },\n    },\n    fuseOptions: {\n      shouldSort: true,\n      threshold: 0.2,\n      location: 0,\n      distance: 30,\n      maxPatternLength: 64,\n      minMatchCharLength: 1,\n      findAllMatches: false,\n      tokenize: false,\n      keys: [\n        'value',\n      ],\n    },\n  },\n```\n\n### Comment Box :triangular_ruler:\n\nIf you want to use the commentBox (like excel)\n\nCreate an object ``comment: {} `` on ``styleWrapVueTable`` and on each data\n\n#### :exclamation: You can choose a global BorderColor for each commentBox\n\n#### Example\n\n```\n  styleWrapVueTable: {\n    ...\n    comment: {\n      borderColor: '#696969',\n      borderSize: '8px',\n      widthBox: '120px',\n      heightBox: '80px',\n    },\n  },\n```\n\n#### :exclamation: Or specific color for each commentBox\n\nCommentBox without content:\n\n```\n  f: {\n    ...\n    comment: {\n      borderColor: '#eee',\n    },\n    ...\n  },\n```\n\nCommentBox with content:\n\n```\n  f: {\n    ...\n    comment: {\n      value: 'comment',\n      borderColor: '#eee',\n    },\n    ...\n  },\n```\n\n\n### Checkbox :white_check_mark:\n\nIf you want to use the checkbox\n\n1: Create a key ``tbodyCheckbox: true`` on ``customOptions``\n\nIf you want to get the array of the checked data use ``this.$refs.vueTable.checkedRows``\n\n#### Example\n\n```\n  customOptions: {\n    ...\n    tbodyCheckbox: boolean\n    ...\n  },\n```\n\n### Headers :tiger:\n\n  Name              |  Type   | Description\n--------------------|---------|-------------------\n  headerName        | String  | The chosen header name\n  headerkey         | String  | The Slugify version of the headerName\n  style             | Object  | The style of the td\n    - width         | String  | Indicate the width of ``\u003cth\u003e``\n    - minWidth      | String  | minWidth must be equal to width\n  disabled          | Boolean | optional - Disabled cell\n\n#### Example\n\n``` javascript\nheaders: [\n  {\n    headerName: 'Image',\n    headerKey: 'img',\n    style: {\n      width: '100px'\n      minWidth: '100px'\n    },\n  },\n  {\n    headerName: 'Nom',\n    headerKey: 'name',\n    style: {\n      width: '100px'\n      minWidth: '100px'\n    },\n  },\n  {\n    headerName: 'Prénom',\n    headerKey: 'surname',\n    style: {\n      width: '100px'\n      minWidth: '100px'\n    },\n  },\n  {\n    headerName: 'Age',\n    headerKey: 'age',\n    style: {\n      width: '100px'\n      minWidth: '100px'\n    },\n  },\n  {\n    headerName: 'Born',\n    headerKey: 'born',\n    style: {\n      width: '100px'\n      minWidth: '100px'\n    },\n  },\n],\n```\n\n### Data :honeybee:\n\n  Name                |  Type   | Description\n----------------------|---------|-------------------\n  key                 | String  | The key of the object written in Slugify\n  type                | String  | The type of data rendered (``\u003ctextarea\u003e``, ``\u003cimg\u003e``, ``\u003cselect\u003e``)\n  value(img/input)    | String  | The value of the object in *String Type*\n  value(select)       | Array   | The value of the object in *Array Type*\n  selectOptions       | Array   | That contains objects {value: ~, label: ~}\n  style               | Object  | The Style of the cell\n  active              | Boolean | Of the cell, false by default\n  handleSearch        | Boolean | -\tActivates search when selected\n  disabled            | Boolean | optional - Disabled cell\n  numeric             | Boolean | optional - Restrict input to numeric value\n\n#### Example\n\n``` javascript\nproducts: [\n  {\n    img: {\n      type: 'img',\n      value: 'https://via.placeholder.com/350x150',\n      active: false,\n      disabled: true,\n    },\n    name: {\n      type: 'input',\n      value: 'John',\n      active: false,\n      style: {\n        color: '#000',\n      },\n    },\n    surname: {\n      type: 'input',\n      value: 'Doe',\n      active: false,\n      style: {\n        color: '#000',\n      },\n    },\n    age: {\n      type: 'select',\n      handleSearch: true,\n      selectOptions: [\n        {\n          value: 'paris',\n          label: 'Paris',\n        },\n        {\n          value: 'new-york',\n          label: 'New York',\n        },\n      ],\n      value: 'paris',\n      active: false,\n    },\n    born: {\n      type: 'select',\n      handleSearch: true,\n      selectOptions: [\n        {\n          value: 'france',\n          label: 'France',\n        },\n        {\n          value: 'usa',\n          label: 'United States of America',\n        },\n      ],\n      value: 'france',\n      active: false,\n    },\n  },\n],\n```\n\n### New Data :tiger:\n\n#### Example\n\nSame Object describe on the top\n\nIf you choose an input\n\n```\nnewData: {\n  type: 'input',\n  value: '',\n  active: false,\n  style: {\n    color: '#000',\n    background: '#cfffcf',\n  },\n},\n```\n\n### submenu :monkey_face:\n\n  Name             |  Type  | Description\n-------------------|--------|---------------------------------------------------------------------------------------\n  type             | String | The type of data rendered (``\u003cbutton\u003e`` || ``\u003cselect\u003e``)\n  value            | String | The value of the function\n  function         | String | The name of the function called when you click on the button - *Written in Slugify*\n  disabled         | Array  | Each object which you want to hide on the submenu\n  subtitle         | String | Of the select\n  selectOptions    | Array  | That contains objects {value: ~, label: ~}\n  buttonOption     | Object | Description\n  . value          | String | The value of the button\n  . function       | String | The name of the function called when you click on the button - *Written in Slugify*\n  . style          | Object | The style of the button\n\n#### Example\n\n``` javascript\n  submenuTbody: [\n    {\n      type: 'button',\n      value: 'Change Color',\n      function: 'change-color',\n      disabled: ['img'],\n    },\n  ],\n  submenuThead: [\n    {\n      type: 'button',\n      value: 'Change Color',\n      function: 'change-color',\n      disabled: ['img', 'name'],\n    },\n    {\n      type: 'select',\n      disabled: ['img'],\n      subtitle: 'Select state:',\n      selectOptions: [\n        {\n          value: 'new-york',\n          label: 'new-york',\n        },\n        {\n          value: 'france',\n          label: 'france',\n        },\n      ],\n      value: 'new-york',\n      buttonOption: {\n        value: 'change city',\n        function: 'change-city',\n        style: {\n          display: 'block',\n        },\n      },\n    },\n  ],\n```\n\n## Example :mortar_board: :tiger:\n\n``` javascript\n\n\u003ctemplate\u003e\n  \u003cdiv id=\"app\"\u003e\n    \u003cvue-table\n      v-model=\"products\"\n      :headers=\"headers\"\n      :custom-options=\"customOptions\"\n      :style-wrap-vue-table=\"styleWrapVueTable\"\n      :disable-cells=\"disableCells\"\n      :disable-sort-thead=\"disableSortThead\"\n      :loading=\"loading\"\n      :parent-scroll-element=\"parentScrollElement\"\n      :select-position=\"selectPosition\"\n      :submenu-tbody=\"submenuTbody\"\n      :submenu-thead=\"submenuThead\"\n      @tbody-change-data=\"changeData\"\n      @tbody-submenu-click-change-color=\"changeColorTbody\"\n      @tbody-submenu-click-change-value=\"changeValueTbody\"\n      @thead-submenu-click-change-color=\"changeColorThead\"\n      @thead-submenu-click-change-value=\"changeValueThead\"\n      @thead-td-sort=\"sortProduct\"\u003e\n    \u003cdiv slot=\"header\"\u003e\n      Specific Header\n    \u003c/div\u003e\n    \u003cdiv slot=\"loader\"\u003e\n      Loader\n    \u003c/div\u003e\n    \u003c/vue-table\u003e\n  \u003c/div\u003e\n\u003c/template\u003e\n\n\u003cscript\u003e\n\nimport VueTable from 'vuejs-spreadsheet';\n\nexport default {\n  name: 'app',\n  data() {\n    return {\n      customOptions: {\n        tbodyIndex: true,\n        sortHeader: true,\n        trad: {\n          lang: 'fr',\n          en: {\n            select: {\n              placeholder: 'Search by typing',\n            },\n          },\n          fr: {\n            select: {\n              placeholder: 'Taper pour chercher',\n            },\n          },\n        },\n        newData: {\n          type: 'input',\n          value: '',\n          active: false,\n          style: {\n            color: '#000',\n          },\n        },\n        fuseOptions: {\n          shouldSort: true,\n          threshold: 0.2,\n          location: 0,\n          distance: 30,\n          maxPatternLength: 64,\n          minMatchCharLength: 1,\n          findAllMatches: false,\n          tokenize: false,\n          keys: [\n            'value',\n          ],\n        },\n      },\n      submenuTbody: [\n        {\n          type: 'button',\n          value: 'change color',\n          function: 'change-color',\n          disabled: ['img'],\n        },\n        {\n          type: 'button',\n          value: 'change value',\n          function: 'change-value',\n          disabled: ['img', 'name'],\n        },\n      ],\n      submenuThead: [\n        {\n          type: 'button',\n          value: 'change color',\n          function: 'change-color',\n          disabled: ['a'],\n        },\n        {\n          type: 'select',\n          disabled: ['a'],\n          subtitle: 'Select state:',\n          selectOptions: [\n            {\n              value: 'new-york',\n              label: 'new-york',\n            },\n            {\n              value: 'france',\n              label: 'france',\n            },\n          ],\n          value: 'new-york',\n          buttonOption: {\n            value: 'change city',\n            function: 'change-city',\n            style: {\n              display: 'block',\n            },\n          },\n        },\n        {\n          type: 'button',\n          value: 'change value',\n          function: 'change-value',\n          disabled: ['a', 'b'],\n        },\n      ],\n      disableCells: ['a'],\n      loading: false,\n      parentScrollElement: {\n        attribute: 'html',\n        positionTop: 0,\n      },\n      selectPosition: {\n        top: 0,\n        left: 0,\n      },\n      disableSortThead: ['a'],\n      styleWrapVueTable: {\n        fontSize: '12px',\n        comment: {\n          borderColor: '#696969',\n          borderSize: '8px',\n          widthBox: '120px',\n          heightBox: '80px',\n        },\n      },\n      headers: [\n        {\n          headerName: 'A',\n          headerKey: 'a',\n          style: {\n            width: '200px',\n            minWidth: '200px',\n            color: '#000',\n          },\n        },\n        {\n          headerName: 'B',\n          headerKey: 'b',\n          style: {\n            width: '200px',\n            minWidth: '200px',\n            color: '#000',\n          },\n        },\n        {\n          headerName: 'C',\n          headerKey: 'c',\n          style: {\n            width: '200px',\n            minWidth: '200px',\n            color: '#000',\n          },\n        },\n        {\n          headerName: 'D',\n          headerKey: 'd',\n          style: {\n            width: '200px',\n            minWidth: '200px',\n            color: '#000',\n          },\n        },\n        {\n          headerName: 'E',\n          headerKey: 'e',\n          style: {\n            width: '200px',\n            minWidth: '200px',\n            color: '#000',\n          },\n        },\n        {\n          headerName: 'F',\n          headerKey: 'f',\n          style: {\n            width: '200px',\n            minWidth: '200px',\n            color: '#000',\n          },\n        },\n        {\n          headerName: 'G',\n          headerKey: 'g',\n          style: {\n            width: '200px',\n            minWidth: '200px',\n            color: '#000',\n          },\n        },\n      ],\n      products: [\n        {\n          a: {\n            type: 'img',\n            value: 'https://via.placeholder.com/350x150',\n            active: false,\n          },\n          c: {\n            type: 'input',\n            value: 'Paris',\n            active: false,\n            style: {\n              color: '#000',\n            },\n          },\n          d: {\n            type: 'input',\n            value: 'France',\n            active: false,\n            style: {\n              color: '#000',\n            },\n          },\n          e: {\n            type: 'input',\n            value: 'Boe',\n            active: false,\n            style: {\n              color: '#000',\n            },\n          },\n          f: {\n            type: 'select',\n            handleSearch: true,\n            selectOptions: [\n              {\n                value: 'Harry Potter',\n                label: 'harry potter',\n              },\n              {\n                value: 'Hermione Granger',\n                label: 'hermione granger',\n              },\n              {\n                value: 'Ron Whisley',\n                label: 'ron whisley',\n              },\n              {\n                value: 'Dobby',\n                label: 'dobby',\n              },\n              {\n                value: 'Hagrid',\n                label: 'hagrid',\n              },\n              {\n                value: 'Professeur Rogue',\n                label: 'professeur rogue',\n              },\n              {\n                value: 'Professeur Mcgonagal',\n                label: 'professeur mcgonagal',\n              },\n              {\n                value: 'Professeur Dumbledor',\n                label: 'professeur dumbledor',\n              },\n            ],\n            value: 'professeur dumbledor',\n            active: false,\n          },\n          g: {\n            type: 'select',\n            handleSearch: true,\n            selectOptions: [\n              {\n                value: 1980,\n                label: 1980,\n              },\n              {\n                value: 1981,\n                label: 1981,\n              },\n              {\n                value: 1982,\n                label: 1982,\n              },\n              {\n                value: 1983,\n                label: 1983,\n                active: true,\n              },\n              {\n                value: 1984,\n                label: 1984,\n              },\n            ],\n            value: 1983,\n            active: false,\n          },\n        },\n      ],\n    };\n  },\n  components: {\n    VueTable,\n  },\n  mounted() {\n    this.loading = true;\n    setTimeout(() =\u003e {\n      this.loading = false;\n    }, 300);\n  },\n  methods: {\n    changeData(row, header) {\n      console.log(row, header);\n    },\n    sortProduct(event, header, colIndex) {\n      console.log('sort product');\n    },\n    // callback\n    changeColorThead(event, header, colIndex) {\n      this.headers[colIndex].style.color = '#e40000';\n    },\n    changeColorTbody(event, header, rowIndex, colIndex) {\n      this.products[rowIndex][header].style = {};\n      this.products[rowIndex][header].style.color = '#e40000';\n    },\n    changeValueTbody(event, header, rowIndex, colIndex) {\n      this.products[rowIndex][header].value = 'T-shirt';\n    },\n    changeValueThead(event, entry, colIndex) {\n      this.headers[colIndex].headerName = 'T-shirt';\n    },\n  },\n};\n\u003c/script\u003e\n\n\u003cstyle lang=\"scss\"\u003e\n::-moz-selection {\n  color: #2c3e50;\n  background: transparent;\n}\n::selection {\n  color: #2c3e50;\n  background: transparent;\n}\n\u003c/style\u003e\n\n```\n\n## LICENSE\n\n[MIT](LICENSE)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FjoffreyBerrier%2Fvue-spreadsheet","html_url":"https://awesome.ecosyste.ms/projects/github.com%2FjoffreyBerrier%2Fvue-spreadsheet","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FjoffreyBerrier%2Fvue-spreadsheet/lists"}