{"id":13376146,"url":"https://github.com/Click2Buy/vue-pivot-table","last_synced_at":"2025-03-13T01:31:54.990Z","repository":{"id":39573955,"uuid":"142845306","full_name":"Click2Buy/vue-pivot-table","owner":"Click2Buy","description":"A vue component for pivot table","archived":false,"fork":false,"pushed_at":"2023-03-04T02:46:23.000Z","size":2748,"stargazers_count":225,"open_issues_count":26,"forks_count":71,"subscribers_count":21,"default_branch":"master","last_synced_at":"2025-03-07T08:02:56.470Z","etag":null,"topics":["pivot","pivot-tables","vue","vue-components"],"latest_commit_sha":null,"homepage":null,"language":"Vue","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/Click2Buy.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","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,"dei":null}},"created_at":"2018-07-30T08:10:13.000Z","updated_at":"2025-02-26T06:57:18.000Z","dependencies_parsed_at":"2024-04-11T06:52:14.304Z","dependency_job_id":null,"html_url":"https://github.com/Click2Buy/vue-pivot-table","commit_stats":{"total_commits":95,"total_committers":4,"mean_commits":23.75,"dds":0.5263157894736843,"last_synced_commit":"86e53a0594bed40bfb47393f4cccbf3fa51eb63e"},"previous_names":["marketconnect/vue-pivot-table"],"tags_count":13,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Click2Buy%2Fvue-pivot-table","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Click2Buy%2Fvue-pivot-table/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Click2Buy%2Fvue-pivot-table/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Click2Buy%2Fvue-pivot-table/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Click2Buy","download_url":"https://codeload.github.com/Click2Buy/vue-pivot-table/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":243322511,"owners_count":20272894,"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":["pivot","pivot-tables","vue","vue-components"],"created_at":"2024-07-30T05:02:28.243Z","updated_at":"2025-03-13T01:31:54.415Z","avatar_url":"https://github.com/Click2Buy.png","language":"Vue","funding_links":[],"categories":["Vue","Components \u0026 Libraries"],"sub_categories":["UI Components"],"readme":"# NOT MAINTAINED\n\nThis project is not maintained anymore. Maybe a Vue 3 version will be in the works in the future. Maybe not.\n\n# vue-pivot-table\nA vue component for pivot table\n\n![vue-pivot-table screenshot](https://raw.githubusercontent.com/Click2Buy/vue-pivot-table/master/screenshot.png)\n\n[Live demo (jsfiddle)](https://jsfiddle.net/Owumaro/ezhp9fuc/)\n\n## Install\n\n`npm install --save @click2buy/vue-pivot-table`\n\n## Components\n\nThis project provides 2 components:\n- `Pivot`: aggregation table with drag \u0026 drop user interface to configure rows/columns\n- `PivotTable`: aggregation table only\n\nWhile the `Pivot` component provides the full experience, the `PivotTable` can be used standalone if you need only a table.\n\n## Browser\n\n```js\nVue.use(vuePivotTable)\n```\n\n## Webpack\n\n### `Pivot`\n\n#### Javascript\n\n```js\nimport { Pivot } from '@click2buy/vue-pivot-table'\n\nexport default {\n  components: { Pivot },\n\n  // Basic data for component props\n  data: () =\u003e {\n    return {\n      data: Object.freeze([{ x: 0, y: 0, z: 0 }, { x: 1, y: 1, z: 1 }]),\n      fields: [{\n        key: 'x',\n        getter: item =\u003e item.x,\n        label: 'X'\n      }, {\n        key: 'y',\n        getter: item =\u003e item.y,\n        label: 'Y'\n      }, {\n        key: 'z',\n        getter: item =\u003e item.z,\n        label: 'Z'\n      }],\n      rowFieldKeys: ['y', 'z'],\n      colFieldKeys: ['x'],\n      reducer: (sum, item) =\u003e sum + 1\n    }\n  }\n  ...\n}\n```\n\n#### HTML\n\n```html\n\u003cpivot :data=\"data\" :fields=\"fields\" :row-field-keys=\"rowFieldKeys\" :col-field-keys=\"colFieldKeys\" :reducer=\"reducer\"\u003e\n  \u003c!-- Optional slots can be used for formatting table headers and values, see documentation below --\u003e\n\u003c/pivot\u003e\n```\n\n### `PivotTable`\n\n#### Javascript\n\n```js\nimport { PivotTable } from '@click2buy/vue-pivot-table'\n\nexport default {\n  components: { PivotTable },\n\n  // Basic data for component props\n  data: () =\u003e {\n    return {\n      data: Object.freeze([{ x: 0, y: 0, z: 0 }, { x: 1, y: 1, z: 1 }]),\n      rowFields: [{\n        getter: item =\u003e item.y,\n        label: 'Y'\n      }, {\n        getter: item =\u003e item.z,\n        label: 'Z'\n      }],\n      colFields: [{\n        getter: item =\u003e item.x,\n        label: 'X'\n      }],\n      reducer: (sum, item) =\u003e sum + 1\n    }\n  }\n  ...\n}\n```\n\n#### HTML\n\n```html\n\u003cpivot-table :data=\"data\" :row-fields=\"rowFields\" :col-fields=\"colFields\" :reducer=\"reducer\"\u003e\n  \u003c!-- Optional slots can be used for formatting table headers and values, see documentation below --\u003e\n\u003c/pivot-table\u003e\n```\n\n## API\n\n### `Pivot` component\n\n#### Properties\n\nProperty | Type | Default | Description\n---------|------|---------|------------\n`data` | `Object Array` | `[]` | Dataset to use in the pivot\n`fields` | `Array` | `[]` | Fields definition (see [`fields` element format](#fields-element-format))\n`available-field-keys` | `Array` | `[]` | Keys of the fields to show as \"available\" by default\n`row-field-keys` | `Array` | `[]` | Keys of the fields to use as rows by default\n`col-field-keys` | `Array` | `[]` | Keys of the fields to use as columns by default\n`reducer` | `function` | `(sum, item) =\u003e sum + 1` | Function applied to reduce `data` in the pivot table\n`reducer-initial-value` | any | `0` | Initial value used when applying reducer\n`no-data-warning-text` | `String` | `'No data to display.'` | Text to display when `data` is empty\n`is-data-loading` | `Boolean` | `false` | Display a loading content instead of the table when the value is `true` (see slots for customization)\n`default-show-settings` | `Boolean` | `true` | Show settings at component creation\n`available-fields-label-text` | `String` | `'Available fields'` | Text for available fields drag area\n`rows-label-text` | `String` | `'Rows'` | Text for the rows drag area\n`cols-label-text` | `String` | `'Columns'` | Text for the columns drag area\n`hide-settings-text` | `String` | `'Hide settings'` | Text for the \"hide settings\" button\n`show-settings-text` | `String` | `'Show settings'` | Text for the \"show settings\" button\n`select-all-text` | `String` | `'Select all'` | Text for the \"Select all\" button in the dropdown value filter\n`unselect-all-text` | `String` | `'Unselect all'` | Text for the \"Unselect all\" button in the dropdown value filter\n\n##### `fields` element format\n\nProperty | Type | Description\n---------|------|------------\n`key` | `String` | A unique string value to identify the field\n`label` | `String` | Text to display in the draggable element\n`labelSlotName` | `String` | Optional - Name of the slot to use to format the label content\n`getter` | `Function` | Function to apply on an element of `data` to get the field value\n`sort` | `Function` | Optional - Function to order fields in the pivot table header ; if no value is provided, [javascript-natural-sort](https://github.com/Bill4Time/javascript-natural-sort) will be applied\n`showHeader` | `Boolean` | Optional (default: `true`) - Whether the header should be displayed in the pivot table\n`showFooter` | `Boolean` | Optional (default: `false`) - Whether the footer should be displayed in the pivot table\n`headerSlotName` | `String` | Optional - Name of the slot to use to format the header in the pivot table ; if no slot name is provided, the value will be displayed as found in data\n`headerSlotNames` | `String Array` | Optional - Names of the slots to use to format the headers in the pivot table\n`headers` | `Array` | Optional - Definition of the headers (see [`headers` element format](#headers-element-format))\n`footerSlotName` | `String` | Optional - Same as above for the footer\n`footerSlotNames` | `String Array` | Optional - Same as above for the footer\n`headerAttributeFilter` | `Boolean` | Optional (default: `false`) - Activate dropdown to filter field header attributes\n`valueFilter` | `Boolean` | Optional (default: `false`) - Activate dropdown to filter field values\n`valueFilterSlotName` | `String` | Optional - Name of the slot to use to format the values in the field values selection dropdown\n\n##### `headers` element format\n\nProperty | Type | Description\n---------|------|------------\n`slotName` | `String` | Name of the slot to use to format the header in the pivot table\n`label` | `String` | If `headerAttributeFilter` is activated, in the field dropdown: label to display next to the checkbox\n`checked` | `Boolean` | If `headerAttributeFilter` is activated, in the field dropdown: default checkbox value\n\n#### Slots\n\nSlot Name | Description | Scope\n----------|-------------|------\n`\u003cfield label slot name\u003e` | Content displayed in the field draggable label\n`\u003cfield header slot name\u003e` | Table header content for a field, referenced from the `field` `headerSlotName` property | `{ value }`\n`\u003cfield value filter slot name\u003e` | If field `valueFilter` prop is set to `true`: content in the menu next to the checkbox | `{ value }`\n`value` | Table cell content | `{ value, row, col }` (see [`value` slot scope](#value-slot-scope))\n`loading` | Content displayed while `data-is-loading` prop is set to `true`\n`computing` | Content displayed while table values are being loaded\n\n##### `value` slot scope\n\nProperty | Type | Description\n---------|------|------------\n`value` | `Number` | Value of the cell\n`labels` | `Array` | An array of objects corresponding to row/col labels - Each object has 2 props `field`/`value` with label field/value\n\n### `PivotTable` component\n\n#### Properties\n\nProperty | Type | Default | Description\n---------|------|---------|------------\n`data` | `Object Array` | `[]` | Dataset to use in the pivot\n`row-fields` | `Array` | `[]` | Fields to use as rows by default (see [`row-fields`/`col-fields` element format](#row-fields-col-fields-element-format))\n`col-fields` | `Array` | `[]` | Fields to use as columns by default (see [`row-fields`/`col-fields` element format](#row-fields-col-fields-element-format))\n`reducer` | `function` | `(sum, item) =\u003e sum + 1` | Function applied to reduce `data` in the pivot table\n`reducer-initial-value` | any | `0` | Initial value used when applying reducer\n`no-data-warning-text` | `String` | `'No data to display.'` | Text to display when `data` is empty\n`is-data-loading` | `Boolean` | `false` | Display a loading content instead of the table when the value is `true` (see slots for customization)\n\n##### `row-fields`/`col-fields` element format\n\nProperty | Type | Description\n---------|------|------------\n`getter` | `Function` | Function to apply on an element of `data` to get the field value\n`sort` | `Function` | Optional - Function to order fields in the pivot table header ; if no value is provided, [javascript-natural-sort](https://github.com/Bill4Time/javascript-natural-sort) will be applied\n`valuesFiltered` | `Set` | Optional - A set of values to filter displayed rows/columns\n`showHeader` | `Boolean` | Optional (default: `true`) - Whether the header should be displayed in the pivot table\n`showFooter` | `Boolean` | Optional (default: `false`) - Whether the footer should be displayed in the pivot table\n`headerSlotName` | `String` | Optional - Name of the slot to use to format the header in the pivot table ; if no slot name is provided, the value will be displayed as found in data\n`headerSlotNames` | `String Array` | Optional - Names of the slots to use to format the headers in the pivot table\n`footerSlotName` | `String` | Optional - Same as above for the footer\n`footerSlotNames` | `String Array` | Optional - Same as above for the footer\n\n#### Slots\n\nSlot Name | Description | Scope\n----------|-------------|------\n`\u003cfield header slot name\u003e` | Table header content for a field, referenced from `row-field`/`col-field` `headerSlotName` property | `{ value }`\n`value` | Table cell content | `{ value, row, col }` (see [`value` slot scope](#value-slot-scope-1))\n`loading` | Content displayed while `data-is-loading` prop is set to `true`\n`computing` | Content displayed while table values are being loaded\n\n##### `value` slot scope\n\nProperty | Type | Description\n---------|------|------------\n`value` | `Number` | Value of the cell\n`row` | `Array` | Row values of the cell\n`col` | `Array` | Column values of the cell\n\nNote: if your final table is too large and you use a component in the `value` slot, you might consider using a [functional component](https://fr.vuejs.org/v2/guide/render-function.html) to improve performance.\n\n### Large datasets\n\nIf this component is used with large datasets, consider applying `Object.freeze` on your `data` object to avoid useless change tracking on each data element.\n\nSee https://vuejs.org/v2/guide/instance.html#Data-and-Methods.\n\n## Build\n\n``` bash\n# Install dependencies\nnpm install\n\n# Serve with hot reload at localhost:8080\nnpm run serve\n\n# Build js libraries\nnpm run build-lib\n```\n\n## Thanks\n\n- [FontAwesome](https://www.fontawesome.com/) ([license](https://fontawesome.com/license))\n- [Vue.Draggable](https://github.com/SortableJS/Vue.Draggable)\n- https://github.com/plotly/react-pivottable\n- https://github.com/nicolaskruchten/pivottable\n- https://dhtmlx.com/docs/products/dhtmlxPivot/","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FClick2Buy%2Fvue-pivot-table","html_url":"https://awesome.ecosyste.ms/projects/github.com%2FClick2Buy%2Fvue-pivot-table","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FClick2Buy%2Fvue-pivot-table/lists"}