inertia-datagrid

1.0.4 • Public • Published

Inertia.js DataGrid

Latest Version on NPM npm Software License


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>

Package Sidebar

Install

npm i inertia-datagrid

Weekly Downloads

2

Version

1.0.4

License

MIT

Unpacked Size

13.1 kB

Total Files

4

Last publish

Collaborators

  • ainalavi
  • hmdana