Niklas/shadcn-vue
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: add template code in guide docs

Browse Source
This commit is contained in:
hrynevych.romann 2024-02-20 22:53:31 +02:00
parent 79a344626e
commit d86c7159df
2 changed files with 6 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
apps/www/src/content/docs/guides/rendering-large-data.md
View File

@ -16,6 +16,10 @@ Next step is to create a `useVirtualList` instance and pass our `tableRows` to i
<<< @/examples/big-data/components/DataTable.vue#useVirtualList{2-3 ts} <<< @/examples/big-data/components/DataTable.vue#useVirtualList{2-3 ts}
As you see `useVirtualList` function returns `list` object which contains `list` property with only visible items and `containerProps`, `wrapperProps` which should be passed to the container and wrapper element.
<<< @/examples/big-data/components/DataTable.vue#template{4,5,14-24 vue:line-numbers}
## Example ## 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. 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.

2
apps/www/src/examples/big-data/components/DataTable.vue
View File

@ -82,6 +82,7 @@ const { list, containerProps, wrapperProps } = useVirtualList(tableRows, {
// #endregion useVirtualList // #endregion useVirtualList
</script> </script>
<!-- #region template -->
<template> <template>
<div class="space-y-4"> <div class="space-y-4">
<DataTableToolbar :table="table" /> <DataTableToolbar :table="table" />
@ -122,3 +123,4 @@ const { list, containerProps, wrapperProps } = useVirtualList(tableRows, {
<DataTablePagination :table="table" /> <DataTablePagination :table="table" />
</div> </div>
</template> </template>
<!-- #endregion template -->