vue-laravel-tablewind

Laravel datatable wrapper with Vue JS and Tailwind CSS.

Usage no npm install needed!

<script type="module">
  import vueLaravelTablewind from 'https://cdn.skypack.dev/vue-laravel-tablewind';
</script>

README

vue-laravel-tablewind

Laravel datatable wrapper with Vue JS and Tailwind CSS.

This package required Vue 3 to work, please refer here if you use Vue 2



IMPORTANT !!!

This package is no longer maintain by the owner.

Please visit laravel-vue-datatables for the new package.





Installation

Install using package manager:

npm install vue-laravel-tablewind

Then add it to your component files

<!-- MyComponent.vue -->

<template>
  <LaravelTablewind
    data-uri="https:://mydomain.com/table"
    v-model:columns="columns"
  />
</template>

<script>
import LaravelTablewind from 'vue-laravel-tablewind';
require('vue-laravel-tablewind/dist/vue-laravel-tablewind.css');

export default {
  name: 'MyComponent',
  components: {
    LaravelTablewind,
  },
  ...
}
</script>



Usage

v-model

Name Type Mandatory Description
columns Array Yes 
<template>
  <LaravelTablewind
    data-uri="https:://mydomain.com/table"
    v-model:columns="columns"
  />
</template>

Please refer to columns props for detailed usage and explanation.
checked Array Optional 
<template>
  <LaravelTablewind
    data-uri="https:://mydomain.com/table"
    v-model:columns="columns"
    with-select
    v-model:checked="yourCheckedModel"
    selected-key="isSelected"
  />
</template>

Used for get selected row if you use with-select props.



Props


Table Props

Name Type Mandatory Default Value Description
data-uri String Yes Enter your uri for vue-laravel-tablewind get data from.
query [ String, Array, Object ] Optional

[]

 Add your custom query parameters to add it to data-uri before get data from your server. 
query="foo=bar&hello=world"

:query='[ "foo=bar", "hello=world" ]'

:query='{ "foo": "bar", "hello": "world" }'
title String Optional
caption String Optional

Generate table caption with <caption> tag
table-class [ String, Array, Object ] Optional 
[
  "w-full",
  "table-auto",
  "border-collapse",
]

"font-bold text-blue-400"

[
  "font-bold",
  "text-blue-400"
]

{
  "font-bold": true,
  "text-blue-400": true
}
table-style [ String, Array, Object ] Optional 
"background-color: red"

[
  "background-color: red",
  "color: blue"
]

{
  "backgroundColor": "red",
  "fontWeight": "bold"
}
header-class [ String, Array, Object ] Optional 
[
  "bg-gray-300",
]

"font-bold text-blue-400"

[
  "font-bold",
  "text-blue-400"
]

{
  "font-bold": true,
  "text-blue-400": true
}
header-style [ String, Array, Object ] Optional 
"background-color: red"

[
  "background-color: red",
  "color: blue"
]

{
  "backgroundColor": "red",
  "fontWeight": "bold"
}
hoverable Boolean Optional

true
hover-class [ String, Array, Object ] Optional 
[
  "group-hover:bg-gray-200"
]

"group-hover:font-bold group-hover:text-blue-400"

[
  "group-hover:font-bold",
  "group-hover:text-blue-400"
]

{
  "group-hover:font-bold": true,
  "group-hover:text-blue-400": true
}
loader Boolean Optional

true
no-data-label String Optional

'No records found.'



Checkbox Props

Name Type Mandatory Default Value Description
with-select String Optional

false
selected-key String Optional

'isSelected'

 Make sure this field is inside first level of your object otherwise it will return false
checkbox-class [ String, Array, Object ] Optional 
[
  "rounded-md",
  "w-6",
  "h-6",
]

"font-bold text-blue-400"

[
  "font-bold",
  "text-blue-400"
]

{
  "font-bold": true,
  "text-blue-400": true
}
checkbox-style [ String, Array, Object ] Optional 
"background-color: red"

[
  "background-color: red",
  "color: blue"
]

{
  "backgroundColor": "red",
  "fontWeight": "bold"
}



Grid Props

Name Type Mandatory Default Value Description
grid String Optional

