Pro Data Grid

The Pro Data Grid is an enterprise-grade data grid web component with virtual scrolling, multi-column sorting, filtering, inline editing, row grouping, pivoting, cell selection, clipboard support, and data export. It handles 1M+ rows via virtualized rendering.

Installation

npm install @duskmoon-dev/el-pro-data-grid

Usage

import '@duskmoon-dev/el-pro-data-grid/register';

<el-dm-pro-data-grid id="grid" striped></el-dm-pro-data-grid>

<script>
  const grid = document.getElementById('grid');
  grid.columns = [
    { field: 'name', header: 'Name', sortable: true },
    { field: 'email', header: 'Email', sortable: true },
    { field: 'salary', header: 'Salary', type: 'number', align: 'right' }
  ];
  grid.data = [
    { id: 1, name: 'Alice', email: 'alice@example.com', salary: 85000 },
    { id: 2, name: 'Bob', email: 'bob@example.com', salary: 72000 }
  ];
</script>

Live Demo

Properties

ColumnDef Interface

interface ColumnDef {
  field: string;          // Data field key
  header: string;         // Display header text
  width?: number;         // Fixed width in pixels
  minWidth?: number;      // Minimum width
  maxWidth?: number;      // Maximum width
  flex?: number;          // Flex grow factor
  sortable?: boolean;     // Enable sorting
  filterable?: boolean;   // Enable filtering
  editable?: boolean;     // Enable editing
  hidden?: boolean;       // Hide column
  pinned?: 'left' | 'right' | false;
  type?: 'text' | 'number' | 'date' | 'boolean' | 'badge' | 'custom';
  align?: 'left' | 'center' | 'right';
  resizable?: boolean;    // Enable column resize
  filterType?: 'text' | 'number' | 'date' | 'set' | 'multi';
  editor?: 'text' | 'number' | 'select' | 'date' | 'checkbox' | 'richText';
  rowGroup?: boolean;     // Group by this column
  aggFunc?: 'sum' | 'avg' | 'min' | 'max' | 'count';
  renderer?: (params: CellRendererParams) => string | HTMLElement;
  children?: ColumnDef[]; // Column groups
}

Sorting

Click column headers to sort. Hold Shift to multi-sort. Supports both client-side and server-side sorting modes.

<el-dm-pro-data-grid id="grid"></el-dm-pro-data-grid>

<script>
  grid.columns = [
    { field: 'name', header: 'Name', sortable: true },
    { field: 'salary', header: 'Salary', sortable: true, type: 'number' }
  ];
</script>

Filtering

Enable per-column filters with filterable: true, or use a global quick filter.

Floating Filters

<el-dm-pro-data-grid floating-filter></el-dm-pro-data-grid>

Quick Filter

<el-dm-pro-data-grid id="grid" quick-filter-text="search term"></el-dm-pro-data-grid>

// Programmatic quick filter
grid.quickFilterText = 'engineering';

Pagination

<el-dm-pro-data-grid page-size="25" current-page="1"></el-dm-pro-data-grid>

Row Selection

<!-- Multiple selection with checkboxes -->
<el-dm-pro-data-grid selection-mode="multiple"></el-dm-pro-data-grid>

<!-- Single selection -->
<el-dm-pro-data-grid selection-mode="single"></el-dm-pro-data-grid>

Inline Editing

Double-click a cell to enter edit mode. Tab to move between cells. Ctrl+Z / Ctrl+Y for undo/redo.

grid.columns = [
  { field: 'name', header: 'Name', editable: true },
  { field: 'salary', header: 'Salary', editable: true, editor: 'number' }
];

Column Pinning

Pin columns to the left or right edge so they remain visible while scrolling.

grid.columns = [
  { field: 'name', header: 'Name', pinned: 'left' },
  { field: 'email', header: 'Email' },
  { field: 'actions', header: '', pinned: 'right', width: 80 }
];

Row Grouping

Group rows by one or more columns with aggregation.

grid.columns = [
  { field: 'department', header: 'Department', rowGroup: true },
  { field: 'salary', header: 'Salary', aggFunc: 'sum' }
];

Tree Data

Display hierarchical data with expand/collapse. Click the toggle arrows to expand/collapse tree nodes.

<el-dm-pro-data-grid tree-data tree-data-child-field="children"></el-dm-pro-data-grid>

Row Expandable

Enable expandable detail panels below each row. Click the toggle arrow to expand a row and see its details.

<el-dm-pro-data-grid row-expandable row-expand-multiple></el-dm-pro-data-grid>

Cell Selection & Clipboard

Click and drag to select cell ranges. Hold Ctrl/Cmd to select multiple ranges. Copy with Ctrl+C.

<el-dm-pro-data-grid cell-selection fill-handle></el-dm-pro-data-grid>

Data Export

// Export as CSV
grid.exportCsv({ fileName: 'export.csv' });

// Export as JSON
grid.exportJson({ fileName: 'export.json' });

// Export as Excel XML
grid.exportExcel({ fileName: 'export.xlsx' });

Declarative Columns

Use child elements to define columns declaratively:

<el-dm-pro-data-grid>
  <el-dm-grid-column field="name" header="Name" sortable></el-dm-grid-column>
  <el-dm-grid-column field="email" header="Email"></el-dm-grid-column>
  <el-dm-grid-column-group header="Details">
    <el-dm-grid-column field="department" header="Dept"></el-dm-grid-column>
    <el-dm-grid-column field="salary" header="Salary" type="number"></el-dm-grid-column>
  </el-dm-grid-column-group>
</el-dm-pro-data-grid>

Events

Event Handling

const grid = document.querySelector('el-dm-pro-data-grid');

grid.addEventListener('sort-change', (e) => {
  console.log('Sort model:', e.detail.sortModel);
});

grid.addEventListener('cell-edit', (e) => {
  console.log(`${e.detail.field}: ${e.detail.oldValue} → ${e.detail.newValue}`);
});

Methods

CSS Custom Properties

Accessibility

• ARIA role="grid" with role="row" and role="gridcell"
• Keyboard navigation: Arrow keys, Home/End, Page Up/Down
• aria-sort on sortable headers
• aria-selected on selected rows/cells
• aria-expanded on group/tree rows
• aria-busy during loading
• Focus management across virtual scroll boundaries