From 79a344626eff696aea11f754719e7bcd46dc47d3 Mon Sep 17 00:00:00 2001 From: "hrynevych.romann" Date: Tue, 20 Feb 2024 22:48:28 +0200 Subject: [PATCH] feat: add new Guide for `renderingLargeData` --- .../theme/components/ExamplesNav.vue | 5 - apps/www/.vitepress/theme/config/docs.ts | 10 + .../docs/guides/rendering-large-data.md | 29 + apps/www/src/content/examples/big-data.md | 5 - apps/www/src/examples/big-data/Example.vue | 33 +- .../big-data/components/DataTable.vue | 6 +- .../components/DataTableColumnHeader.vue | 5 + .../big-data/components/DataTableToolbar.vue | 4 +- .../examples/big-data/components/columns.ts | 2 +- .../www/src/examples/big-data/data/tasks.json | 14002 ---------------- .../tasks/components/DataTablePagination.vue | 2 +- apps/www/src/examples/tasks/data/tasks.json | 11900 ------------- 12 files changed, 57 insertions(+), 25946 deletions(-) create mode 100644 apps/www/src/content/docs/guides/rendering-large-data.md delete mode 100644 apps/www/src/content/examples/big-data.md delete mode 100644 apps/www/src/examples/big-data/data/tasks.json diff --git a/apps/www/.vitepress/theme/components/ExamplesNav.vue b/apps/www/.vitepress/theme/components/ExamplesNav.vue index 901dedd7..d1b930b6 100644 --- a/apps/www/.vitepress/theme/components/ExamplesNav.vue +++ b/apps/www/.vitepress/theme/components/ExamplesNav.vue @@ -23,11 +23,6 @@ const examples = [ href: '/examples/tasks', code: 'https://github.com/radix-vue/shadcn-vue/tree/dev/apps/www/src/examples/tasks', }, - { - name: 'Tasks (Big Data)', - href: '/examples/big-data', - code: 'https://github.com/radix-vue/shadcn-vue/tree/dev/apps/www/src/examples/big-data', - }, { name: 'Playground', href: '/examples/playground', diff --git a/apps/www/.vitepress/theme/config/docs.ts b/apps/www/.vitepress/theme/config/docs.ts index 7432c50a..75ed175a 100644 --- a/apps/www/.vitepress/theme/config/docs.ts +++ b/apps/www/.vitepress/theme/config/docs.ts @@ -353,6 +353,16 @@ export const docsConfig: DocsConfig = { }, ], }, + { + title: 'Guides', + items: [ + { + title: 'Render Large Data', + href: '/docs/guides/rendering-large-data', + items: [], + }, + ], + }, ], } diff --git a/apps/www/src/content/docs/guides/rendering-large-data.md b/apps/www/src/content/docs/guides/rendering-large-data.md new file mode 100644 index 00000000..804ce2b0 --- /dev/null +++ b/apps/www/src/content/docs/guides/rendering-large-data.md @@ -0,0 +1,29 @@ +--- +title: Rendering Large Data +description: In some cases, you may need to render a large amount of data. This can be done using the useVirtualList Component from VueUse library to render only the visible items. This can help to improve performance. +sidebar: false +--- + +## How to render large data + +When you have a large amount of data to render, you can use the [useVirtualList](https://vueuse.org/core/useVirtualList/#usevirtuallist) Component from [VueUse](https://vueuse.org/) library to render only the visible items. This can help to improve performance. + +`useVirtualList` waiting for a `MaybeRef` so firstly you need to wrap your data with `ref` or `computed` function. So we will convert our `table.getRowModel().rows` to `computed` function. + +<<< @/examples/big-data/components/DataTable.vue#tableRows{ts} + +Next step is to create a `useVirtualList` instance and pass our `tableRows` to it. For better experience list elements must be same height, which you define inside `itemHeight` property. `overscan` property is used to define how many items should be rendered outside of the visible area. + +<<< @/examples/big-data/components/DataTable.vue#useVirtualList{2-3 ts} + +## Example + +Here is an example of how to use `useVirtualList` to render a large amount of data. For test purposes, we will use 2000 rows for our table, you can change statuses, priorities, and view to see speed difference. + + + + + + diff --git a/apps/www/src/content/examples/big-data.md b/apps/www/src/content/examples/big-data.md deleted file mode 100644 index df0d05fa..00000000 --- a/apps/www/src/content/examples/big-data.md +++ /dev/null @@ -1,5 +0,0 @@ - - - diff --git a/apps/www/src/examples/big-data/Example.vue b/apps/www/src/examples/big-data/Example.vue index cd8257c5..b3f1ee0d 100644 --- a/apps/www/src/examples/big-data/Example.vue +++ b/apps/www/src/examples/big-data/Example.vue @@ -1,36 +1,11 @@ diff --git a/apps/www/src/examples/big-data/components/DataTable.vue b/apps/www/src/examples/big-data/components/DataTable.vue index 02bc6309..66404d70 100644 --- a/apps/www/src/examples/big-data/components/DataTable.vue +++ b/apps/www/src/examples/big-data/components/DataTable.vue @@ -70,12 +70,16 @@ const table = useVueTable({ }, }) +// #region tableRows const tableRows = computed(() => table.getRowModel().rows) +// #endregion tableRows +// #region useVirtualList const { list, containerProps, wrapperProps } = useVirtualList(tableRows, { itemHeight: 49, overscan: 15, }) +// #endregion useVirtualList