Vanilla Data Grid Lite

A lightweight, framework-agnostic data grid that works perfectly with React.

✨ Features

• ✅ Sorting - Click column headers to sort
• ✅ Filtering - Built-in column filters
• ✅ Pagination - Configurable page sizes
• ✅ Global Search - Search across all columns
• ✅ Column Resize - Drag to resize columns
• ✅ Column Reorder - Drag to reorder columns
• ✅ Column Chooser - Show/hide columns
• ✅ Export - Excel & PDF export
• ✅ Row Selection - Optional checkbox selection
• ✅ Responsive - Works on all screen sizes

All features enabled by default! Just add data and you're done.

Installation

npm install vanilla-data-grid-lite

Quick Start (React)

Minimal Usage (Auto-Generated Columns)

import { useEffect } from 'react';
import { Grid } from 'vanilla-data-grid-lite';
import 'vanilla-data-grid-lite/dist/vanilla-data-grid.css';

export default function App() {
  useEffect(() => {
    const data = [
      { id: 1, name: 'Alice', age: 24, department: 'Engineering' },
      { id: 2, name: 'Bob', age: 30, department: 'Marketing' },
      { id: 3, name: 'Charlie', age: 28, department: 'Sales' }
    ];

    // Just container + data. Columns auto-generated from data!
    new Grid({
      container: '#grid',
      dataSource: { type: 'static', data }
    });
  }, []);

  return <div id="grid"></div>;
}

With Title

new Grid({
  container: '#grid',
  title: 'Employee Directory',
  dataSource: { type: 'static', data }
});

With Custom Columns

new Grid({
  container: '#grid',
  title: 'Employees',
  columns: [
    { headerText: 'ID', dataField: 'id' },
    { headerText: 'Name', dataField: 'name' },
    { headerText: 'Age', dataField: 'age' },
    { headerText: 'Department', dataField: 'department' }
  ],
  dataSource: { type: 'static', data }
});

Configuration

Required Options

{
  container: '#grid',           // CSS selector or DOM element
  dataSource: {
    type: 'static',             // 'static', 'api', or 'function'
    data: [...]                 // Array of objects
  }
}

Optional Options

{
  title: 'My Grid',             // Grid title (shown in toolbar)
  
  columns: [                    // Optional - auto-generated if not provided
    {
      headerText: 'Column Name',
      dataField: 'fieldName',
      sortable: true,           // Default: true
      filterable: true,         // Default: true
      dataType: 'string',       // 'string', 'number', 'date'
      width: 150                // Column width in pixels
    }
  ],

  features: {
    sorting: true,              // Enable/disable sorting
    filtering: true,            // Enable/disable filtering
    pagination: true,           // Enable/disable pagination
    columnResize: true,         // Enable/disable column resize
    columnReorder: true,        // Enable/disable column reorder
    rowSelection: true          // Enable/disable row selection
  },

  pagination: {
    enabled: true,
    pageSize: 10,               // Rows per page
    pageSizes: [10, 25, 50, 100] // Available page sizes
  },

  globalSearch: {
    enabled: true,
    placeholder: 'Search...',
    debounce: 250               // Milliseconds
  },

  columnChooser: {
    enabled: true,              // Show/hide columns UI
    label: 'Columns'
  },

  export: {
    enabled: true,
    formats: ['excel', 'pdf']   // Export formats
  },

  selection: {
    enabled: false,             // Enable row selection
    type: 'checkbox',           // 'checkbox' or 'row'
    mode: 'multiple'            // 'single' or 'multiple'
  },

  theme: {
    mode: 'light',              // 'light' or 'dark'
    accentColor: '#0078d4'      // Primary color
  }
}

API Data Source

new Grid({
  container: '#grid',
  dataSource: {
    type: 'api',
    url: 'https://api.example.com/employees',
    method: 'GET',
    headers: {
      'Authorization': 'Bearer token'
    },
    dataPath: 'data.items',     // If data is nested in response
    totalPath: 'data.total'     // If total count in response
  }
});

Events

new Grid({
  container: '#grid',
  dataSource: { type: 'static', data },
  events: {
    onDataLoaded: (data) => console.log('Data loaded', data),
    onRowClick: (row) => console.log('Row clicked', row),
    onSortChange: (column, direction) => console.log('Sorted by', column),
    onFilterChange: (filters) => console.log('Filters applied', filters),
    onPageChange: (page) => console.log('Page changed to', page),
    onSelectionChange: (selectedRows) => console.log('Selected', selectedRows)
  }
});

Examples

Disable Export

new Grid({
  container: '#grid',
  dataSource: { type: 'static', data },
  export: { enabled: false }   // Hide export buttons
});

Custom Pagination

new Grid({
  container: '#grid',
  dataSource: { type: 'static', data },
  pagination: {
    pageSize: 25,              // 25 rows per page
    pageSizes: [10, 25, 50]    // Allow user to change
  }
});

Disable Sorting & Filtering

new Grid({
  container: '#grid',
  dataSource: { type: 'static', data },
  features: {
    sorting: false,
    filtering: false
  }
});

Enable Row Selection

new Grid({
  container: '#grid',
  dataSource: { type: 'static', data },
  selection: {
    enabled: true,
    type: 'checkbox',
    mode: 'multiple'
  }
});

Browser Support

• Chrome (latest)
• Firefox (latest)
• Safari (latest)
• Edge (latest)

License

MIT