Laravel + PrimeVue

usePaginatedDataTable ​

About ​

usePaginatedDataTable extends the usePaginatedData composable to integrate with PrimeVue's paginated <DataTable /> component, using event-driven filtering & sorting callbacks instead of reactive watchers.

TIP

Depending on your use case (whether or not your data is coming from deferred props) be sure to include the lazy prop in the <DataTable /> component, to avoid recursive update errors.

Parameters ​

  • propDataToFetch: string | string[] - The Inertia prop key(s) to request when fetching data, specified in the controller.
  • initialFilters: PrimeVueDataFilters (optional, default: {}) - Initial filtering definitions per field.
  • initialRows: number (optional, default: 20) - The default/initial number of rows per page.

Returned State & Functions ​

  • Inherited from usePaginatedData:

    • processing: Ref<boolean>
    • filters: Ref<PrimeVueDataFilters>
    • sorting: Ref<SortState>
    • pagination: Ref<PaginationState>
    • firstDatasetIndex: ComputedRef<number>
    • filteredOrSorted: ComputedRef<boolean>
    • debounceInputFilter: (fn: () => void) => void
    • scrollToTop: () => void
    • fetchData(options: InertiaRouterFetchCallbacks = {}): Promise<Page<PageProps>>
    • paginate(event: PageState | DataTablePageEvent): Promise<Page<PageProps>>
    • hardReset(options: InertiaRouterFetchCallbacks = {}): Promise<Page<PageProps>>

  • filter(event: DataTableFilterEvent): void - Applies filters from the DataTable event & fetches.

  • sort(event: DataTableSortEvent): void - Applies sorting from the DataTable event & fetches.

  • reset(options: InertiaRouterFetchCallbacks = {}): Promise<Page<PageProps>> - Resets filters, sorting & pagination to initial values, then fetches.

Reference ​