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