Laravel + PrimeVue

useLazyDataTable ​

About ​

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

TIP

Make sure to always include the lazy prop in the <DataTable /> component implementation, 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 ​