'responsive'

Accept: 'responsive', 'always' or 'never'
grid-container-class [ String, Array, Object ] Optional 
[
  "shadow-lg",
  "p-4",
  "border",
  "border-gray-400",
]

"font-bold text-blue-400"

[
  "font-bold",
  "text-blue-400"
]

{
  "font-bold": true,
  "text-blue-400": true
}
grid-container-style [ String, Array, Object ] Optional 
"background-color: red"

[
  "background-color: red",
  "color: blue"
]

{
  "backgroundColor": "red",
  "fontWeight": "bold"
}
grid-row-count [ Number, String ] Optional

6



Search Field Props

Name Type Mandatory Default Value Description
disable-search Boolean Optional

false
search-label String Optional

'Search...'
search-class [ String, Array, Object ] Optional 
[
  "appearance-none",
  "border",
  "border-transparent",
  "bg-white",
  "text-black",
  "placeholder-gray-400",
  "shadow-md",
  "rounded-lg",
  "text-base",
  "focus:outline-none",
  "focus:ring-2",
  "focus:ring-indigo-400",
  "focus:border-transparent",
]

"font-bold text-blue-400"

[
  "font-bold",
  "text-blue-400"
]

{
  "font-bold": true,
  "text-blue-400": true
}
search-style [ String, Array, Object ] Optional 
"background-color: red"

[
  "background-color: red",
  "color: blue"
]

{
  "backgroundColor": "red",
  "fontWeight": "bold"
}



Refresh Button Props

Name Type Mandatory Default Value Description
disable-refresh-btn Boolean Optional

false
refresh-btn-label String Optional

'Reload'
refresh-btn-class [ String, Array, Object ] Optional 
[
  "focus:outline-none",
  "w-32",
  "py-2",
  "rounded-md",
  "font-semibold",
  "text-white",
  "bg-indigo-500",
  "focus:ring-4",
  "focus:ring-indigo-300",
]

"font-bold text-blue-400"

[
  "font-bold",
  "text-blue-400"
]

{
  "font-bold": true,
  "text-blue-400": true
}
refresh-btn-style [ String, Array, Object ] Optional 
"background-color: red"

[
  "background-color: red",
  "color: blue"
]

{
  "backgroundColor": "red",
  "fontWeight": "bold"
}



Pagination Props

Name Type Mandatory Default Value Description
disable-pagination Boolean Optional

false
disable-pagination-label Boolean Optional

false
disable-navigation Boolean Optional

false
disable-goto-page Boolean Optional

false
goto-page-class [ String, Array, Object ] Optional 
[
  "appearance-none",
  "border",
  "border-transparent",
  "w-full",
  "pr-8",
  "bg-white",
  "text-black",
  "placeholder-gray-400",
  "shadow-md",
  "rounded-lg",
  "text-base",
  "focus:outline-none",
  "focus:ring-2",
  "focus:ring-indigo-400",
  "focus:border-transparent",
]

"font-bold text-blue-400"

[
  "font-bold",
  "text-blue-400"
]

{
  "font-bold": true,
  "text-blue-400": true
}
goto-page-style [ String, Array, Object ] Optional 
"background-color: red"

[
  "background-color: red",
  "color: blue"
]

{
  "backgroundColor": "red",
  "fontWeight": "bold"
}
rows-per-page-label String Optional

'Rows per page:'
rows-per-page [ Number, String ] Optional

10
rows-per-page-class [ String, Array, Object ] Optional 
[
  "appearance-none",
  "border",
  "border-transparent",
  "w-full",
  "pr-8",
  "bg-white",
  "text-black",
  "placeholder-gray-400",
  "shadow-md",
  "rounded-lg",
  "text-base",
  "focus:outline-none",
  "focus:ring-2",
  "focus:ring-indigo-400",
  "focus:border-transparent",
]

"font-bold text-blue-400"

[
  "font-bold",
  "text-blue-400"
]

{
  "font-bold": true,
  "text-blue-400": true
}
rows-per-page-style [ String, Array, Object ] Optional 
"background-color: red"

[
  "background-color: red",
  "color: blue"
]

{
  "backgroundColor": "red",
  "fontWeight": "bold"
}
rows-per-page-options Array Optional

