laravel-vue-datatables

v1.0.4

Published

2 years ago

Laravel datatable wrapper with Vue JS and Tailwind CSS.

Downloads

0High
0Medium
0Low

razztyfication

vue vuejs laravel table datatable tailwind tailwindcss

Laravel datatable wrapper with Vue JS and Tailwind CSS.

Example

DEMO on codesandbox

Installation

Install using package manager:

npm install laravel-vue-datatables

Then add it to your component files

<!-- MyComponent.vue -->

<template>
  <laravel-vue-datatables
    route="https:://mydomain.com/table"
    v-model:columns="columns"
  />
  
  <!-- for Vue 2 component

  <laravel-vue-datatables
    route="https:://mydomain.com/table"
    :columns.sync="columns"
  />

  -->
</template>

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

export default {
  name: 'MyComponent',
  components: {
    LaravelVueDatatables,
  },
  data() {
    return {
      columns: [
        {
          uniqid: 'firstName',
          label: 'Full Name',
          field: 'first_name',
          visible: true,
          sortable: true,
          sortOrder: 'asc',
          align: 'center',
          format: (val, row) => `${val} ${row.last_name}`,
          classes: 'py-2 font-bold text-blue-600',
          headerClass: 'py-4',
        },
        ...
      ]
    }
  }
  ...
}
</script>

Usage

v-model

<template>
  <laravel-vue-datatables
    route="https:://mydomain.com/table"
    v-model:columns="columns"
  />

  <!-- for Vue 2 component

  <laravel-vue-datatables
    route="https:://mydomain.com/table"
    :columns.sync="columns"
  />
  
  -->
</template>

Please refer to columns props for detailed usage and explanation.

<template>
  <laravel-vue-datatables
    route="https:://mydomain.com/table"
    v-model:columns="columns"
    with-select
    v-model:checked="yourCheckedModel"
    selected-key="isSelected"
  />

  <!-- for Vue 2 component

  <laravel-vue-datatables
    route="https:://mydomain.com/table"
    :columns.sync="columns"
    with-select
    :checked.sync="yourCheckedModel"
    selected-key="isSelected"
  />
  
  -->
</template>

Your v-model to get selected row if you use with-select props.

<template>
  <laravel-vue-datatables
    route="https:://mydomain.com/table"
    v-model:columns="columns"
    v-model:loading="yourLoadingModel"
  />

  <!-- for Vue 2 component

  <laravel-vue-datatables
    route="https:://mydomain.com/table"
    :columns.sync="columns"
    :loading.sync="yourLoadingModel"
  />
  
  -->
</template>

Get loading state from datatable

Props

Table Props

[]

Example as string:

query="foo=bar&hello=world"

Example as array:

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

Example as object:

:query='{ "foo": "bar", "hello": "world" }'

Generate table title.

Note: This props will be rendered above search field, if you want to add above the table use after.data-table slot.

Generate table caption with <caption> tag

[
  "w-full",
  "table-auto",
  "border-collapse",
]

Example as string:

"font-bold text-blue-400"

Example as array:

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

Example as object:

{
  "font-bold": true,
  "text-blue-400": true
}

Example as string:

"background-color: red"

Example as array:

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

Example as object:

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

[
  "bg-gray-300",
]

Example as string:

"font-bold text-blue-400"

Example as array:

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

Example as object:

{
  "font-bold": true,
  "text-blue-400": true
}

Example as string:

"background-color: red"

Example as array:

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

Example as object:

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

true

[
  "group-hover:bg-gray-200"
]

Example as String

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

Example as Array

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

Example as Object

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

Note: If you use tailwind css please use group-hover state

false

Accept 'block', 'bar', 'dual'

'block' will show loading message top of datatable

'bar' will show loading bar on top of datatable

'dual' will show loading bar and loading message on top of datatable

[
  "bg-blue-400",
]

Example as String:

"bg-red-400"

Example as Array:

[
  "bg-red-400",
]

Example as Object:

{
  "bg-red-400": true
}

