@aipng/vuetify-datagrid v1.0.4

aipng/datagrid

Opiniated and extended version of Vuetify's datagrid component for Vue 3.

Provides sorting, pagination, row selection and row expansion.

This component builds upon Vuetify's foundation while adding more functionality and customization options.

Installation

npm install aipng/datagrid

Datagrid

Usage

<template>
  <TheDatagrid
    :headers="headers"
    :result="result"
    :cursor="cursor"
    :sort-by="sortBy"
    @onCursorChange="handleCursorChange"
    @onSortChange="handleSortChange"
  >
    <!-- Optional slots for custom column rendering -->
    <template #col-name="{ item }">
      {{ item.name }}
    </template>
  </TheDatagrid>
</template>

<script setup lang="ts">
import { TheDatagrid } from 'aipng/datagrid'
import type { DatagridColumnHeader, CursorPosition, SortItem } from 'aipng/datagrid'

const headers: DatagridColumnHeader[] = [
  {
    key: 'id',
    title: '#',
    align: 'center',
    sortable: false,
  },
  {
    key: 'name',
    title: 'Name',
    sortable: true,
  },
]

const result = {
  itemsTotal: 100,
  items: [
    { id: 1, name: 'Item 1' },
    { id: 2, name: 'Item 2' },
  ],
}

const cursor: CursorPosition = {
  page: 1,
  pageSize: 10,
}

const sortBy: SortItem = {
  sort: 'id',
  order: 'desc',
}

const handleCursorChange = (newCursor: CursorPosition) => {
  // Handle page change
}

const handleSortChange = (newSort: SortItem) => {
  // Handle sort change
}
</script>

Props

Events

Slots

Pagination

The datagrid includes a built-in pagination component that appears when the total number of items exceeds 5. The pagination component is displayed both at the top and bottom of the table for better user experience.

The pagination component accepts the following props:

And emits the following events:

Types

DatagridColumnHeader

type DatagridColumnHeader = {
  key: string
  title: string
  align?: 'start' | 'center' | 'end'
  sortable?: boolean
  type?: 'text' | 'number' | 'boolean' | 'date' | 'url' | 'array' | 'email'
  value?: (item: unknown) => string | null
}

CursorPosition

type CursorPosition = {
  page: number
  pageSize: number
}

SortItem

type SortItem = {
  sort: string
  order: 'asc' | 'desc'
}