@sukritt/datagrid-vue

DataGrid component สำหรับ Vue 3 — port จาก @sukritt/datagrid (React version)

Features

• Virtual scroll — รองรับข้อมูลหลายหมื่นแถว
• Sort — คลิก header เพื่อเรียง asc/desc
• Filter — text, number, date, select (dropdown) per column + global search
• Group By — drag header ไปที่ groupby bar, รองรับหลาย level
• Aggregation — sum, avg, count, min, max per group
• Pagination — พร้อม page size selector
• Column resize — ลากขอบ header ปรับความกว้าง
• Column reorder — drag & drop สลับ column
• Column visibility — เปิด/ปิด column ผ่าน sidebar
• Freeze column — right-click header → Freeze Column
• Row selection — single / multiple
• Cell editing — double-click เพื่อแก้ไข
• Export CSV / Excel
• Loading overlay
• TypeScript generic TData

Installation

npm install @sukritt/datagrid-vue

Usage

<script setup lang="ts">
import { DataGrid } from '@sukritt/datagrid-vue'
import '@sukritt/datagrid-vue/style.css'
import type { ColumnDef } from '@sukritt/datagrid-vue'

interface Employee {
  id: number
  name: string
  department: string
  salary: number
}

const rowData: Employee[] = [
  { id: 1, name: 'สมชาย ใจดี', department: 'IT', salary: 45000 },
  { id: 2, name: 'สมหญิง รักงาน', department: 'HR', salary: 38000 },
]

const columnDefs: ColumnDef<Employee>[] = [
  { field: 'id', headerName: 'รหัส', width: 70, align: 'center' },
  { field: 'name', headerName: 'ชื่อ-นามสกุล', width: 200 },
  { field: 'department', headerName: 'แผนก', width: 130, filter: 'select' },
  {
    field: 'salary',
    headerName: 'เงินเดือน',
    width: 130,
    align: 'right',
    filter: 'number',
    valueFormatter: ({ value }) =>
      Number(value).toLocaleString('th-TH') + ' บาท',
  },
]
</script>

<template>
  <DataGrid
    :row-data="rowData"
    :column-defs="columnDefs"
    :height="500"
  />
</template>

Props

| Prop | Type | Default | คำอธิบาย | |------|------|---------|----------| | rowData | TData[] | — | ข้อมูลทั้งหมด (required) | | columnDefs | ColumnDef<TData>[] | — | นิยาม columns (required) | | height | number \| string | 500 | ความสูงของ grid (px, %, vh, '100%') | | rowHeight | number | 40 | ความสูงต่อ row (px) | | headerHeight | number | 40 | ความสูง header (px) | | pagination | PaginationOptions | enabled, 20/page | ตั้งค่า pagination | | enableFilter | boolean | true | เปิด filter | | enableColumnResize | boolean | true | เปิด column resize | | enableColumnReorder | boolean | true | เปิด column reorder | | enableCellEdit | boolean | false | เปิด cell editing | | rowSelection | 'single' \| 'multiple' \| false | false | การเลือก row | | loading | boolean | false | แสดง loading overlay | | noRowsText | string | 'ไม่มีข้อมูล' | ข้อความเมื่อไม่มีข้อมูล |

Events

| Event | Payload | คำอธิบาย | |-------|---------|----------| | rowClick | (data: TData, rowIndex: number) | คลิก row | | cellValueChanged | CellValueChangedParams<TData> | แก้ไข cell | | selectionChanged | (selectedRows: TData[]) | selection เปลี่ยน |

<DataGrid
  :row-data="rowData"
  :column-defs="columnDefs"
  @row-click="(row, idx) => console.log(row, idx)"
  @cell-value-changed="(params) => console.log(params)"
  @selection-changed="(rows) => console.log(rows)"
/>

Expose (Template Ref)

<script setup>
import { ref } from 'vue'
const grid = ref()
</script>

<template>
  <DataGrid ref="grid" ... />
  <button @click="grid.exportToExcel()">Export Excel</button>
</template>

| Method | คำอธิบาย | |--------|----------| | exportToCsv(fileName?) | Export CSV | | exportToExcel(fileName?) | Export Excel | | getSelectedRows() | ดึง selected rows | | selectAll() | เลือกทุก row | | deselectAll() | ยกเลิก selection ทั้งหมด | | autoSizeColumns() | Auto-size ทุก column | | autoSizeColumn(field) | Auto-size column เดียว |

ColumnDef Options

| Option | Type | คำอธิบาย | |--------|------|----------| | field | string | key ใน rowData (required) | | headerName | string | ชื่อ header | | width | number | ความกว้างคงที่ (px) | | minWidth | number | ความกว้างต่ำสุด (px) | | maxWidth | number | ความกว้างสูงสุด (px) | | sortable | boolean | เรียงลำดับได้ | | filter | boolean \| 'text' \| 'number' \| 'date' \| 'select' | ประเภท filter | | resizable | boolean | ปรับขนาดได้ | | editable | boolean | แก้ไขได้ | | align | 'left' \| 'center' \| 'right' | จัดตำแหน่งข้อความ | | hide | boolean | ซ่อน column | | cellRenderer | (params) => VNode \| string \| null | custom cell render | | valueFormatter | (params) => string | format ค่าก่อนแสดง | | cellStyle | CSSProperties \| (params) => CSSProperties | style ของ cell |

Development

npm install
npm run dev      # dev server
npm run build    # build library

React Version

@sukritt/datagrid — React version