inertia-datagrid

Inertia.js DataGrid

you can use pacakge with vue 3 and custom slots

📝 Code

const props = defineProps({
    users: Array,
});
const columns = [
    {
        name: "id",
        label: "NO",
        field: "id",
        sortable: true,
    },
    {
        name: "name",
        label: "Name",
        field: "name",
        sortable: true,
    },
    {
        name: "email",
        label: "E-MAIL",
        field: "email",
        sortable: true,
    },
    {
        name: "verification",
        label: "Email Verified At",
        field: "email_verified_at",
        sortable: false,
    },
    {
        name: "created_at",
        label: "Created At",
        field: "created_at",
        sortable: true,
    },
    {
        name: "actions",
        label: "Actions",
        type: "action",
    },
];
const actions = [
    { title: "View", route: "admin.users.show", color: "blue" },
    { title: "Edit", route: "admin.users.edit", color: "orange" },
    { title: "Delete", route: "admin.users.destroy", color: "red" },
];

impot DataGrid Component from inertia-datagrid

import DataGrid from "inertia-datagrid";
<DataGrid :columns="columns" :data="users" :actions="actions" baseRoute="admin.users.index">
        
</DataGrid>

using custom column with slot

<datagrid :columns="columns" :data="users" :actions="actions" baseRoute="admin.users.index">
            <template v-slot:row-cell-email_verified_at="{ item }">
                <div class="py-2">
                    <span v-if="!item" class="text-xs bg-red-100 text-red-500 rounded-lg p-1">Verified</span>
                    <span v-else class="text-xs bg-green-100 text-green-500 rounded-lg p-1">Not Verified</span>
                </div>
            </template>

</datagrid>