@dataloop-ai/components 0.18.125 → 0.18.126

package/package.json

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

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

@@ -16,7 +16,7 @@ export type TablePagination = {
     page?: number
     rowsPerPage?: number
     rowsNumber?: number
-    maxPages?: number
+    maxDisplayRange?: number
 }
 
 function samePagination(oldPag: TablePagination, newPag: TablePagination) {
@@ -69,7 +69,8 @@ export function useTablePaginationState(
                     ? rowsPerPageOptions.value[0]
                     : 5,
                 min: 1,
-                maxPages: 0,
+                // todo: calculate based on width of element
+                maxDisplayRange: 7,
                 boundaryNumbers: true,
                 boundaryLinks: true,
                 directionLinks: true,

package/src/components/compound/DlTable/types.ts

@@ -50,13 +50,9 @@ export type DlTableSortMethod = (
     descending: boolean
 ) => DlTableRow[]
 
-export type DlTablePagination = {
-    page: number
-    rowsPerPage: number
-    rowsNumber?: number
-    sortBy?: string | null
-    descending?: boolean
-}
+import { TablePagination } from './hooks/tablePagination'
+
+export type DlTablePagination = TablePagination
 
 export type DlTableRequestProp = {
     pagination: DlTablePagination

package/src/demos/DlTableDemo.vue

@@ -446,6 +446,7 @@ import {
 } from '../components'
 import { defineComponent, ref, computed, nextTick } from 'vue-demi'
 import { times, cloneDeep, isNumber } from 'lodash'
+import { DlTablePagination } from '../types'
 
 const columns = [
     {
@@ -591,7 +592,7 @@ const rows = [
         calcium: '12%',
         iron: '6%'
     },
-    ...times(100, (index) => ({
+    ...times(1000, (index) => ({
         name: 'KitKat' + index,
         calories: 518,
         fat: 26.0,
@@ -681,11 +682,12 @@ export default defineComponent({
             }
         }
 
-        const pagination = ref({
+        const pagination = ref<DlTablePagination>({
             sortBy: 'desc',
             descending: false,
             page: 2,
-            rowsPerPage: 3
+            rowsPerPage: 3,
+            maxDisplayRange: 9
             // rowsNumber: xx if getting data from a server
         })