Laravel DataGrid 1.0
I am happy to announce that my Laravel DataGrid package has made it to the version 1.0 🎉.
This package was created with intention to make an easy to use Grid system for Laravel. The first versions (0.x) of the package used only Grid.js (which is a great, framework agnostic fronted grid package) frontend, and implemented a Laravel backend - server integration for it.
This simple DataGrid worked well (and still works) for couple of my projects. We recently started a new project where it was necessary to add more features to the frontend of the DataGrid. As the fronted of the new application is using Vue3, I decided to write my own frontend in Vue3. That is how DataGrid 1.0 was born. It still supports Grid.js (with some improvements and removed obsolete dependencies) but the Vue3 frontend comes with a few new features, including:
- Mass actions
- Customising the search
Please check out the demo application here, and the source code for a more details about how to implement these customisations on GitHub.
Look and feel
Both frontend options come with a neutral gray-ish theme.
Vue 3 frontend
Grid.js frontend
Frontend customisations
Using Datagrid Vue3
Datagrid's own vue 3 frontend offers extended functionality compared to grid.js, for example mass actions, filters and row action customisations.
Mass actions
Mass actions is a method to run specific action on multiple records. For example delete multiple records at once.
When using mass actions I suggest using datagrid in a wrapper component. Mass actions can be defined using the mass-actions prop in an array [{'action' : 'massDelete', 'label': 'Delete'}]
Datagrid will fire an event when the user selects rows and runs an action on them. The name of the event is what you defined in the action property, in this case massDelete. Handle the event on the usual way, the handler gets the array of selectedIds as an argument:
@massDelete="(selectedIds) => alert('Simulating mass delete on id(s): ' + selectedIds.join(','))"
Please find the code of the complete component below.
<script setup>
import DataGrid from './../vendor/laravel-datagrid/datagrid/Components/DataGrid.vue'
const props = defineProps({
columns: Array,
rows: Object,
});
const alert = (text) => {
window.alert(text);
}
</script>
<template>
<data-grid
:columns="props.columns"
:rows="props.rows"
:mass-actions="[{'action' : 'massDelete', 'label': 'Delete'}]"
@massDelete="(selectedIds) => alert('Simulating mass delete on id(s): ' + selectedIds.join(','))"
></data-grid>
</template>
Customising the row actions
DataGrid by default adds 2 row action to all rows: edit and delete. You can easily customise these actions using the actions slot:
<data-grid
:columns="props.columns"
:rows="props.rows">
<template #actions="{row, key}">
<div class="flex flex-wrap justify-around">
<a :href="'/'+row[key]+'/edit'"
class="font-medium text-blue-600 dark:text-blue-500 hover:underline mr-3">
<EditIcon class="fill-blue-600" :title="'Edit'"></EditIcon>
</a>
<a :href="'/'+row[key]+'/show'"
class="font-medium text-blue-600 dark:text-blue-500 hover:underline mr-3">
Show
</a>
<a :href="'/'+row[key]+'/export'"
class="font-medium text-blue-600 dark:text-blue-500 hover:underline mr-3">
Export
</a>
</div>
</template>
</data-grid>
Customising the search
If you'd like to make a more detailed search function instead of the default search input field, use the filters slot.
<data-grid
:columns="dataColumns"
:rows="dataRows"
>
<template #filters>
<form class="p-3 mb-6 rounded bg-gray-50" @submit.prevent="filter">
<div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
<div class="mx-1">
<InputLabel>Name</InputLabel>
<TextInput
id="name"
v-model="filters.name"
type="text"
class="block w-full mt-1"
/>
</div>
<div class="mx-1">
<InputLabel>Code</InputLabel>
<TextInput
id="name"
v-model="filters.code"
type="text"
class="block w-full mt-1"
/>
</div>
</div>
<div class="mt-5 mb-2 ml-1 flex">
<PrimaryButton>
Search
</PrimaryButton>
<SecondaryButton class="mx-3" @click="reset">
Reset
</SecondaryButton>
</div>
</form>
</template>
</data-grid>
Add your custom logic on the frontend for collecting the data and submitting to the search endpoint, using the ServerConfig class, for example:
<script setup>
import {ref} from "vue";
import {ServerConfig} from "../vendor/laravel-datagrid/datagrid/ServerConfig";
const dataColumns = ref(props.columns);
const dataRows = ref(props.rows);
const customFilteringEnabled = ref(false);
const filters = ref({
name: '',
code: ''
});
const server = new ServerConfig();
const filter = () => {
const params = server.params();
params.delete('search');
params.delete('page');
params.delete('limit');
params.set('filters[name]', filters.value.name);
params.set('filters[code]', filters.value.code)
server.get(params).then((data) => {
dataRows.value = data;
});
};
const reset = () => {
filters.value = {
name: '',
code: ''
};
const params = server.params();
params.delete('filters[name]');
params.delete('filters[code]');
params.delete('page');
params.delete('limit');
server.get(params).then((data) => {
dataRows.value = data;
});
}
</script>
On the backend override the search method of the base DataGrid class, to implement the custom filtering.
public function search(?string $search): DataGrid
{
parent::search($search);
$filters = collect(request()->get('filters'));
$name = $filters->get('name');
$code = $filters->get('code');
$this->dataSource->query->when($name, fn ($query) => $query->where('name', 'like', '%'.$name.'%'));
$this->dataSource->query->when($code, fn ($query) => $query->where('code', 'like', $code.'%'));
return $this;
}
For the complete guide how to use the Laravel DataGrid, check out the documentation. If you use the package I appreciate any feedback, suggestion or bug report on the github repository issues.