[ 10, 20, 50 ]
disable-goto-first-nav Boolean Optional

false
goto-first-nav-class [ String, Array, Object ] Optional 
[
  "focus:outline-none",
  "w-full",
  "p-3",
  "rounded-md",
  "font-semibold",
  "text-white",
  "bg-indigo-500",
  "focus:ring-4",
  "focus:ring-indigo-300",
]

"font-bold text-blue-400"

[
  "font-bold",
  "text-blue-400"
]

{
  "font-bold": true,
  "text-blue-400": true
}
goto-first-nav-style [ String, Array, Object ] Optional 
"background-color: red"

[
  "background-color: red",
  "color: blue"
]

{
  "backgroundColor": "red",
  "fontWeight": "bold"
}
disable-goto-last-nav Boolean Optional

false
goto-last-nav-class [ String, Array, Object ] Optional 
[
  "focus:outline-none",
  "w-full",
  "p-3",
  "rounded-md",
  "font-semibold",
  "text-white",
  "bg-indigo-500",
  "focus:ring-4",
  "focus:ring-indigo-300",
]

"font-bold text-blue-400"

[
  "font-bold",
  "text-blue-400"
]

{
  "font-bold": true,
  "text-blue-400": true
}
goto-last-nav-style [ String, Array, Object ] Optional 
"background-color: red"

[
  "background-color: red",
  "color: blue"
]

{
  "backgroundColor": "red",
  "fontWeight": "bold"
}
disable-goto-prev-nav Boolean Optional

false
goto-prev-nav-class [ String, Array, Object ] Optional 
[
  "focus:outline-none",
  "w-full",
  "p-3",
  "rounded-md",
  "font-semibold",
  "text-white",
  "bg-indigo-500",
  "focus:ring-4",
  "focus:ring-indigo-300",
]

"font-bold text-blue-400"

[
  "font-bold",
  "text-blue-400"
]

{
  "font-bold": true,
  "text-blue-400": true
}
goto-prev-nav-style [ String, Array, Object ] Optional 
"background-color: red"

[
  "background-color: red",
  "color: blue"
]

{
  "backgroundColor": "red",
  "fontWeight": "bold"
}
disable-goto-next-nav Boolean Optional

false
goto-next-nav-class [ String, Array, Object ] Optional 
[
  "focus:outline-none",
  "w-full",
  "p-3",
  "rounded-md",
  "font-semibold",
  "text-white",
  "bg-indigo-500",
  "focus:ring-4",
  "focus:ring-indigo-300",
]

"font-bold text-blue-400"

[
  "font-bold",
  "text-blue-400"
]

{
  "font-bold": true,
  "text-blue-400": true
}
goto-next-nav-style [ String, Array, Object ] Optional 
"background-color: red"

[
  "background-color: red",
  "color: blue"
]

{
  "backgroundColor": "red",
  "fontWeight": "bold"
}



Columns Props

This props used to render columns and basic formating value, you can modified inside columns

export default {
  ...
  data() {
    return {
      columns: [
        {
          uniqid: 'username',
          label: 'Username',
          field: 'username', // or use (row) => row.user.username
          visible: true,
          sortable: true,
          sortOrder: 'asc',
          align: 'center',
          format: (val, row) => `Username: ${val}`
          headerClass: 'py-4',
          classes: [
            'py-2',
            'font-bold',
            'text-blue-600'
          ],
        },
        {
          uniqid: 'fullName',
          label: 'Full Name',
          field: 'firstName',
          format: (val, row) => `${val} ${row.lastName}`
          headerClass: {
            'py-4': true
          },
        },
        ...
      ]
    }
  }
}

Name Type Mandatory Default Value Description
uniqid String Yes Table header, cell and grid unique identifier.
This props will used for naming slot for each header, cell and grid.
label String Yes Label for header column
field [ String, Function ] Optional 
(row) => row.id

Row Object property to determine value for this column or function which maps to the required property.
You can use

"field": "foo"

// or as function

"field": (row) => row.user.foo
visible Boolean Optional

true

 This props will make column visible or not
sortable String Optional

false

 Make this column sortable and to data query sent to your server
