@sukritt/datagrid

Custom zero-dependency DataGrid component for React with virtual scroll, cell editing, filtering, sorting, grouping, and export support.

Features

• Virtual scroll สำหรับข้อมูลจำนวนมาก
• Pagination
• Sort, Filter (text / number / date / select dropdown)
• Global search
• Column resize & drag-and-drop reorder
• Cell editing
• Row selection (single / multiple)
• Group by (drag header ไปที่แถบ group)
• Column visibility toggle
• Aggregation (sum / avg / count / min / max)
• Export CSV & Excel
• Zero runtime dependencies (ยกเว้น React)
• TypeScript ready

Installation

npm install @sukritt/datagrid

Usage

import { DataGrid } from '@sukritt/datagrid'
import '@sukritt/datagrid/styles'
import type { ColumnDef, DataGridRef } from '@sukritt/datagrid'

interface Product {
  id: number
  name: string
  price: number
}

const columns: ColumnDef<Product>[] = [
  { field: 'id',    headerName: 'รหัส',   width: 80 },
  { field: 'name',  headerName: 'สินค้า', flex: 1   },
  { field: 'price', headerName: 'ราคา',   width: 120, align: 'right', filter: 'number' },
]

export default function App() {
  return (
    <DataGrid<Product>
      rowData={data}
      columnDefs={columns}
      height={400}
      enableFilter
      enableCellEdit
      rowSelection="multiple"
      pagination={{ enabled: true, pageSize: 20 }}
    />
  )
}

Export with ref

import { useRef } from 'react'
import { DataGrid } from '@sukritt/datagrid'
import type { DataGridRef } from '@sukritt/datagrid'

const gridRef = useRef<DataGridRef>(null)

<DataGrid ref={gridRef} rowData={data} columnDefs={columns} />

<button onClick={() => gridRef.current?.exportToCsv('report')}>Export CSV</button>
<button onClick={() => gridRef.current?.exportToExcel('report')}>Export Excel</button>

Props

| Prop | Type | Default | Description | |------|------|---------|-------------| | rowData | TData[] | required | ข้อมูลที่แสดงใน grid | | columnDefs | ColumnDef<TData>[] | required | นิยาม columns | | height | number \| string | 500 | ความสูงของ grid | | rowHeight | number | 40 | ความสูงต่อ row (px) | | headerHeight | number | 40 | ความสูง header (px) | | pagination | PaginationOptions | { enabled: true, pageSize: 20 } | ตั้งค่า pagination | | enableFilter | boolean | true | เปิด filter row | | enableColumnResize | boolean | true | ลาก resize column | | enableColumnReorder | boolean | true | ลาก reorder column | | enableCellEdit | boolean | false | ดับเบิลคลิกแก้ไข cell | | rowSelection | 'single' \| 'multiple' \| false | false | รูปแบบการเลือก row | | loading | boolean | false | แสดง loading overlay | | noRowsText | string | 'ไม่มีข้อมูล' | ข้อความเมื่อไม่มีข้อมูล | | onRowClick | (data, rowIndex) => void | — | callback เมื่อคลิก row | | onCellValueChanged | (params) => void | — | callback เมื่อแก้ไข cell | | onSelectionChanged | (selectedRows) => void | — | callback เมื่อ selection เปลี่ยน |

ColumnDef

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

DataGridRef Methods

| Method | Description | |--------|-------------| | exportToCsv(fileName?) | ดาวน์โหลด CSV | | exportToExcel(fileName?) | ดาวน์โหลด Excel (.xlsx) | | getSelectedRows() | ดึง array ของ row ที่เลือก | | selectAll() | เลือก row ทั้งหมด | | deselectAll() | ยกเลิกการเลือกทั้งหมด |

Peer Dependencies

{
  "react": ">=18.0.0",
  "react-dom": ">=18.0.0"
}

License

MIT