@gridium-ui/community

Gridium Community Edition - A high-performance, feature-rich data grid component similar to AG Grid, with complete TypeScript support and framework-agnostic architecture.

🚀 Features

✅ Community Features (Free)

• Filtering - Advanced column filtering with custom filter types
• Sorting - Multi-column sorting with custom comparators
• Cell Editing - Inline editing with validation
• CSV Export - Export data to CSV format
• Selection - Row and cell selection modes
• Drag & Drop - Column reordering and row drag-drop
• Accessibility - WCAG 2.2 compliant with screen reader support
• Virtualization - Handle millions of rows efficiently
• Pagination - Client and server-side pagination
• Theming - Multiple built-in themes + custom theme support
• Internationalization - Multi-language support
• Custom Components - Render custom cells and headers

📦 Installation

npm install @gridium-ui/community

🎯 Quick Start

Vanilla JavaScript

import { GridiumCommunity } from '@gridium-ui/community';

const gridOptions = {
  columnDefs: [
    { field: 'name', headerName: 'Name' },
    { field: 'age', headerName: 'Age', type: 'number' },
    { field: 'email', headerName: 'Email' }
  ],
  rowData: [
    { name: 'John Doe', age: 30, email: '[email protected]' },
    { name: 'Jane Smith', age: 25, email: '[email protected]' }
  ]
};

const grid = new GridiumCommunity(
  document.querySelector('#myGrid'), 
  gridOptions
);

// Get API reference
const gridApi = grid.getApi();

React (with @gridium-ui/react)

import { GridiumGrid } from '@gridium-ui/react';

function MyApp() {
  const columnDefs = [
    { field: 'name', headerName: 'Name' },
    { field: 'age', headerName: 'Age' },
    { field: 'email', headerName: 'Email' }
  ];

  const rowData = [
    { name: 'John Doe', age: 30, email: '[email protected]' },
    { name: 'Jane Smith', age: 25, email: '[email protected]' }
  ];

  return (
    <GridiumGrid
      columnDefs={columnDefs}
      rowData={rowData}
      theme="light"
    />
  );
}

Vue 3 (with @gridium-ui/vue)

<template>
  <GridiumGrid
    :columnDefs="columnDefs"
    :rowData="rowData"
    theme="light"
  />
</template>

<script setup>
import { GridiumGrid } from '@gridium-ui/vue';

const columnDefs = [
  { field: 'name', headerName: 'Name' },
  { field: 'age', headerName: 'Age' },
  { field: 'email', headerName: 'Email' }
];

const rowData = [
  { name: 'John Doe', age: 30, email: '[email protected]' },
  { name: 'Jane Smith', age: 25, email: '[email protected]' }
];
</script>

🎨 Framework Support

Gridium supports all major frontend frameworks:

• React - npm install @gridium-ui/react
• Vue 3 - npm install @gridium-ui/vue
• Angular - npm install @gridium-ui/angular
• Svelte - npm install @gridium-ui/svelte
• Vanilla JS - npm install @gridium-ui/vanilla

🌟 Advanced Features

Filtering

// Enable column filtering
const columnDefs = [
  { 
    field: 'name', 
    filter: 'text',
    filterParams: {
      filterOptions: ['contains', 'startsWith', 'endsWith']
    }
  },
  { 
    field: 'age', 
    filter: 'number',
    filterParams: {
      filterOptions: ['equals', 'greaterThan', 'lessThan']
    }
  }
];

Sorting

// Multi-column sorting
const columnDefs = [
  { field: 'name', sortable: true },
  { field: 'age', sortable: true, sort: 'desc' },
  { field: 'email', sortable: true }
];

Cell Editing

const columnDefs = [
  { 
    field: 'name', 
    editable: true,
    cellEditor: 'text'
  },
  { 
    field: 'age', 
    editable: true,
    cellEditor: 'number',
    cellEditorParams: {
      min: 0,
      max: 120
    }
  }
];

Theming

// Built-in themes
const gridOptions = {
  theme: 'light', // 'light', 'dark', 'compact', 'comfortable'
  // ... other options
};

// Custom theme
const gridOptions = {
  theme: {
    colors: {
      primary: '#007bff',
      background: '#ffffff',
      border: '#e0e0e0'
    },
    spacing: {
      cellPadding: '12px',
      headerHeight: '48px'
    }
  }
};

📊 Performance

• Virtualization: Handle millions of rows without performance degradation
• Efficient Rendering: Only renders visible cells
• Memory Optimized: Minimal memory footprint
• Bundle Size: Tree-shakeable for optimal bundle size

♿ Accessibility

Gridium is built with accessibility in mind:

• WCAG 2.2 Compliant
• Screen Reader Support
• Keyboard Navigation
• High Contrast Mode
• Focus Management

🌍 Internationalization

import { setLocale } from '@gridium-ui/community';

// Set language
setLocale('es'); // Spanish
setLocale('fr'); // French
setLocale('de'); // German

// Custom translations
setLocale('custom', {
  'grid.noData': 'No data available',
  'grid.loading': 'Loading...',
  'filter.contains': 'Contains'
});

📚 API Reference

GridiumCommunity Class

Methods

• getApi() - Get grid API instance
• setRowData(data) - Update grid data
• getRowData() - Get current data
• destroy() - Cleanup grid instance

Events

• onRowClicked - Row click event
• onCellValueChanged - Cell value change event
• onSortChanged - Sort change event
• onFilterChanged - Filter change event

Feature Availability

import { 
  isFeatureAvailable, 
  COMMUNITY_FEATURES 
} from '@gridium-ui/community';

// Check if a feature is available
if (isFeatureAvailable('filtering')) {
  // Enable filtering UI
}

// Get all available features
console.log(COMMUNITY_FEATURES);

🆙 Enterprise Features

Need advanced features? Upgrade to @gridium-ui/enterprise:

• Range Selection - Multi-cell selection
• Row Grouping & Aggregation - Group rows with aggregations
• Pivoting - Dynamic pivot tables
• Excel Export - Export to Excel with formatting
• Master/Detail - Expandable row details
• Tree Data - Hierarchical data display
• Advanced Menus - Rich context and column menus
• Tool Panels - Dockable side panels

npm install @gridium-ui/enterprise

🤝 Contributing

We welcome contributions! Please see our Contributing Guide.

📄 License

MIT License - see LICENSE file for details.

🔗 Links

• Documentation: https://gridium-ui.github.io/gridium
• GitHub: https://github.com/gridium-ui/gridium
• NPM: https://www.npmjs.com/package/@gridium-ui/community
• Issues: https://github.com/gridium-ui/gridium/issues
• Discussions: https://github.com/gridium-ui/gridium/discussions

💬 Support

• GitHub Issues: Bug reports and feature requests
• GitHub Discussions: Questions and community support
• Enterprise Support: Premium support available with enterprise license

Made with ❤️ by the Gridium team