'How to paginate in react using inertia on laravel?

How to paginate in react using inertia on laravel?

pulling the paginated data:

$contacts = Contact::orderBy('name', 'asc')->paginate(10);
return Inertia::render('Contacts/index', [
    'contacts' => $contacts
]);

I know how to render the links in blade ({{ $contacts->links() }}) but is there a way to do it like that on inertia or do I need to make my own component for pagination links?

javascriptphpreactjslaravelinertiajs


Solution 1:[1]

The easiest way is to create your own component with the links (those are still there)

This is an example in vue, but should be easy to port to react:

<template>
    <div>
        <div class="flex flex-wrap -mb-1">
            <template v-for="(link, key) in links" :key="key">
                <div v-if="link.url === null" class="mr-1 mb-1 px-4 py-3 text-sm leading-4 text-gray-400 border rounded"
                    v-html="link.label" />
                <inertia-link v-else
                    class="mr-1 mb-1 px-4 py-3 text-sm leading-4 border rounded hover:bg-white focus:border-indigo-500 focus:text-indigo-500"
                    :class="{ 'bg-blue-700 text-white': link.active }" :href="link.url" v-html="link.label" />
            </template>
        </div>
    </div>
</template>

<script>
    export default {
        props: {
            links: Array
        },
    }
</script>

Solution 2:[2]

You can Try This for better result for react :-

import DataTable from "react-data-table-component";


<DataTable
        style={{ background: "transparent" }}
        title="User"
        columns={columns}
        data={allData}
        defaultSortFieldId={1}
        sortIcon={<ArrowUpwardIcon />}
        pagination
      />

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 John Zwarthoed
Solution 2 Sarfaraz khan

Related Questions