Example as String:

"background-color: red"

Example as Array:

[
  "background-color: red"
]

Example as Object:

{
  "backgroundColor": "red"
}

false

'No records found.'

'No records matching your criteria'

Checkbox Props

false

'isSelected'

Note: Make sure this field is inside first level of your object otherwise it will return false.

[
  "rounded-md",
  "w-6",
  "h-6",
]

Example as String:

"font-bold text-blue-400"

Example as Array:

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

Example as Object:

{
  "font-bold": true,
  "text-blue-400": true
}

Example as String:

"background-color: red"

Example as Array:

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

Example as Object:

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

Grid Props

'responsive'

Accepted value: 'responsive', 'always' or 'never'

responsive: Only show grid on tablet or lower

always: Always show grid instead of table

never: Always show table on all device

[
  "shadow-lg",
  "p-4",
  "border",
  "border-gray-400",
]

Example as String:

"font-bold text-blue-400"

Example as Array:

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

Example as Object:

{
  "font-bold": true,
  "text-blue-400": true
}

Example as String:

"background-color: red"

Example as Array:

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

Example as Object:

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

6

Search Field Props

false

'Search...'

[
  "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",
]

Example as String:

"font-bold text-blue-400"

Example as Array:

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

Example as Object:

{
  "font-bold": true,
  "text-blue-400": true
}

Example as String:

"background-color: red"

Example as Array:

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

Example as Object:

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

Reload Button Props

false

'Reload'

[
  "focus:outline-none",
  "w-32",
  "py-2",
  "rounded-md",
  "font-semibold",
  "text-white",
  "bg-indigo-500",
  "focus:ring-4",
  "focus:ring-indigo-300",
]

Example as String:

"font-bold text-blue-400"

Example as Array:

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

Example as Object:

{
  "font-bold": true,
  "text-blue-400": true
}

Example as String:

"background-color: red"

Example as Array:

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

Example as Object:

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

Reverse Props

true

Pagination Props

false

[
  "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",
]

Example as String:

"font-bold text-blue-400"

Example as Array:

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

Example as Object:

{
  "font-bold": true,
  "text-blue-400": true
}

Example as String:

"background-color: red"

Example as Array:

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

Example as Object:

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

'Rows per page:'

10

false

[
  "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",
]

Example as String:

"font-bold text-blue-400"

Example as Array:

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

Example as Object:

{
  "font-bold": true,
  "text-blue-400": true
}

Example as String:

"background-color: red"

Example as Array:

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

Example as Object:

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

[ 10, 20, 50 ]

false

[
  "focus:outline-none",
  "w-full",
  "p-3",
  "rounded-md",
  "font-semibold",
  "text-white",
  "bg-indigo-500",
  "focus:ring-4",
  "focus:ring-indigo-300",
]

Example as String:

"font-bold text-blue-400"

Example as Array:

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

Example as Object:

{
  "font-bold": true,
  "text-blue-400": true
}

Example as String:

"background-color: red"

Example as Array:

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

Example as Object:

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

false

[
  "focus:outline-none",
  "w-full",
  "p-3",
  "rounded-md",
  "font-semibold",
  "text-white",
  "bg-indigo-500",
  "focus:ring-4",
  "focus:ring-indigo-300",
]

Example as String:

"font-bold text-blue-400"

Example as Array:

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

Example as Object:

{
  "font-bold": true,
  "text-blue-400": true
}

Example as String:

"background-color: red"

Example as Array:

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

Example as Object:

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

false

[
  "focus:outline-none",
  "w-full",
  "p-3",
  "rounded-md",
  "font-semibold",
  "text-white",
  "bg-indigo-500",
  "focus:ring-4",
  "focus:ring-indigo-300",
]

Example as String:

"font-bold text-blue-400"

Example as Array:

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

Example as Object:

{
  "font-bold": true,
  "text-blue-400": true
}

Example as String:

"background-color: red"

Example as Array:

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

Example as Object:

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

false