sort-order String Optional

'asc'

Sort column sort order.
Accept: 'asc' or 'desc'
align Boolean Optional

'left'

Horizontal alignment of cells in this column.
Accept: 'left', 'center' or 'right'
format Function Optional 
(val, row) => `${val}`
Function to format your data. Accept two arguments `val` and `row`.
`val` contain value from `row` based on field props.
header-class [ String, Array, Object ] Optional

Class for <th> tag

"font-bold text-blue-400"

[
  "font-bold",
  "text-blue-400"
]

{
  "font-bold": true,
  "text-blue-400": true
}
header-style [ String, Array, Object ] Optional

Style for <th> tag

"background-color: red"

[
  "background-color: red",
  "color: blue"
]

{
  "backgroundColor": "red",
  "fontWeight": "bold"
}
classes [ String, Array, Object ] Optional

Class for <td> tag

"font-bold text-blue-400"

[
  "font-bold",
  "text-blue-400"
]

{
  "font-bold": true,
  "text-blue-400": true
}
styles [ String, Array, Object ] Optional

Style for <td> tag

"background-color: red"

[
  "background-color: red",
  "color: blue"
]

{
  "backgroundColor": "red",
  "fontWeight": "bold"
}



Slots

title

Title of your table

 
<template #title>
  Insert your title here!
</template>
beforeSearch

Used if you want to add content left of search field on tablet and desktop and top of search field on mobile

 
<template #beforeSearch>
  This will render on the left of search field
</template>
iconSearch

Slot for search field icon

 
<template #iconSearch>
  <svg class="w-4 h-4 absolute left-2.5 top-3.5 pointer-events-none" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"/>
  </svg>
</template>
afterSearch

Used if you want to add content right of search field on tablet and desktop and bottom of search field on mobile

 
<template #afterSearch>
  This will render on the right of search field
</template>
beforeButton

Used if you want to add content left of reload button on tablet and desktop and top of reload button on mobile

 
<template #beforeButton>
  This will render on the left of reload button
</template>
labelReloadBtn

Slot to customize label reload button

 
<template #labelReloadBtn>
  <div class="flex flex-row items-center">
    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="current-stroke stroke-2 text-white" viewBox="0 0 16 16">
      <path d="M11.534 7h3.932a.25.25 0 0 1 .192.41l-1.966 2.36a.25.25 0 0 1-.384 0l-1.966-2.36a.25.25 0 0 1 .192-.41zm-11 2h3.932a.25.25 0 0 0 .192-.41L2.692 6.23a.25.25 0 0 0-.384 0L.342 8.59A.25.25 0 0 0 .534 9z"/>
      <path fill-rule="evenodd" d="M8 3c-1.552 0-2.94.707-3.857 1.818a.5.5 0 1 1-.771-.636A6.002 6.002 0 0 1 13.917 7H12.9A5.002 5.002 0 0 0 8 3zM3.1 9a5.002 5.002 0 0 0 8.757 2.182.5.5 0 1 1 .771.636A6.002 6.002 0 0 1 2.083 9H3.1z"/>
    </svg>
    <span>Refresh Data</span>
  </div>
</template>
afterButton

Used if you want to add content right of reload button on tablet and desktop and bottom of reload button on mobile

 
<template #afterButton>
  This will render on the right of reload button
</template>
labelNoRecord

Used to customize text when no data found in table

 
<template #labelNoRecord>
  <p class="font-bold text-lg text-red-600">Oops, sorry we cannot find any matching data.</p>
</template>
loader

Used to customize loader inside table

 
<template #loader>
  <div class="flex flex-row p-4 bg-white items-center shadow-md">
    <svg class="animate-spin -ml-1 mr-3 h-5 w-5 text-black" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
      <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4" />
      <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z" />
    </svg>
    <span class="text-lg">Loading</span>
  </div>
</template>
beforePaginationLabel

Used if you want to add content left of pagination label on tablet and desktop and top of pagination label on mobile

 
<template #beforePaginationLabel>
  This will render on the left of pagination label
</template>
paginationLabel

Used to show count of data in table.

from used to show first data,

to used to show last data, and

