Add an example for Pagination

[chsanch]

I've started using this library to implement a Table that fetches data from a Supabase API, so far I've implemented a very basic table, I've added TailwindCSS and I'm using ember-resources of handle remote data, what I don't really get (at least not from the documentation) is how to implement Pagination. It would be really useful to see a simple example on how to get started, I know there is the API doc for the Interface but maybe a simple example would be better for newcomers to easily implement it (as the other examples already provided).

[NullVoxPopuli]

the Pagination type is actually a legacy thing 😅 https://github.com/search?q=repo%3ACrowdStrike%2Fember-headless-table%20Pagination&type=code <- no usages

it should probably be removed, tbh.

Pagination is a UI + Data-management concern, which is outside the socpe of ember-headless-table (you manage all data and presentation concerns).

So, getting to your question though: how would you do pagination?

<YourDataProvider as |api|>

  <table>
    ... headless table usage here
    <tbody>
      {{#each api.data}}

      {{/each}}
    </tbody>
  </table>

  Your Pagination component
  <Pagination @next={{api.nextPage}} @goToPage={{api.goToPage}} />
</YourDataProvider>

example of YourDataProvider

class extends Component {
  @tracked page = 0;

  @use data = keepLatest({
    when: () => this.request.isLoading,
    value: () => this.request.value ?? [],
  });
  @use request = RemoteData(() => `/api/some-endpoint?page=${this.page})`;

  nextPage = () => this.page++;
  goToPage = (num) => this.page = num;
}

{{yield (hash 
  data=this.data.value 
  nextPage=this.nextPage 
  goToPage=this.goToPage 
)}}

or in gjs

(idk if this is a good idea yet) idk if this'll work either -- just tossing it out there. I should probably make it work tho 🤔

const YourDataProvider = resource(() => {
  let page = cell(0);
  
  let request = use(RemoteData(() => `/api/some-endpoint?page=${page.current}`));
  let data = use(keepLatest({ value: () => request.value, when: () => request.isLoading }));

  return {
    get data() { return data.value },
    nextPage: () => page.current++,
    goToPage: (num) => page.set(num),
  };
});

<template>
  {{#let (YouDataProvider) as |api|}}

  ...

  Your Pagination component
  <Pagination @next={{api.nextPage}} @goToPage={{api.goToPage}} />

</template>

🤷

I 100% agree that a pagination example should be present on the docs site though!

A PR would be greatly welcome <3

[chsanch]

Thanks for the clarification, I will see how I can implement this on my own with your explanation, and I will try to get a working example to see if can be useful as an example on the docs.