@dataloop-ai/components 0.16.16 → 0.16.17

package/package.json

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

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

@@ -408,7 +408,17 @@
         </div>
 
         <div
-            v-if="!hideBottom || hideNoData"
+            v-if="hasPaginationSlot"
+            class="dl-table__control"
+        >
+            <slot
+                v-bind="marginalsScope"
+                name="pagination"
+            />
+        </div>
+
+        <div
+            v-else-if="!hideBottom || hideNoData"
             :class="bottomClasses"
         >
             <div class="dl-table__control">
@@ -631,6 +641,8 @@ export default defineComponent({
         // table slots
         const hasSlotByName = (name: string) => !!slots[name]
 
+        const hasPaginationSlot = computed(() => hasSlotByName('pagination'))
+
         const hasTopSlots = computed(
             () =>
                 !!slots['top'] ||
@@ -994,7 +1006,11 @@ export default defineComponent({
             isFirstPage,
             isLastPage,
             pagesNumber,
-            computedRowsNumber
+            computedRowsNumber,
+            firstPage,
+            prevPage,
+            nextPage,
+            lastPage
         } = useTablePagination(
             vm,
             computedPagination,
@@ -1043,7 +1059,11 @@ export default defineComponent({
             pagination: paginationState.value,
             pagesNumber: pagesNumber.value,
             isFirstPage: isFirstPage.value,
-            isLastPage: isLastPage.value
+            isLastPage: isLastPage.value,
+            firstPage,
+            prevPage,
+            nextPage,
+            lastPage
         }))
 
         function getCellValue(
@@ -1199,7 +1219,11 @@ export default defineComponent({
             resetVirtualScroll,
             scrollTo,
             setExpanded,
-            sort
+            sort,
+            firstPage,
+            prevPage,
+            nextPage,
+            lastPage
         })
 
         return {
@@ -1247,7 +1271,8 @@ export default defineComponent({
             displayPagination,
             onTrClick,
             onTrDblClick,
-            onTrContextMenu
+            onTrContextMenu,
+            hasPaginationSlot
         }
     }
 })

package/src/components/compound/DlTable/hooks/tablePagination.ts

@@ -80,6 +80,14 @@ export function useTablePaginationState(
         )
     )
 
+    watch(
+        () => props.pagination,
+        (pag) => {
+            innerPagination.value = Object.assign(innerPagination.value, pag)
+        },
+        { deep: true }
+    )
+
     const computedPagination = computed(() => {
         const pag =
             props['onUpdate:pagination'] !== void 0
@@ -175,6 +183,31 @@ export function useTablePagination(
             : computedPagination.value.page >= pagesNumber.value
     )
 
+    function firstPage() {
+        setPagination({ page: 1 })
+    }
+
+    function prevPage() {
+        const { page } = computedPagination.value
+        if (page > 1) {
+            setPagination({ page: page - 1 })
+        }
+    }
+
+    function nextPage() {
+        const { page, rowsPerPage } = computedPagination.value
+        if (
+            lastRowIndex.value > 0 &&
+            page * rowsPerPage < computedRowsNumber.value
+        ) {
+            setPagination({ page: page + 1 })
+        }
+    }
+
+    function lastPage() {
+        setPagination({ page: pagesNumber.value })
+    }
+
     watch(pagesNumber, (lastPage, oldLastPage) => {
         if (lastPage === oldLastPage) {
             return
@@ -198,6 +231,10 @@ export function useTablePagination(
         isFirstPage,
         isLastPage,
         pagesNumber,
-        computedRowsNumber
+        computedRowsNumber,
+        firstPage,
+        prevPage,
+        nextPage,
+        lastPage
     }
 }

package/src/demo/DlTableDemo.vue

@@ -115,13 +115,119 @@
                 @row-click="log"
                 @update:selected="updateSeleted"
             />
+
+            <div style="margin-top: 100px">
+                <DlTable
+                    :selected="selected"
+                    :separator="separator"
+                    :columns="columns"
+                    :bordered="bordered"
+                    :draggable="draggable"
+                    :pagination="pagination"
+                    :dense="dense"
+                    class="sticky-header"
+                    :filter="filter"
+                    :selection="selection"
+                    :loading="loading"
+                    :rows="tableRows"
+                    :resizable="resizable"
+                    row-key="name"
+                    color="dl-color-secondary"
+                    title="Table Title"
+                    :virtual-scroll="vScroll"
+                    style="height: 500px"
+                    :rows-per-page-options="rowsPerPageOptions"
+                    hide-bottom
+                    @row-click="log"
+                    @update:selected="updateSeleted"
+                >
+                    <template #pagination="scope">
+                        <dl-button
+                            v-if="scope.pagesNumber > 2"
+                            icon="icon-dl-first-page"
+                            color="dl-color-secondary"
+                            flat
+                            :disabled="scope.isFirstPage"
+                            @click="scope.firstPage"
+                        />
+
+                        <dl-button
+                            icon="icon-dl-left-chevron"
+                            color="dl-color-secondary"
+                            flat
+                            :disabled="scope.isFirstPage"
+                            @click="scope.prevPage"
+                        />
+
+                        <dl-button
+                            icon="icon-dl-right-chevron"
+                            color="dl-color-secondary"
+                            flat
+                            :disabled="scope.isLastPage"
+                            @click="scope.nextPage"
+                        />
+
+                        <dl-button
+                            v-if="scope.pagesNumber > 2"
+                            icon="icon-dl-last-page"
+                            color="dl-color-secondary"
+                            flat
+                            :disabled="scope.isLastPage"
+                            @click="scope.lastPage"
+                        />
+                    </template>
+                </DlTable>
+
+                <div>
+                    <p>Custom pagination outside pagination slot</p>
+                    <dl-button
+                        v-if="pagesNumber > 2"
+                        icon="icon-dl-first-page"
+                        color="dl-color-secondary"
+                        flat
+                        :disabled="isFirstPage"
+                        @click="firstPage"
+                    />
+
+                    <dl-button
+                        icon="icon-dl-left-chevron"
+                        color="dl-color-secondary"
+                        flat
+                        :disabled="isFirstPage"
+                        @click="prevPage"
+                    />
+
+                    <dl-button
+                        icon="icon-dl-right-chevron"
+                        color="dl-color-secondary"
+                        flat
+                        :disabled="isLastPage"
+                        @click="nextPage"
+                    />
+
+                    <dl-button
+                        v-if="pagesNumber > 2"
+                        icon="icon-dl-last-page"
+                        color="dl-color-secondary"
+                        flat
+                        :disabled="isLastPage"
+                        @click="lastPage"
+                    />
+                </div>
+            </div>
         </div>
     </div>
 </template>
 
 <script lang="ts">
-import { DlTable, DlOptionGroup, DlSwitch, DlInput } from '../components'
-import { defineComponent } from 'vue-demi'
+import {
+    DlTable,
+    DlOptionGroup,
+    DlSwitch,
+    DlInput,
+    DlButton
+} from '../components'
+import { defineComponent, ref, computed, watch } from 'vue-demi'
 import { times } from 'lodash'
 
 const columns = [
@@ -280,7 +386,89 @@ export default defineComponent({
         DlTable,
         DlSwitch,
         DlOptionGroup,
-        DlInput
+        DlInput,
+        DlButton
+    },
+    setup() {
+        const pagination = ref({
+            sortBy: 'desc',
+            descending: false,
+            page: 2,
+            rowsPerPage: 3
+            // rowsNumber: xx if getting data from a server
+        })
+
+        const pagesNumber = computed(() => {
+            return Math.ceil(rows.length / pagination.value.rowsPerPage)
+        })
+
+        function fixPagination(p: typeof pagination.value) {
+            if (p.page < 1) {
+                p.page = 1
+            }
+            if (p.rowsPerPage !== void 0 && p.rowsPerPage < 1) {
+                p.rowsPerPage = 0
+            }
+            return p
+        }
+
+        const lastRowIndex = computed(() => {
+            const { page, rowsPerPage } = pagination.value
+            return page * rowsPerPage
+        })
+
+        const setPagination = (val: Partial<typeof pagination.value>) => {
+            pagination.value = fixPagination({
+                ...pagination.value,
+                ...val
+            })
+        }
+
+        function firstPage() {
+            setPagination({ page: 1 })
+        }
+
+        function prevPage() {
+            const { page } = pagination.value
+            if (page > 1) {
+                setPagination({ page: page - 1 })
+            }
+        }
+
+        const tableRows = ref(rows)
+
+        function nextPage() {
+            const { page, rowsPerPage } = pagination.value
+
+            if (
+                lastRowIndex.value > 0 &&
+                page * rowsPerPage < tableRows.value.length
+            ) {
+                setPagination({ page: page + 1 })
+            }
+        }
+
+        const isLastPage = computed(
+            () => pagination.value.page >= pagesNumber.value
+        )
+
+        const isFirstPage = computed(() => pagination.value.page === 1)
+
+        function lastPage() {
+            setPagination({ page: pagesNumber.value })
+        }
+
+        return {
+            pagination,
+            pagesNumber,
+            tableRows,
+            firstPage,
+            lastPage,
+            nextPage,
+            prevPage,
+            isLastPage,
+            isFirstPage
+        }
     },
     data() {
         return {