total used to show total data

 
<template #paginationLabel="{ from, to, total }">
  <span class="text-bold">Showing {{ from }} - {{ to }} from total {{ total }} data.</span>
</template>
afterPaginationLabel

Used if you want to add content right of pagination label on tablet and desktop and bottom of pagination label on mobile

 
<template #afterPaginationLabel>
  This will render on the right of pagination label
</template>
beforeNavigation

Used if you want to add content left of navigation button on tablet and desktop and top of navigation button on mobile

 
<template #beforeNavigation>
  This will render on the left of navigation bar
</template>
afterNavigation

Used if you want to add content right of navigation button on tablet and desktop and bottom of navigation button on mobile

 
<template #afterNavigation>
  This will render on the right of navigation bar
</template>
labelRowsPerPage

Used to customize text data per page.

 
<template #labelRowsPerPage>
  <span class="text-bold">Data per page:</span>
</template>
iconFirstNavBtn

Used to customize icon inside first page navigation button

 
<template #iconFirstNavBtn>
  <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="stroke-current stroke-2" viewBox="0 0 16 16">
    <path fill-rule="evenodd" d="M11.854 3.646a.5.5 0 0 1 0 .708L8.207 8l3.647 3.646a.5.5 0 0 1-.708.708l-4-4a.5.5 0 0 1 0-.708l4-4a.5.5 0 0 1 .708 0zM4.5 1a.5.5 0 0 0-.5.5v13a.5.5 0 0 0 1 0v-13a.5.5 0 0 0-.5-.5z"/>
  </svg>
</template>
iconPrevNavBtn

Used to customize icon inside previous page navigation button

 
<template #iconPrevNavBtn>
  <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="stroke-current stroke-2" viewBox="0 0 16 16">
    <path fill-rule="evenodd" d="M11.354 1.646a.5.5 0 0 1 0 .708L5.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0z"/>
  </svg>
</template>
iconNextNavBtn

Used to customize icon inside next page navigation button

 
<template #iconNextNavBtn>
  <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="stroke-current stroke-2" viewBox="0 0 16 16">
    <path fill-rule="evenodd" d="M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z"/>
  </svg>
</template>
iconLastNavBtn

Used to customize icon inside last page navigation button

 
<template #iconLastNavBtn>
  <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="stroke-current stroke-2" viewBox="0 0 16 16">
    <path fill-rule="evenodd" d="M4.146 3.646a.5.5 0 0 0 0 .708L7.793 8l-3.647 3.646a.5.5 0 0 0 .708.708l4-4a.5.5 0 0 0 0-.708l-4-4a.5.5 0 0 0-.708 0zM11.5 1a.5.5 0 0 1 .5.5v13a.5.5 0 0 1-1 0v-13a.5.5 0 0 1 .5-.5z"/>
  </svg>
</template>
footer

Footer content of your table

 
<template #footer>
  Insert your footer here!
</template>
iconAscending

Used to customize icon for ascending icon if you used sortable

 
<template #iconAscending>
  <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="current-stroke stroke-2" viewBox="0 0 16 16">
    <path d="M3.5 3.5a.5.5 0 0 0-1 0v8.793l-1.146-1.147a.5.5 0 0 0-.708.708l2 1.999.007.007a.497.497 0 0 0 .7-.006l2-2a.5.5 0 0 0-.707-.708L3.5 12.293V3.5zm4 .5a.5.5 0 0 1 0-1h1a.5.5 0 0 1 0 1h-1zm0 3a.5.5 0 0 1 0-1h3a.5.5 0 0 1 0 1h-3zm0 3a.5.5 0 0 1 0-1h5a.5.5 0 0 1 0 1h-5zM7 12.5a.5.5 0 0 0 .5.5h7a.5.5 0 0 0 0-1h-7a.5.5 0 0 0-.5.5z"/>
  </svg>
</template>
iconDescending

