diff --git a/nuxt4-app/app/pages/explorer.vue b/nuxt4-app/app/pages/explorer.vue index 202b8e4..06dd4d4 100644 --- a/nuxt4-app/app/pages/explorer.vue +++ b/nuxt4-app/app/pages/explorer.vue @@ -34,6 +34,15 @@ /> + + + + +
- {{ tableData.length }} registros + {{ tableData.length }} registros cargados{{ hasMoreData ? ` (limitado a ${selectedLimit})` : '' }}
@@ -129,15 +138,24 @@ - -
- {{ filteredData.length }} de {{ tableData.length }} filas mostradas. + +
+
+ Mostrando {{ startRow }} a {{ endRow }} de {{ filteredData.length }} filas{{ filteredData.length !== tableData.length ? ` (filtradas de ${tableData.length} totales)` : '' }} +
+
@@ -177,12 +195,15 @@ const router = useRouter() // State const selectedDatabase = ref(null) const selectedTable = ref(null) +const selectedLimit = ref(100) const loadingDatabases = ref(false) const loadingTables = ref(false) const loadingData = ref(false) const error = ref(null) const searchQuery = ref('') const showColumnSelector = ref(false) +const page = ref(1) +const rowsPerPage = ref(50) const databases = ref([]) const tables = ref([]) @@ -192,6 +213,12 @@ const visibleColumns = ref([]) // Track if we should auto-load data from URL params const shouldAutoLoad = ref(false) +// Limit options +const limitOptions = [10, 50, 100, 500, 1000, 5000, 10000] + +// Track if there might be more data +const hasMoreData = computed(() => tableData.value.length >= selectedLimit.value) + // Computed const databaseOptions = computed(() => { return databases.value.map(db => db.name) @@ -249,6 +276,24 @@ const filteredData = computed(() => { }) }) +// Paginated data +const paginatedData = computed(() => { + const start = (page.value - 1) * rowsPerPage.value + const end = start + rowsPerPage.value + return filteredData.value.slice(start, end) +}) + +// Pagination helpers +const startRow = computed(() => { + if (filteredData.value.length === 0) return 0 + return (page.value - 1) * rowsPerPage.value + 1 +}) + +const endRow = computed(() => { + const end = page.value * rowsPerPage.value + return Math.min(end, filteredData.value.length) +}) + // Methods async function loadDatabases() { loadingDatabases.value = true @@ -339,7 +384,7 @@ async function loadTableData() { databaseId: selectedDatabaseId.value, tableId: selectedTableId.value, query: { - limit: 1000 // Limitar a 1000 registros por defecto + limit: selectedLimit.value } } }) @@ -408,6 +453,16 @@ watch(selectedTable, (newTable) => { } }) +// Reset page when search changes +watch(searchQuery, () => { + page.value = 1 +}) + +// Reset page when data loads +watch(tableData, () => { + page.value = 1 +}) + // Lifecycle onMounted(() => { loadDatabases()