First things first, let's get the Supabase client installed in your project. This is super important for querying your database.

npm install @supabase/supabase-js

Now, let's create a Supabase client instance using your Supabase URL and public API key.

import { createClient } from '@supabase/supabase-js';

const supabaseUrl = 'https://xyzcompany.supabase.co';
const supabaseKey = 'public-anon-key';
const supabase = createClient(supabaseUrl, supabaseKey);

Alright, let's define some variables for limit and page number to control pagination.

const limit = 10; // number of items per page
let page = 1; // start from the first page

Now, we'll use the range method to specify the range of items for the current page. The start index is (page - 1) * limit and the end index is page * limit - 1.

async function fetchPaginatedData(page) {
  const start = (page - 1) * limit;
  const end = page * limit - 1;

  const { data, error } = await supabase
    .from('your_table_name')
    .select('*')
    .range(start, end);

  if (error) {
    console.error('Error fetching data:', error);
    return;
  }

  console.log('Paginated data:', data);
  return data;
}

fetchPaginatedData(page);

Let's add some logic to handle pagination state, like next and previous buttons.

document.getElementById('next').addEventListener('click', () => {
  page++;
  fetchPaginatedData(page);
});

document.getElementById('prev').addEventListener('click', () => {
  if (page > 1) {
    page--;
    fetchPaginatedData(page);
  }
});

Finally, let's render the paginated data to the user interface.

function renderData(data) {
  const container = document.getElementById('data-container');
  container.innerHTML = ''; // clear previous data

  data.forEach(item => {
    const div = document.createElement('div');
    div.textContent = JSON.stringify(item);
    container.appendChild(div);
  });
}

// Call renderData within fetchPaginatedData
async function fetchPaginatedData(page) {
  const start = (page - 1) * limit;
  const end = page * limit - 1;

  const { data, error } = await supabase
    .from('your_table_name')
    .select('*')
    .range(start, end);

  if (error) {
    console.error('Error fetching data:', error);
    return;
  }

  console.log('Paginated data:', data);
  renderData(data);
}

This guide gives you a complete flow from setting up the Supabase client to fetching and displaying paginated data in a web application. Feel free to tweak the steps based on your specific needs or any extra features you want to add.