Used to customize icon for descending icon if you used sortable

 
<template #iconDescending>
  <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="current-stroke stroke-2" viewBox="0 0 16 16">
    <path d="M3.5 13.5a.5.5 0 0 1-1 0V4.707L1.354 5.854a.5.5 0 1 1-.708-.708l2-1.999.007-.007a.498.498 0 0 1 .7.006l2 2a.5.5 0 1 1-.707.708L3.5 4.707V13.5zm4-9.5a.5.5 0 0 1 0-1h1a.5.5 0 0 1 0 1h-1zm0 3a.5.5 0 0 1 0-1h3a.5.5 0 0 1 0 1h-3zm0 3a.5.5 0 0 1 0-1h5a.5.5 0 0 1 0 1h-5zM7 12.5a.5.5 0 0 0 .5.5h7a.5.5 0 0 0 0-1h-7a.5.5 0 0 0-.5.5z"/>
  </svg>
</template>
labelCheckboxGridHeader

Used to customize checkbox label inside grid header

 
<template #labelCheckboxGridHeader>
  <span class="text-lg font-bold">
    Selected
  </span>
</template>

Dynamic Slots

cell-header-[uniqid]

Used to customize label in table header for spesific cell identified by uniqid

uniqid is required as identity of cell header it must be unique, type of uniqid is string, uniqid based on passed data from controller

 
<template #cell-header-fullName="{ label }">
  <h1 class="text-blue-400">{{ label }}</h1>
</template>
cell-body-[uniqid]

Used to customize cell value in table cell for spesific cell identified by uniqid

uniqid is required as identity of cell inside table it must be unique, type of uniqid is string, uniqid based on passed data from controller

This slot has 2 arguments:

value is data value has been formated.

row is data object

 
<template #cell-body-fullName="{ value, row }">
  <p class="text-blue-600 leading-5">Formatted Value: {{ value }}</p>
  <p class="text-blue-600 leading-5">Unformatted Value: {{ row.first_name }} {{ row.last_name }}</p>
</template>
grid-header-[uniqid]

Used to customize label for spesific header identified by uniqid

uniqid is required as identity of cell inside table it must be unique, type of uniqid is string, uniqid based on passed data from controller

 
<template #grid-header-fullName="{ label }">
  <h1 class="text-blue-400">{{ label }}</h1>
</template>
grid-body-[uniqid]

Used to customize grid value for spesific row identified by uniqid

uniqid is required as identity of cell inside table it must be unique, type of uniqid is string, uniqid based on passed data from controller

This slot has 2 arguments:

value is data value has been formated.

row is data object

 
<template #grid-body-fullName="{ value, row }">
  <p class="text-blue-600 leading-5">Formatted Value: {{ value }}</p>
  <p class="text-blue-600 leading-5">Unformatted Value: {{ row.first_name }} {{ row.last_name }}</p>
</template>



Sent Request

Example sent request to your server:

[
  "search" => NULL,
  "page" => "1",
  "per_page" => "10",
  "sortOrder" => [
    [
      "column" => "first_name",
      "order" => "asc",
    ],
    [
      "column" => "email",
      "order" => "desc",
    ],
  ],
]

If you add :query='[ "foo=bar", "hello=world" ]' to your query props, it will send

[
  "search" => NULL,
  "page" => "1",
  "per_page" => "10",
  "sortOrder" => [
    [
      "column" => "carlicense",
      "order" => "asc",
    ],
    [
      "column" => "terid",
      "order" => "asc",
    ],
  ],
  "foo" => "bar",
  "hello" => "world",
]



Laravel Response

Expected Response example from your server:

{
    "current_page": 1,
    "data": [
        {
            "id": 1,
            "first_name": "John",
            "last_name": "Doe",
            "email": "john@example.com",
            "phone": "00990025196",
            "created_at": "2021-06-25 08:37:09",
            "updated_at": "2021-06-25 08:37:09",
            "isSelected": true,
            ...
        },
        ...
    ],
    "first_page_url": "http://example.com/table?page=1",
    "from": 1,
    "last_page": 17,
    "last_page_url": "http://example.com/table?page=17",
    "next_page_url": "http://example.com/table?page=2",
    "path": "http://example.com/table",
    "per_page": 10,
    "prev_page_url": null,
    "to": 10,
    "total": 163

}

Notes!!

You may use the withQueryString method if you would like to append all of the current request's query string values to the pagination links.

$users = User::paginate($request->input('per_page'))->withQueryString();



License

MIT