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?

CodePudding user response：

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 >
            <template v-for="(link, key) in links" :key="key">
                <div v-if="link.url === null" 
                    v-html="link.label" />
                <inertia-link v-else
                    
                    : :href="link.url" v-html="link.label" />
            </template>
        </div>
    </div>
</template>

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

CodePudding user response：

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
      />