Skip to content

Feat/#47 lazy table renderer #52

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 7 commits into from
Apr 22, 2025
+1,772 −109
Merged

Feat/#47 lazy table renderer #52

Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
0a03694
chore: add workspace and update package.json
Seungwoo321 Apr 18, 2025
2b7b038
feat: add laze-table-renderer Close #47, #2
Seungwoo321 Apr 21, 2025
2dac1a8
chore: update package.json
Seungwoo321 Apr 21, 2025
0f6d3b4
fix: typo laze to lazy
Seungwoo321 Apr 21, 2025
7bb2d35
docs: update README.md
Seungwoo321 Apr 21, 2025
77e978e
docs: update README.md of lazy-table-renderer
Seungwoo321 Apr 21, 2025
74fc1e9
style: update style
Seungwoo321 Apr 22, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 4 additions & 0 deletions index.html
View file
Original file line number Diff line number Diff line change
@@ -11,6 +11,10 @@
name="viewport"
content="width=device-width, initial-scale=1.0"
/>
<link
rel="stylesheet"
href="/dist/vue-pivottable.css"
/>
<title>Vue3 Pivottable</title>
</head>
<body>
53 changes: 49 additions & 4 deletions package.json
View file
Original file line number Diff line number Diff line change
@@ -1,14 +1,57 @@
{
"name": "vue3-pivottable",
"version": "0.0.0",
"name": "vue-pivottable",
"version": "1.0.0-alpha.0",
"type": "module",
"exports": {
".": {
"import": "./dist/vue-pivottable.es.js",
"require": "./dist/vue-pivottable.umd.js"
},
"./dist/vue-pivottable.css": "./dist/vue-pivottable.css"
},
"main": "./dist/vue-pivottable.umd.js",
"module": "./dist/vue-pivottable.es.js",
"files": [
"dist"
],
"repository": {
"type": "git",
"url": "git+https://github.com/vue-pivottable/vue3-pivottable.git"
},
"keywords": [
"vue",
"vue3",
"pivot",
"pivottable",
"vue-pivottable",
"vue3-pivottable"
],
"author": "Seungwoo, Lee <[email protected]>",
"contributors": [
{
"name": "Sumin, Lee",
"email": "[email protected]",
"url": "https://github.com/gingerbeerlime"
},
{
"name": "Hyemin, Lee",
"url": "https://github.com/hyemyn2"
}
],
"license": "MIT",
"bugs": {
"url": "https://github.com/vue-pivottable/vue3-pivottable/issues"
},
"scripts": {
"dev": "vite",
"build": "vite build",
"preview": "vite preview",
"lint": "eslint"
"lint": "eslint",
"build:all": "pnpm build && pnpm -r --filter './packages/*' build",
"dev:all": "pnpm -r --parallel run dev"
},
"dependencies": {
"@vue-pivottable/virtual-table-renderer": "workspace:*",
"papaparse": "^5.5.2",
"vue": "^3.5.13",
"vue-draggable-next": "^2.2.1"
@@ -20,6 +63,8 @@
"eslint-plugin-import": "^2.31.0",
"eslint-plugin-vue": "^9.32.0",
"globals": "^16.0.0",
"vite": "^6.1.0"
"vite": "^6.1.0",
"vite-plugin-dts": "^4.5.3",
"vite-plugin-static-copy": "^2.3.1"
}
}
33 changes: 33 additions & 0 deletions packages/lazy-table-renderer/README.md
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,33 @@
# @vue-pivottable/lazy-table-renderer

A Vue 3 + IntersectionObserver-based lazy renderer for pivot tables, built on top of the `vue-pivottable` package.

Renders only the visible part of a pivot table in chunks based on the scroll position, improving performance when handling large datasets.

---

## Features

- Lazy rendering using IntersectionObserver
- Fixed average row height (30px)
- Automatic top/bottom padding height adjustment
- Fully compatible with the **Vue 3** version of `vue-pivottable`

---

## Props

This component inherits all standard props from the `vue-pivottable` package, with the following two additional props:

| Prop | Type | Default | Description |
| ------------ | ------ | ------- | ----------------------------------------------------------- |
| `chunkSize` | Number | `20` | Number of rows rendered per chunk |
| `bufferSize` | Number | `1` | Number of chunks rendered before and after the visible area |

All other props behave the same as in the original [`vue-pivottable`](https://github.com/vue-pivottable/vue3-pivottable) package.

---

## License

MIT
47 changes: 47 additions & 0 deletions packages/lazy-table-renderer/package.json
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,47 @@
{
"name": "@vue-pivottable/lazy-table-renderer",
"version": "1.0.0",
"type": "module",
"exports": {
".": {
"import": "./dist/lazy-table-renderer.es.js",
"require": "./dist/lazy-table-renderer.umd.js"
},
"./dist/lazy-table-renderer.css": "./dist/lazy-table-renderer.css"
},
"main": "./dist/lazy-table-renderer.umd.js",
"module": "./dist/lazy-table-renderer.es.js",
"files": [
"dist"
],
"repository": {
"type": "git",
"url": "git+https://github.com/vue-pivottable/vue3-pivottable.git",
"directory": "packages/lazy-table-renderer"
},
"keywords": [
"vue",
"vue3",
"pivot",
"pivottable",
"vue-pivottable",
"vue3-pivottable",
"@vue-pivottable/lazy-table-renderer"
],
"homepage": "https://github.com/vue-pivottable/vue3-pivottable",
"author": "Seungwoo, Lee <[email protected]>",
"license": "MIT",
"scripts": {
"dev": "vite",
"build": "vite build",
"preview": "vite preview"
},
"dependencies": {
"vue-pivottable": "workspace:*",
"vue": "^3.5.13"
},
"devDependencies": {
"@vitejs/plugin-vue": "^5.2.1",
"vite": "^6.1.0"
}
}
Loading