@dataloop-ai/components 0.19.147 → 0.19.148

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dataloop-ai/components",
-  "version": "0.19.147",
+  "version": "0.19.148",
   "exports": {
     ".": "./index.ts",
     "./models": "./models.ts",

package/src/components/basic/DlGrid/DlGrid.vue

@@ -1,17 +1,33 @@
 <template>
-    <div v-if="hasVirtualScroll">
-        <dl-virtual-scroll
-            v-slot="{ item }"
-            :scroll-debounce="scrollDebounce"
-            style="height: var(--dl-virtual-scroll-height, 500px)"
+    <div v-if="infiniteScroll">
+        <dl-infinite-scroll
             :items="items"
-            :styles="{ gridStyles, gridClass }"
+            :page-size="infiniteScrollPageSize"
+            :style="$attrs.style"
+            :class="$attrs.class"
+            style="height: var(--dl-virtual-scroll-height, 500px)"
+            @scroll-to-top="$emit('scroll-to-top')"
+            @scroll-to-bottom="$emit('scroll-to-bottom')"
         >
-            <slot
-                name="item-slot"
-                v-bind="{ item }"
-            />
-        </dl-virtual-scroll>
+            <template #content="{ items }">
+                <div
+                    ref="grid"
+                    :style="gridStyles"
+                    :class="gridClass"
+                >
+                    <div
+                        v-for="item in items"
+                        :key="item.id"
+                        class="item-wrapper"
+                    >
+                        <slot
+                            name="item-slot"
+                            v-bind="{ item }"
+                        />
+                    </div>
+                </div>
+            </template>
+        </dl-infinite-scroll>
     </div>
     <div
         v-else-if="!hasItems"
@@ -57,11 +73,11 @@ import { getGridTemplate, swapElementsInMatrix } from './utils'
 import { isCustomEvent } from '../utils'
 import { getElementAbove } from '../../../utils'
 import { DlGridMode, GridItem } from './types'
-import { DlVirtualScroll } from '../../shared/DlVirtualScroll'
+import { DlInfiniteScroll } from '../../shared'
 
 export default defineComponent({
     components: {
-        DlVirtualScroll
+        DlInfiniteScroll
     },
     model: {
         prop: 'modelValue',
@@ -92,20 +108,21 @@ export default defineComponent({
             type: String as PropType<DlGridMode>,
             default: DlGridMode.LAYOUT
         },
-        scrollDebounce: {
-            type: Number,
-            default: 100
-        },
-        virtualScroll: {
+        infiniteScroll: {
             type: Boolean,
             default: false
         },
-        virtualScrollThreshold: {
+        infiniteScrollPageSize: {
             type: Number,
-            default: 100
+            default: 15
         }
     },
-    emits: ['update:model-value', 'layout-changed'],
+    emits: [
+        'update:model-value',
+        'layout-changed',
+        'scroll-to-top',
+        'scroll-to-bottom'
+    ],
     setup(props, { emit }) {
         const vm = getCurrentInstance()
         const grid = ref<HTMLElement | null>(null)
@@ -115,8 +132,7 @@ export default defineComponent({
             rowGap,
             columnGap,
             maxElementsPerRow,
-            items,
-            virtualScroll
+            items
         } = toRefs(props)
 
         const isLayoutMode = computed(() => mode.value == DlGridMode.LAYOUT)
@@ -129,12 +145,6 @@ export default defineComponent({
                 : 'dl-grid-wrapper__flex'
         )
 
-        const hasVirtualScroll = computed(
-            () =>
-                items.value?.length > props.virtualScrollThreshold ||
-                virtualScroll.value
-        )
-
         const gridStyles = computed(() => {
             const gridStyles: Dictionary<string | number> = {
                 '--row-gap': rowGap.value,
@@ -258,7 +268,6 @@ export default defineComponent({
             gridClass,
             gridStyles,
             grid,
-            hasVirtualScroll,
             hasItems
         }
     }

package/src/components/compound/DlTable/DlTable.vue

@@ -61,16 +61,16 @@
             v-bind="virtProps"
             ref="virtScrollRef"
             type="__dltable"
-            :class="tableClass + additionalClasses"
+            :class="virtualScrollClasses"
             :style="tableStyle"
-            :table-colspan="colspanWithActionsRow"
+            :table-colspan="colspanWithExpandableRow"
             :scroll-target="virtualScrollTarget"
             :items="computedRows"
             :scroll-debounce="scrollDebounce"
             @virtual-scroll="onVScroll"
         >
             <template #before>
-                <thead :colspan="columns.length">
+                <thead :colspan="colspanWithExpandableRow">
                     <slot
                         v-if="!hideHeader"
                         name="header"
@@ -235,22 +235,21 @@
                                 </slot>
                             </DlTh>
                         </DlTr>
-
-                        <tr
-                            v-if="loading && !hasLoadingSlot"
-                            class="dl-table__progress"
-                        >
-                            <th
-                                :colspan="colspanWithActionsRow"
-                                class="relative-position"
-                            >
-                                <dl-progress-bar
-                                    indeterminate
-                                    :color="color"
-                                />
-                            </th>
-                        </tr>
                     </slot>
+                    <tr
+                        v-if="loading && !hasLoadingSlot"
+                        class="dl-table__progress"
+                    >
+                        <th
+                            :colspan="colspanWithExpandableRow"
+                            class="relative-position"
+                        >
+                            <dl-progress-bar
+                                indeterminate
+                                :color="color"
+                            />
+                        </th>
+                    </tr>
                 </thead>
             </template>
             <template #default="props">
@@ -415,8 +414,7 @@
                                 v-if="isRowExpanded(props.item)"
                                 :key="getRowExpandedKey(props.item)"
                             >
-                                <!-- cols + icon col + expandable icon col-->
-                                <td :colspan="columns.length + 1 + 1">
+                                <td :colspan="colspanWithExpandableRow">
                                     <slot
                                         v-bind="{ row: props.item }"
                                         name="body-cell-expandable-content"
@@ -455,6 +453,7 @@
 
         <div
             v-else
+            ref="tableScroll"
             class="dl-table__middle scroll"
         >
             <table
@@ -462,7 +461,7 @@
                 class="dl-table"
                 :class="additionalClasses"
             >
-                <thead :colspan="columns.length">
+                <thead :colspan="colspanWithExpandableRow">
                     <slot
                         v-if="!hideHeader"
                         name="header"
@@ -628,22 +627,21 @@
                                 </slot>
                             </DlTh>
                         </DlTr>
-
-                        <tr
-                            v-if="loading && !hasLoadingSlot"
-                            class="dl-table__progress"
-                        >
-                            <th
-                                :colspan="colspanWithActionsRow"
-                                class="relative-position"
-                            >
-                                <dl-progress-bar
-                                    indeterminate
-                                    :color="color"
-                                />
-                            </th>
-                        </tr>
                     </slot>
+                    <tr
+                        v-if="loading && !hasLoadingSlot"
+                        class="dl-table__progress"
+                    >
+                        <th
+                            :colspan="colspanWithExpandableRow"
+                            class="relative-position"
+                        >
+                            <dl-progress-bar
+                                indeterminate
+                                :color="color"
+                            />
+                        </th>
+                    </tr>
                 </thead>
                 <slot
                     name="tbody"
@@ -661,13 +659,7 @@
                             onEnd: handleSortableEvent
                         }"
                         :is-sortable="hasDraggableRows"
-                        :options="{
-                            group: 'nested',
-                            animation: 150,
-                            fallbackOnBody: true,
-                            invertSwap: true,
-                            swapThreshold: 0.5
-                        }"
+                        :options="sortableOptions"
                     >
                         <slot
                             name="top-row"
@@ -677,6 +669,17 @@
                             name="table-body"
                             :computed-rows="computedRows"
                         >
+                            <dl-top-scroll
+                                v-if="tableScroll && infiniteScroll"
+                                :container-ref="tableScroll"
+                                @scroll-to-top="
+                                    $emit(
+                                        'scroll-to-top',
+                                        computedPagination.rowsPerPage,
+                                        tableScroll
+                                    )
+                                "
+                            />
                             <slot
                                 v-for="(row, pageIndex) in computedRows"
                                 v-bind="
@@ -819,7 +822,7 @@
                                     v-if="isRowExpanded(row)"
                                     :key="getRowExpandedKey(row)"
                                 >
-                                    <td :colspan="columns.length + 1 + 1">
+                                    <td :colspan="colspanWithExpandableRow">
                                         <slot
                                             v-bind="{ row }"
                                             name="body-cell-expandable-content"
@@ -831,6 +834,17 @@
                                     </td>
                                 </tr>
                             </slot>
+                            <dl-bottom-scroll
+                                v-if="tableScroll && infiniteScroll"
+                                :container-ref="tableScroll"
+                                @scroll-to-bottom="
+                                    $emit(
+                                        'scroll-to-bottom',
+                                        computedPagination.rowsPerPage,
+                                        tableScroll
+                                    )
+                                "
+                            />
                         </slot>
 
                         <slot
@@ -992,6 +1006,7 @@ import { insertAtIndex } from './utils/insertAtIndex'
 import { getCellValue } from './utils/getCellValue'
 import { getContainerClass } from './utils/tableClasses'
 import { isEqual } from 'lodash'
+import { DlTopScroll, DlBottomScroll } from '../../shared/DlInfiniteScroll'
 
 const commonVirtPropsObj = {} as Record<string, any>
 commonVirtPropsList.forEach((p) => {
@@ -1015,7 +1030,9 @@ export default defineComponent({
         DlPopup,
         DlList,
         Sortable,
-        DlEllipsis
+        DlEllipsis,
+        DlTopScroll,
+        DlBottomScroll
     },
     props: {
         /**
@@ -1118,6 +1135,13 @@ export default defineComponent({
             type: Boolean,
             default: false
         },
+        /**
+         * Enable infinite scroll
+         */
+        infiniteScroll: {
+            type: Boolean,
+            default: false
+        },
         /**
          * Hide table pagination
          */
@@ -1246,7 +1270,7 @@ export default defineComponent({
             default: 'No data'
         },
         stickyColumns: {
-            type: Object as PropType<TableStickyPosition>,
+            type: String as PropType<TableStickyPosition>,
             default: null,
             validator: (value: string) =>
                 ['first', 'last', 'both'].includes(value)
@@ -1300,8 +1324,13 @@ export default defineComponent({
         const rootRef = ref<HTMLDivElement>(null)
         const tableRef = ref<HTMLTableElement>(null)
         const virtScrollRef = ref(null)
+        const tableScroll = ref(null)
+
+        const hasExpandableSlot = computed(() =>
+            hasSlotByName('body-cell-expandable-content')
+        )
         const hasVirtScroll = computed<boolean>(
-            () => virtualScroll.value === true
+            () => virtualScroll.value && !hasExpandableSlot.value
         )
 
         const hasEmptyStateProps = computed(() =>
@@ -1604,6 +1633,7 @@ export default defineComponent({
         )
 
         const computedRows = computed(() => {
+            if (props.infiniteScroll) return filteredSortedRows.value
             let filtered = filteredSortedRows.value
 
             const { rowsPerPage } = computedPagination.value
@@ -1628,7 +1658,7 @@ export default defineComponent({
             return filtered
         })
 
-        const additionalClasses = computed(() => {
+        const additionalClasses = computed<string[]>(() => {
             const classes: string[] = []
 
             if (hasDraggableRows.value === true) {
@@ -1643,7 +1673,9 @@ export default defineComponent({
         })
 
         const displayPagination = computed(
-            () => !(hidePagination.value || nothingToDisplay.value)
+            () =>
+                !props.infiniteScroll &&
+                !(hidePagination.value || nothingToDisplay.value)
         )
 
         const {
@@ -1675,6 +1707,12 @@ export default defineComponent({
             return computedColspan.value + (showRowActions.value ? 1 : 0)
         })
 
+        const colspanWithExpandableRow = computed(() => {
+            return (
+                colspanWithActionsRow.value + (hasExpandableSlot.value ? 1 : 0)
+            )
+        })
+
         const { columnToSort, computedSortMethod, sort } = useTableSort(
             props as unknown as DlTableProps,
             computedPagination,
@@ -1988,6 +2026,35 @@ export default defineComponent({
             return slots.length ? slots.map((slot: any) => slot.name) : null
         })
 
+        const sortableOptions: any = {
+            group: 'nested',
+            animation: 150,
+            fallbackOnBody: true,
+            invertSwap: true,
+            swapThreshold: 0.5
+        }
+
+        const virtualScrollClasses = computed(() => {
+            let classes: string[] = []
+
+            if (tableClass.value) {
+                if (Array.isArray(tableClass.value)) {
+                    classes = (tableClass.value as string[]) ?? []
+                } else if (typeof tableClass.value === 'string') {
+                    classes = (tableClass.value as string)?.split(' ')
+                } else if (typeof tableClass.value === 'object') {
+                    classes = Object.keys(
+                        tableClass.value as Record<string, any>
+                    ).filter(
+                        (key: string) =>
+                            !!(tableClass.value as Record<string, any>)[key]
+                    )
+                }
+            }
+
+            return classes.concat(additionalClasses.value)
+        })
+
         const updatePagination = (value: any, key: string) => {
             return setPagination({ [`${key}`]: value })
         }
@@ -2027,6 +2094,9 @@ export default defineComponent({
             computedCols,
             computedColspan,
             colspanWithActionsRow,
+            colspanWithExpandableRow,
+            virtualScrollClasses,
+            sortableOptions,
             getRowKey,
             additionalClasses,
             getHeaderScope,
@@ -2085,7 +2155,9 @@ export default defineComponent({
             tableRef,
             getRowExpandedIcon,
             computedPagination,
-            getRowExpandedKey
+            getRowExpandedKey,
+            hasExpandableSlot,
+            tableScroll
         }
     }
 })

package/src/components/compound/DlTable/styles/dl-table-styles.scss

@@ -8,6 +8,13 @@
         border-right: 1px solid var(--dl-color-separator);
     }
 
+    thead {
+        position: sticky;
+        top: 0;
+        background-color: var(--dl-color-panel-background);
+        z-index: 50;
+    }
+
     .sticky-col {
         position: sticky;
         background-color: var(--dl-color-panel-background);

package/src/components/compound/DlTable/utils/emits.ts

@@ -11,6 +11,8 @@ export const emits = [
     'row-dblclick',
     'row-contextmenu',
     'update:pagination',
+    'scroll-to-bottom',
+    'scroll-to-top',
     ...useTableRowExpandEmits,
     ...useTableRowSelectionEmits
 ]

package/src/components/shared/DlInfiniteScroll/DlInfiniteScroll.vue

@@ -0,0 +1,188 @@
+<template>
+    <div
+        ref="containerRef"
+        class="dl-infinite-scroll"
+        :style="computedStyles"
+        :class="computedClasses"
+    >
+        <DlTopScroll
+            :container-ref="containerRef"
+            @scroll-to-top="onScrollToTop"
+        />
+        <slot
+            name="content"
+            :items="displayItems"
+        >
+            <div
+                v-for="item in displayItems"
+                :key="itemKey(item)"
+            >
+                <slot :item="item" />
+            </div>
+        </slot>
+        <DlBottomScroll
+            :container-ref="containerRef"
+            @scroll-to-bottom="onScrollToBottom"
+        />
+    </div>
+</template>
+<script lang="ts">
+import { cloneDeep } from 'lodash'
+import {
+    computed,
+    defineComponent,
+    nextTick,
+    PropType,
+    ref,
+    toRefs,
+    watch
+} from 'vue-demi'
+import { DlTopScroll, DlBottomScroll } from './components'
+
+const MAX_SLICE_SIZE = 100
+const DEFAULT_SLICE_SIZE = 15
+const MIN_SLICE_SIZE = 0
+
+export default defineComponent({
+    name: 'DlInfiniteScroll',
+    components: { DlTopScroll, DlBottomScroll },
+    props: {
+        items: {
+            type: Array as PropType<Record<string, any>[]>,
+            default: () => [] as Record<string, any>[]
+        },
+        pageSize: {
+            type: Number,
+            default: DEFAULT_SLICE_SIZE,
+            validator: (val: number) =>
+                val <= MAX_SLICE_SIZE && val >= MIN_SLICE_SIZE
+        },
+        scrollDebounce: {
+            type: Number,
+            default: 100
+        }
+    },
+    emits: ['scroll-to-top', 'scroll-to-bottom'],
+    setup(props, { emit, attrs }) {
+        const { items, pageSize, scrollDebounce } = toRefs(props)
+        const containerRef = ref(null)
+        const currentPage = ref(0)
+        const pagesCount = ref(0)
+        const itemPages = ref(new Map<number, Record<string, any>[]>())
+        const lastOp = ref<string>('')
+
+        const computedStyles = computed<any>(() => {
+            return attrs.style
+        })
+        const computedClasses = computed<any>(() => {
+            return attrs.class
+        })
+
+        const displayItems = computed(() => {
+            const page = currentPage.value
+            const items = cloneDeep(itemPages.value.get(page))
+
+            const prevPage = cloneDeep(itemPages.value.get(page - 1))
+            const nextPage = cloneDeep(itemPages.value.get(page + 1))
+
+            const toDisplay = items ?? []
+
+            if (prevPage?.length && nextPage?.length) {
+                toDisplay.unshift(...prevPage.slice(-pageSize.value))
+                toDisplay.push(...nextPage.slice(0, pageSize.value))
+            } else if (prevPage?.length) {
+                toDisplay.unshift(...prevPage.slice(-pageSize.value))
+            } else if (nextPage?.length) {
+                toDisplay.push(...nextPage.slice(0, pageSize.value))
+            }
+
+            nextTick(() => {
+                if (lastOp.value === 'top' && page !== 0) {
+                    containerRef.value.scrollTop +=
+                        containerRef.value.scrollHeight * 0.333
+                } else if (
+                    lastOp.value === 'bottom' &&
+                    page !== pagesCount.value
+                ) {
+                    if (currentPage.value - 1 === 0) {
+                        return
+                    }
+
+                    containerRef.value.scrollTop -=
+                        containerRef.value.scrollHeight * 0.333
+                }
+            })
+
+            return toDisplay
+        })
+
+        const itemKey = (item: any) => {
+            return item.id ?? item.key ?? JSON.stringify(item)
+        }
+
+        const onScrollToTop = () => {
+            lastOp.value = 'top'
+            if (currentPage.value <= 0) {
+                emit('scroll-to-top')
+            } else {
+                currentPage.value--
+            }
+        }
+        const onScrollToBottom = () => {
+            lastOp.value = 'bottom'
+            if (currentPage.value >= pagesCount.value - 1) {
+                emit('scroll-to-bottom')
+            } else {
+                currentPage.value++
+            }
+        }
+
+        const splitArrayIntoPages = (
+            arr: Record<string, any>[],
+            pageSize: number
+        ): Map<number, any[]> => {
+            pagesCount.value = Math.ceil(arr.length / pageSize)
+            const pages = new Map<number, any[]>()
+
+            for (let i = 0; i < pagesCount.value; i++) {
+                const start = i * pageSize
+                const end = start + pageSize
+                pages.set(i, arr.slice(start, end))
+            }
+
+            return pages
+        }
+
+        watch(
+            [items, pageSize],
+            () => {
+                itemPages.value = splitArrayIntoPages(
+                    items.value,
+                    pageSize.value
+                )
+            },
+            { immediate: true }
+        )
+
+        return {
+            containerRef,
+            onScrollToTop,
+            onScrollToBottom,
+            displayItems,
+            itemKey,
+            computedStyles,
+            computedClasses
+        }
+    }
+})
+</script>
+<style scoped lang="scss">
+.dl-infinite-scroll {
+    overflow-y: auto;
+    height: 100%;
+    width: 100%;
+    position: relative;
+    // To not allow any weird scroll jumping behavior
+    scroll-behavior: auto !important;
+}
+</style>

package/src/components/shared/DlInfiniteScroll/components/DlBottomScroll.vue

@@ -0,0 +1,58 @@
+<template>
+    <div
+        ref="bottomRow"
+        class="infinite-scroll-bottom"
+    />
+</template>
+
+<script lang="ts">
+import { defineComponent, PropType, ref, toRefs, watch } from 'vue-demi'
+import { createIntersectionObserver } from '../utils'
+
+export default defineComponent({
+    props: {
+        containerRef: {
+            // todo: fix typing here
+            type: null as any as PropType<HTMLElement>,
+            default: null
+        }
+    },
+    emits: ['scroll-to-bottom'],
+    setup(props, { emit }) {
+        const { containerRef } = toRefs(props)
+        const bottomRow = ref(null)
+        const observer = ref(null)
+
+        const initObserver = () => {
+            if (!bottomRow.value) {
+                return
+            }
+
+            observer.value?.disconnect()
+            observer.value = null
+
+            observer.value = createIntersectionObserver(
+                containerRef.value,
+                () => {
+                    emit('scroll-to-bottom')
+                }
+            )
+            observer.value.observe(bottomRow.value as HTMLElement)
+        }
+
+        watch([containerRef, bottomRow], initObserver, { immediate: true })
+
+        return {
+            bottomRow
+        }
+    }
+})
+</script>
+
+<style scoped lang="scss">
+.infinite-scroll-bottom {
+    content: '';
+    height: 3px;
+}
+</style>
+createIntersectionObservercreateIntersectionObserver./utils/create-observer./utils/createIntersectionObserver

package/src/components/shared/DlInfiniteScroll/components/DlTopScroll.vue

@@ -0,0 +1,58 @@
+<template>
+    <div
+        ref="topRow"
+        class="infinite-scroll-top"
+    />
+</template>
+
+<script lang="ts">
+import { defineComponent, PropType, ref, toRefs, watch } from 'vue-demi'
+import { createIntersectionObserver } from '../utils'
+
+export default defineComponent({
+    props: {
+        containerRef: {
+            // todo: fix typing here
+            type: null as any as PropType<HTMLElement>,
+            default: null
+        }
+    },
+    emits: ['scroll-to-top'],
+    setup(props, { emit }) {
+        const { containerRef } = toRefs(props)
+        const topRow = ref(null)
+        const observer = ref(null)
+
+        const initObserver = () => {
+            if (!topRow.value) {
+                return
+            }
+
+            observer.value?.disconnect()
+            observer.value = null
+
+            observer.value = createIntersectionObserver(
+                containerRef.value,
+                () => {
+                    emit('scroll-to-top')
+                }
+            )
+            observer.value.observe(topRow.value as HTMLElement)
+        }
+
+        watch([containerRef, topRow], initObserver, { immediate: true })
+
+        return {
+            topRow
+        }
+    }
+})
+</script>
+
+<style scoped lang="scss">
+.infinite-scroll-top {
+    content: '';
+    height: 3px;
+}
+</style>
+createIntersectionObservercreateIntersectionObserver./utils/create-observer./utils/createIntersectionObserver

package/src/components/shared/DlInfiniteScroll/components/index.ts

@@ -0,0 +1,4 @@
+import DlTopScroll from './DlTopScroll.vue'
+import DlBottomScroll from './DlBottomScroll.vue'
+
+export { DlTopScroll, DlBottomScroll }

package/src/components/shared/DlInfiniteScroll/index.ts

@@ -0,0 +1,4 @@
+export * from './components'
+
+import DlInfiniteScroll from './DlInfiniteScroll.vue'
+export { DlInfiniteScroll }

package/src/components/shared/DlInfiniteScroll/utils/createIntersectionObserver.ts

@@ -0,0 +1,14 @@
+export const createIntersectionObserver = (ref: any, emit: Function) => {
+    const root = ref?.$el || ref
+    let wasIntersecting = true
+    return new IntersectionObserver(
+        ([entry]) => {
+            const isCurrentlyIntersecting = entry.isIntersecting
+            if (!wasIntersecting && isCurrentlyIntersecting) {
+                emit()
+            }
+            wasIntersecting = isCurrentlyIntersecting
+        },
+        { root, threshold: 0.5 }
+    )
+}

package/src/components/shared/DlInfiniteScroll/utils/index.ts

@@ -0,0 +1 @@
+export * from './createIntersectionObserver'

package/src/components/shared/index.ts

@@ -2,3 +2,4 @@ export * from './DlItemSection'
 export * from './DlInfoErrorMessage'
 export * from './DlVirtualScroll'
 export * from './DlTooltip'
+export * from './DlInfiniteScroll'

package/src/demos/DlGridDemo.vue

@@ -204,7 +204,10 @@
             </dl-grid>
         </div>
         <div v-if="activeContentType.value === 'prop'">
-            <dl-grid :items="images">
+            <dl-grid
+                :items="images"
+                infinite-scroll
+            >
                 <template #item-slot="{ item }">
                     <img :src="item.src">
                 </template>

package/src/demos/DlInfiniteScrollDemo.vue

@@ -0,0 +1,236 @@
+<template>
+    <div>
+        <div>
+            <span> full implementation using the component </span>
+            <DlInfiniteScroll
+                :items="rows"
+                :page-size="50"
+                style="height: 500px; width: 600px"
+                @scroll-to-bottom="pushRows"
+            >
+                <template #default="{ item }">
+                    {{ item.name }}
+                </template>
+            </DlInfiniteScroll>
+        </div>
+        <div style="margin-top: 10px">
+            <span>
+                Custom implementation with the top and bottom components
+            </span>
+            <span>List</span>
+            <dl-list
+                ref="listRef"
+                class="item-list"
+            >
+                <dl-top-scroll
+                    :container-ref="listRef"
+                    @scroll-to-top="handleListScrollToTop"
+                />
+                <dl-list-item
+                    v-for="row in rows"
+                    :key="row.id"
+                >
+                    {{ row.name }}
+                </dl-list-item>
+                <dl-bottom-scroll
+                    :container-ref="listRef"
+                    @scroll-to-bottom="handleListScrollToBottom"
+                />
+            </dl-list>
+            <div style="margin-top: 100px">
+                <p>Infinite scrolling With custom data and weird expandable</p>
+                <dl-table
+                    :loading="loading"
+                    :rows="rows"
+                    :columns="columns"
+                    style="height: 500px; width: 600px"
+                    row-key="index"
+                    infinite-scroll
+                    expandable-rows
+                    :rows-per-page-options="[rowsPerPage]"
+                    @scroll-to-bottom="handleTableScrollToBottom"
+                    @scroll-to-top="handleTableScrollToTop"
+                >
+                    <template #body-cell-expandable-content="{ row }">
+                        <div>
+                            {{ row }}
+                        </div>
+                        <div>
+                            {{ row }}
+                        </div>
+                        <div>
+                            {{ row }}
+                        </div>
+                        <div>
+                            {{ row }}
+                        </div>
+                        <div>
+                            {{ row }}
+                        </div>
+                    </template>
+                </dl-table>
+            </div>
+        </div>
+        <div style="margin-top: 10px">
+            <span> IN A GRID </span>
+            <dl-grid
+                :items="allRows"
+                style="--dl-virtual-scroll-height: 40vh"
+                :max-elements-per-row="4"
+                column-gap="20px"
+                row-gap="20px"
+                :infinite-scroll-page-size="32"
+                infinite-scroll
+            >
+                <template #item-slot="{ item }">
+                    <div
+                        style="
+                            height: 50px;
+                            width: 180px;
+                            display: grid;
+                            place-items: center;
+                        "
+                    >
+                        <div>{{ item.name }}</div>
+                    </div>
+                </template>
+            </dl-grid>
+        </div>
+    </div>
+</template>
+
+<script lang="ts">
+import { defineComponent, ref } from 'vue-demi'
+import {
+    DlTopScroll,
+    DlBottomScroll,
+    DlList,
+    DlListItem,
+    DlTable,
+    DlInfiniteScroll,
+    DlGrid
+} from '../components'
+import { columns } from './DlTableDemo.vue'
+import { cloneDeep, times } from 'lodash'
+
+const getRows = (count: number) =>
+    times(count, (index) => ({
+        name: 'KitKat' + index,
+        calories: 518,
+        fat: 26.0,
+        carbs: 65,
+        protein: 7,
+        sodium: 54,
+        calcium: '12%',
+        iron: '6%'
+    }))
+
+const items = getRows(500)
+
+export default defineComponent({
+    components: {
+        DlTopScroll,
+        DlBottomScroll,
+        DlList,
+        DlListItem,
+        DlTable,
+        DlInfiniteScroll,
+        DlGrid
+    },
+    setup() {
+        const loading = ref(false)
+        const scrollOffset = 500
+        const rowsPerPage = 30
+        const sliceIndex = { from: 0, to: 0 }
+        const allRows = ref<any[]>(cloneDeep(items))
+        const rows = ref<any[]>(cloneDeep(items.slice(0, 30)))
+        const listRef = ref(null)
+
+        const page = ref(0)
+
+        const pushRows = () => {
+            page.value++
+            const start = page.value * 30
+            rows.value = rows.value.concat(items.slice(start, start + 30))
+        }
+
+        const handleInfiniteScroll = (
+            rowsPerPage: number,
+            direction: 'top' | 'bottom',
+            maxLength?: number,
+            ref?: HTMLElement
+        ) => {
+            loading.value = true
+            setTimeout(() => {
+                if (!sliceIndex.to) sliceIndex.to = rowsPerPage
+                if (maxLength) {
+                    if (direction === 'bottom') {
+                        sliceIndex.to += rowsPerPage
+                        if (rows.value.length > maxLength) {
+                            sliceIndex.from += rowsPerPage
+                            if (ref) {
+                                ref.scrollTop -= scrollOffset
+                            }
+                        }
+                    } else {
+                        sliceIndex.from -= rowsPerPage
+                        if (rows.value.length > maxLength) {
+                            sliceIndex.to -= rowsPerPage
+                            if (ref) {
+                                ref.scrollTop += scrollOffset
+                            }
+                        }
+                        if (sliceIndex.from < 0) {
+                            sliceIndex.from = 0
+                        }
+                    }
+                }
+                rows.value = items.slice(sliceIndex.from, sliceIndex.to)
+                loading.value = false
+            }, 500)
+        }
+        const handleListScrollToBottom = () => {
+            handleInfiniteScroll(rowsPerPage, 'bottom', 100, listRef.value.$el)
+        }
+        const handleListScrollToTop = () => {
+            handleInfiniteScroll(rowsPerPage, 'top', 100, listRef.value.$el)
+        }
+        const handleTableScrollToBottom = (
+            rowsPerPage: number,
+            ref: HTMLElement
+        ) => {
+            handleInfiniteScroll(rowsPerPage, 'bottom', 100, ref)
+        }
+        const handleTableScrollToTop = (
+            rowsPerPage: number,
+            ref: HTMLElement
+        ) => {
+            handleInfiniteScroll(rowsPerPage, 'top', 100, ref)
+        }
+
+        return {
+            items,
+            rows,
+            columns,
+            loading,
+            listRef,
+            rowsPerPage,
+            handleInfiniteScroll,
+            handleListScrollToBottom,
+            handleListScrollToTop,
+            handleTableScrollToBottom,
+            handleTableScrollToTop,
+            pushRows,
+            allRows
+        }
+    }
+})
+</script>
+
+<style scoped>
+.item-list {
+    height: 300px;
+    overflow-y: auto;
+    padding: 10px;
+}
+</style>

package/src/demos/DlTableDemo.vue

@@ -108,12 +108,12 @@
                 :loading="loading"
                 :rows="tableRows"
                 :resizable="resizable"
+                :rows-per-page-options="[30]"
                 row-key="name"
                 color="dl-color-secondary"
                 title="Table Title"
                 :virtual-scroll="vScroll"
                 style="height: 500px"
-                :rows-per-page-options="rowsPerPageOptions"
                 @row-click="log"
                 @th-click="log"
                 @update:selected="updateSeleted"
@@ -681,48 +681,6 @@
                 </template>
             </DlTable>
         </div>
-        <div style="margin-top: 100px">
-            <p>Infinite scrolling With custom data and weird expandable</p>
-            <DlTable
-                :selected="selected"
-                :separator="separator"
-                :draggable="draggable"
-                :filter="filter"
-                :resizable="resizable"
-                :selection="selection"
-                :dense="dense"
-                title="Treats"
-                color="dl-color-secondary"
-                :loading="infiniteLoading"
-                :rows="generatedRows"
-                :columns="tableColumns"
-                style="height: 500px"
-                row-key="index"
-                virtual-scroll
-                expandable-rows
-                @virtual-scroll="onScrollGenerate"
-                @update:pagination="log('hi')"
-                @col-update="updateColumns"
-            >
-                <template #body-cell-expandable-content="{ row }">
-                    <div>
-                        {{ row }}
-                    </div>
-                    <div>
-                        {{ row }}
-                    </div>
-                    <div>
-                        {{ row }}
-                    </div>
-                    <div>
-                        {{ row }}
-                    </div>
-                    <div>
-                        {{ row }}
-                    </div>
-                </template>
-            </DlTable>
-        </div>
     </div>
 </template>
 
@@ -739,7 +697,7 @@ import { defineComponent, ref, computed, nextTick } from 'vue-demi'
 import { times, cloneDeep, isNumber } from 'lodash'
 import { DlTablePagination, DlVirtualScrollEvent } from '../types'
 
-const columns = [
+export const columns = [
     {
         name: 'name',
         required: true,
@@ -839,108 +797,8 @@ const columns2 = [
     }
 ]
 
-const rows = [
-    {
-        name: 'Frozen Yogurt',
-        calories: 159,
-        fat: 6.0,
-        carbs: 24,
-        protein: 4.0,
-        sodium: 87,
-        calcium: '14%',
-        iron: '1%'
-    },
-    {
-        name: 'Ice cream sandwich',
-        calories: 237,
-        fat: 9.0,
-        carbs: 37,
-        protein: 4.3,
-        sodium: 129,
-        calcium: '8%',
-        iron: '1%'
-    },
-    {
-        name: 'Eclair',
-        calories: 262,
-        fat: 16.0,
-        carbs: 23,
-        protein: 6.0,
-        sodium: 337,
-        calcium: '6%',
-        iron: '7%'
-    },
-    {
-        name: 'Cupcake',
-        calories: 305,
-        fat: 3.7,
-        carbs: 67,
-        protein: 4.3,
-        sodium: 413,
-        calcium: '3%',
-        iron: '8%'
-    },
-    {
-        name: 'Gingerbread',
-        calories: 356,
-        fat: 16.0,
-        carbs: 49,
-        protein: 3.9,
-        sodium: 327,
-        calcium: '7%',
-        iron: '16%'
-    },
-    {
-        name: 'Jelly bean',
-        calories: 375,
-        fat: 0.0,
-        carbs: 94,
-        protein: 0.0,
-        sodium: 50,
-        calcium: '0%',
-        iron: '0%'
-    },
-    {
-        name: 'Lollipop',
-        calories: 392,
-        fat: 0.2,
-        carbs: 98,
-        protein: 0,
-        sodium: 38,
-        calcium: '0%',
-        iron: '2%'
-    },
-    {
-        name: 'Honeycomb',
-        calories: 408,
-        fat: 3.2,
-        carbs: 87,
-        protein: 6.5,
-        sodium: 562,
-        calcium: '0%',
-        iron: '45%'
-    },
-    {
-        name: 'Donut',
-        calories: 452,
-        fat: 25.0,
-        carbs: 51,
-        protein: 4.9,
-        sodium: 326,
-        calcium: '2%',
-        iron: '22%'
-    },
-    {
-        name: 'KitKat',
-        calories: 518,
-        fat: 26.0,
-        carbs: 65,
-        protein: 7,
-        sodium: 54,
-        calcium: '12%',
-        iron: '6%'
-    },
-    ...times(1000, (index) => ({
+const getRows = (count: number) => [
+    ...times(count, (index) => ({
         name: 'KitKat' + index,
         calories: 518,
         fat: 26.0,
@@ -952,6 +810,8 @@ const rows = [
     }))
 ]
 
+const rows = getRows(1000)
+
 const columnsAligned = [
     {
         name: 'name',
@@ -1058,7 +918,7 @@ export default defineComponent({
         const draggable = ref('both')
         const tableColumns = ref(columns)
         const tableColumnsAligned = ref(columnsAligned)
-        const rowsPerPageOptions = ref([5, 10, 12, 14, 16, 100])
+        const rowsPerPageOptions = ref([10, 12, 14, 16, 100])
 
         const infiniteLoading = ref(false)
 

package/src/demos/index.ts

@@ -67,6 +67,7 @@ import DlThumbnailGallery from './DlThumbnailGalleryDemo.vue'
 import DlLayoutDemo from './DlLayoutDemo.vue'
 import { DlCodeEditorDemo } from './DlCodeEditor'
 import DlLabelPickerDemo from './DlLabelPickerDemo.vue'
+import DlInfiniteScrollDemo from './DlInfiniteScrollDemo.vue'
 
 export default {
     AvatarDemo,
@@ -134,5 +135,6 @@ export default {
     DlThumbnailGallery,
     DlCodeEditorDemo,
     DlLayoutDemo,
-    DlLabelPickerDemo
+    DlLabelPickerDemo,
+    DlInfiniteScrollDemo
 }