How to custom GridJs pagination with supabase?

Question

I'm software engineer in Cambodia. I want to custom Grid.js pagination with supanase, but I faced a problem. I don't know the solution because it's not in the documentation.

I'm using Nuxt 3

Please tell me how to implement.

The Code is below:

onMounted(() => {
  grid.updateConfig({
    columns: [
      { name: 'Avatar', id: 'avatar' },
      { name: 'name', id: 'name' },
      { name: 'gender', id: 'gender' },
      { name: 'email', id: 'email' },
      { name: 'phone', id: 'phone' },
      { name: 'address', id: 'address' },
    ],
    pagination: {
      enabled: true,
      limit: 5,
      server: {
        url: (prev, page, limit) => `${prev}&limit=${limit}&offset=${page * limit}`
      },
      summary: true,
    },
    server: {
      keepalive: true,
      data: async (opt) => {
        console.log(opt)
        const { data: customers, error, count } = await supabase
            .from('customers')
            .select('id, name, gender, email, phone, address, avatar', { count: 'exact' })
            .is('deleted_at', null)
            .order('created_at', { ascending: false })
        return {
          data: customers.map((customer) => [
            customer.avatar,
            customer.name,
            customer.gender,
            customer.email,
            customer.phone,
            customer.address,
          ]),
          total: count,
        }
      },
    },
    width: '100%',
    search: true,
    pagination: true,
    fixedHeader: true,
    className: {
      td: 'sr-td-class',
      table: 'sr-table',
    },
  })

  grid.render(table.value)
})

score 0 · Answer 1 · answered Aug 30 '22 at 09:18

I found resolve:

GridJs configuration:

onMounted(() => {
  grid.updateConfig({
    columns: [
      { name: 'Avatar', id: 'avatar' },
      { name: 'name', id: 'name' },
      { name: 'gender', id: 'gender' },
      { name: 'email', id: 'email' },
      { name: 'phone', id: 'phone' },
      { name: 'address', id: 'address' },
    ],
    pagination: {
      enabled: true,
      limit: 5,
      server: {
        url: (prev, page, limit) => `${prev}&limit=${limit}&offset=${page * limit}`
      },
      summary: true,
    },
    server: {
      keepalive: true,
      data: async (opt) => {
        console.log(opt)
        const { data: customers, error, count } = await supabase
            .from('customers')
            .select('id, name, gender, email, phone, address, avatar', { count: 'exact' })
            .is('deleted_at', null)
            .order('created_at', { ascending: false })
        return {
          data: customers.map((customer) => [
            customer.avatar,
            customer.name,
            customer.gender,
            customer.email,
            customer.phone,
            customer.address,
          ]),
          total: count,
        }
      },
    },
    width: '100%',
    fixedHeader: true,
    className: {
      td: 'sr-td-class',
      table: 'sr-table',
    },
  })

  grid.render(table.value)
})

Then create server/api directory after create file customers.ts in server/api/ directory

This is code in customers.ts file

import { serverSupabaseUser, serverSupabaseClient } from '#supabase/server'

export default defineEventHandler(async (event) => {
  const user = await serverSupabaseUser(event)
  const client = serverSupabaseClient(event)

  const query = useQuery(event)
  const from = query.page ? parseInt(query.page) * parseInt(query.limit) : 0
  const to = query.page ? from + parseInt(query.limit) : query.limit

  if (!user) {
    throw createError({ statusCode: 401, message: 'Unauthorized' })
  }

  const { data, error, count } = await client
    .from('customers')
    .select('id, name, gender, email, phone, address, avatar', {
      count: 'exact',
    })
    .is('deleted_at', null)
    .order('created_at', { ascending: false })
    .range(from, to)
  return { customers: data, count }
})

How to custom GridJs pagination with supabase?

1 Answers1