[
  "focus:outline-none",
  "w-full",
  "p-3",
  "rounded-md",
  "font-semibold",
  "text-white",
  "bg-indigo-500",
  "focus:ring-4",
  "focus:ring-indigo-300",
]

Example as String:

"font-bold text-blue-400"

Example as Array:

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

Example as Object:

{
  "font-bold": true,
  "text-blue-400": true
}

Example as String:

"background-color: red"

Example as Array:

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

Example as Object:

{
  "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
          },
        },
        ...
      ]
    }
  }
}

(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

true

false

'asc'

Sort column sort order.Accept: 'asc' or 'desc'

'left'

Horizontal alignment of cells in this column.Accept: 'left', 'center' or 'right'

(val, row) => `${val}`

Class for <th> tag

Example as String:

"font-bold text-blue-400"

Example as Array:

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

Example as Object:

{
  "font-bold": true,
  "text-blue-400": true
}

Style for <th> tag

Example as String:

"background-color: red"

Example as Array:

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

Example as Object:

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

Class for <td> tag

Example as String:

"font-bold text-blue-400"

Example as Array:

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

Example as Object:

{
  "font-bold": true,
  "text-blue-400": true
}

Style for <td> tag

Example as String:

"background-color: red"

Example as Array:

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

Example as Object:

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

Slots

#title

Title of your table

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

#before.data-table

Used to add content before the table

<template #before.data-table>
  <span>Text Before Table</span>
</template>

#after.data-table

Used to add content after the table

<template #after.data-table>
  <span>Text After Table</span>
</template>

#before.search

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

<template #before.search>
  This will render on the left of search field
</template>

#icon.search

Slot for search field icon

<template #icon.search>
  <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>

#after.search

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

<template #after.search>
  This will render on the right of search field
</template>

#before.reload-button

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

<template #before.reload-button>
  This will render on the left of reload button
</template>

#label.reload-button

Slot to customize label reload button

<template #label.reload-button>
  <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>

#after.reload-button

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

<template #after.reload-button>
  This will render on the right of reload button
</template>

#label.no-record

Used to customize text when no data found in table

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

#label.no-result

Used to render no result label

<template #label.no-result>
  <span>labelNoResult</span>
</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>

#before.pagination-label

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

<template #before.pagination-label>
  This will render on the left of pagination label
</template>

#label.pagination

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 #label.pagination="{ from, to, total }">
  <span class="text-bold">Showing {{ from }} - {{ to }} from total {{ total }} data.</span>
</template>

#after.pagination-label

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

<template #after.pagination-label>
  This will render on the right of pagination label
</template>

#before.navigation

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

<template #before.navigation>
  This will render on the left of navigation bar
</template>

#after.navigation

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

<template #	after.navigation>
  This will render on the right of navigation bar
</template>

#label.rows-per-page

Used to customize text data per page.

<template #label.rows-per-page>
  <span class="text-bold">Data per page:</span>
</template>

#icon.navigation.first-page-button

Used to customize icon inside first page navigation button

<template #icon.navigation.first-page-button>
  <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>

#icon.navigation.previous-page-button

Used to customize icon inside previous page navigation button

<template #icon.navigation.previous-page-button>
  <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>

#icon.navigation.next-page-button

Used to customize icon inside next page navigation button

<template #icon.navigation.next-page-button>
  <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>

#icon.navigation.last-page-button

Used to customize icon inside last page navigation button

<template #icon.navigation.last-page-button>
  <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>

#icon.ascending

Used to customize icon for ascending icon if you used sortable

<template #icon.ascending>
  <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>

#icon.descending

Used to customize icon for descending icon if you used sortable

<template #icon.descending>
  <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>

#table.row.prepend

Used to prepend data in each rows of table

<template #table.row.prepend>
  <tr>
    <td>No</td>
    <td>Name</td>
    <td>Phone Number</td>
    <td>Address</td>
  </tr>
</template>

#table.row.append

Used to append data in each rows of table

<template #table.row.append>
  <tr>
    <td>No</td>
    <td>Name</td>
    <td>Phone Number</td>
    <td>Address</td>
  </tr>
</template>

#table.row.skeleton

Used to render skeleton loader per rows of table

<template #table.row.skeleton>
  <div class="mx-auto animate-pulse h-6 w-6 bg-blue-400 rounded" />
</template>

#table.cell.skeleton.checkbox

Used to render skeleton loader checkbox in cell of table

<template #table.cell.skeleton.checkbox>
  <div class="mx-auto animate-pulse h-6 w-6 bg-blue-400 rounded" />
</template>

#grid.content.header.checkbox

Used to customize checkbox label inside grid header

<template #grid.content.header.checkbox>
  <span class="text-lg font-bold">
    Selected
  </span>
</template>

#grid.prepend

Used to prepend content in grid view

<template #grid.prepend">
  <div class="flex flex-col space-y-2">
      Prepend Text
  </div>
</template>

<template #grid.prepend="{ item }">
  <div class="flex flex-col space-y-2">
    <span class="text-lg font-bold">
      Prepend List
    </span>
    <span class="text-lg font-bold">
    {{ item.carlicense }}
    </span>
  </div>
</template>

#grid.append

Used to append content in grid view

<template #grid.append">
  <div class="flex flex-col space-y-2">
      Append Data
  </div>
</template>

<template #grid.append="{ item }">
  <div class="flex flex-col space-y-2">
    <span class="text-lg font-bold">
      Append List
    </span>
    <span class="text-lg font-bold">
    {{ item.carlicense }}
    </span>
  </div>
</template>

#grid.skeleton.container

Used to render skeleton loader at container grid view

<template #grid.skeleton.container>
  <div class="mx-auto animate-pulse h-6 w-6 bg-blue-400 rounded" />
</template>

#grid.skeleton.body.checkbox

Used to render skeleton loader at checkbox grid view

<template #grid.skeleton.body.checkbox>
  <div class="mx-auto animate-pulse h-6 w-6 bg-blue-400 rounded" />
</template>

Dynamic Slots

#table.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 #table.cell.header.fullName="{ label }">
  <h1 class="text-blue-400">{{ label }}</h1>
</template>

#table.cell.content.checkbox

Used to customize checkbox for checkbox column.

This slot has 1 arguments:

row is data object

<template #table.cell.content.checkbox="{ row }">
  <input type="checkbox" v-model="row.isSelected" class="form-tick appearance-none h-6 w-6 border border-gray-300 rounded-md checked:bg-blue-600 checked:border-transparent focus:outline-none">
</template>

#table.cell.content.[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 #table.cell.content.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.content.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.content.header.fullName="{ label }">
  <h1 class="text-blue-400">{{ label }}</h1>
</template>

#grid.content.body.checkbox

Used to customize checkbox for checkbox line.

This slot has 1 arguments:

row is data object

<template #grid.content.body.checkbox="{ row }">
  <input type="checkbox" v-model="row.isSelected" class="form-tick appearance-none h-6 w-6 border border-gray-300 rounded-md checked:bg-blue-600 checked:border-transparent focus:outline-none">
</template>

#grid.content.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.content.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>

#table.cell.skeleton.[col.uniqid]

Used to render skeleton loader for spesific column identified by col.uniqid

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

<template #table.cell.skeleton.carlicense="{ column }">
  <span>{{ column.label }}</span>
</template>

#grid.skeleton.body.[col.uniqid]

Used to render skeleton loader for spesific grid column identified by col.uniqid

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

<template #grid.skeleton.body.carlicense="{ column }">
  <span>{{ column.label }}</span>
</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": "[email protected]",
            "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

Published

Vulnerabilities

Links

Maintainers

Keywords

Readme

Installation

Usage

v-model

Props

Table Props

Checkbox Props

Grid Props

Search Field Props

Reload Button Props

Reverse Props

Pagination Props

Columns Props

Slots

Dynamic Slots

Sent Request

Laravel Response

License