om_data_grid #

A high-performance, feature-rich, and fully customizable DataGrid for Flutter. Designed to handle large datasets with ease while providing enterprise-grade features like advanced filtering, multi-level grouping, and built-in visualization.

🌐 Live Demo #

Check out the interactive demo: Live Web Demo

📑 Table of Contents #

• 🚀 Key Features
• 🌐 Live Demo
• 🛠 Installation
• 📖 Quick Start
• 🧩 Advanced Usage
  • Column Types
  • Calculated Columns (Formulas)
  • Custom Aggregations
  • Theming & UI
  • Context Menus
  • Side Panel Customization
• 📊 Grid Features in Depth
• 🛠 API Reference
• 🤝 Contributing
• 📄 License

🚀 Key Features #

• ⚡ Enterprise-Grade Performance: Built with row and column virtualization to smoothly handle 100,000+ records.
• 🔍 Advanced Filtering System:
  • Global search with substring highlighting.
  • Quick filter bar for rapid data slicing.
  • Advanced UI filtering per column (Contains, Equals, Starts With, Numeric ranges, etc.).
• 📊 Integrated Data Visualization: Built-in support for 15+ chart types including Column, Bar, Line, Area, Pie, Doughnut, and more (using Syncfusion).
• 📁 Grouping & Hierarchical Views:
  • Drag and drop columns to group data dynamically.
  • Multi-level grouping supports nested data exploration.
• 🔢 Aggregations & Summaries: Automatic calculations in footer rows (Sum, Average, Count, Min, Max, First, Last).
• 📝 Rich Content Support: Built-in editors for Dates, Checkboxes, Switches, Images, and Files (including Multi-Image/File support).
• 📍 Pinning & Reordering:
  • Freeze columns/rows to the left, right, top, or bottom.
  • Intuitive drag-and-drop for column and row reordering.
• 💾 Professional Exporting: Seamlessly export current or filtered views to Excel (.xlsx) and PDF.

🛠 Installation #

Add om_data_grid to your pubspec.yaml:

dependencies:
  om_data_grid: ^0.0.14

Then run:

flutter pub get

📖 Quick Start #

1. Simple Data Structure #

final List<Map<String, dynamic>> myData = [
  {"id": 1, "name": "John Doe", "role": "Developer", "salary": 75000},
  {"id": 2, "name": "Jane Smith", "role": "Designer", "salary": 82000},
];

2. Configure Your Columns #

final List<OmGridColumn> columns = [
  OmGridColumn(key: 'id', title: 'ID', width: 80, type: OmGridRowTypeEnum.number),
  OmGridColumn(key: 'name', title: 'Name', width: 150, type: OmGridRowTypeEnum.text),
  OmGridColumn(key: 'role', title: 'Role', width: 120, type: OmGridRowTypeEnum.comboBox),
  OmGridColumn(key: 'salary', title: 'Salary', width: 130, type: OmGridRowTypeEnum.double),
];

3. Initialize Controller & Widget #

final controller = OmDataGridController(
  data: myData,
  columnModels: columns.map((c) => OmGridColumnModel(column: c)).toList(),
  configuration: OmDataGridConfiguration(
    primaryColor: Colors.teal,
    allowPagination: true,
  ),
);

// In your build method
OmDataGrid(controller: controller)

🧩 Advanced Usage #

Column Types #

om_data_grid handles much more than just text:

• OmGridRowTypeEnum.image: URL/Asset image display.
• OmGridRowTypeEnum.multiImage: Carousel for multiple images.
• OmGridRowTypeEnum.iosSwitch: Interactive boolean toggle.
• OmGridRowTypeEnum.date: Date picker integration with customizable formatting.
• OmGridRowTypeEnum.state: Conditional status indicators with icons.

Calculated Columns (Formulas) #

Create columns that perform live calculations:

OmGridColumn(
  key: 'total_comp',
  title: 'Total Comp',
  // Formula using other column keys
  formula: 'salary + bonus',
  type: OmGridRowTypeEnum.number,
)

Custom Aggregations #

Show summaries at the grid or group level:

OmGridColumn(
  key: 'salary',
  title: 'Salary',
  // Options: sum, avg, count, min, max, first, last
  aggregationType: OmAggregationType.avg,
)

Theming & UI #

The grid supports a powerful Seed-Based Theming System. Instead of setting over 80 color properties manually, you can use OmDataGridTheme to derive a full palette from just a few base colors.

1. Using Presets (Recommended)

Quickly switch between pre-defined styles for Light, Dark, or Accented themes:

OmDataGridConfiguration.fromTheme(
  theme: OmDataGridTheme.dark(), // Options: .light(), .dark(), .blue(), .green(), .rose(), .purple()
  allowPagination: true,
)

2. Seed-Based Custom Theme

Provide a custom primary color, and the grid will calculate complementary colors for selections, hover states, and input fields:

OmDataGridConfiguration.fromTheme(
  theme: OmDataGridTheme(
    primaryColor: Colors.teal,
    backgroundColor: Colors.white,
    foregroundColor: Color(0xFF2D3748),
  ),
  rowHeight: 48,
)

3. Granular Overrides

You can still override any specific property while letting the theme handle the rest:

OmDataGridConfiguration.fromTheme(
  theme: OmDataGridTheme.light(),
  headerBackgroundColor: Colors.blueGrey, // Override specific theme colors
  headerHeight: 60.0,
  gridFontFamily: 'Roboto',
)

Context Menus #

Add custom actions to rows or columns:

OmGridColumn(
  key: 'name',
  title: 'Name',
  contextMenuOptions: [
    OmRowContextMenuItem(
      label: 'Send Email',
      icon: Icons.email,
      onTap: (row) => print('Emailing ${row['name']}'),
    ),
  ],
)

Side Panel Customization #

Add your own tools to the grid's side panel:

OmDataGridController(
  additionalSidePanelTabs: [
    OmGridSidePanelTab(
      id: 'custom_reports',
      icon: Icons.analytics,
      label: 'Reports',
      builder: (context, controller) => MyCustomReportWidget(controller: controller),
    ),
  ],
)

📊 Grid Features in Depth #

Data Visualization #

The grid isn't just a list; it's an analysis tool. Built-in "Visualize" actions allow users to instantly turn any filtered dataset into a dashboard of charts (Pie, Bar, Column, Area, etc.) with customizable axes and sorting.

Exporting & Sharing #

• Excel: Full support for .xlsx export, including calculated columns and current filtering state.
• PDF: Cleanly formatted PDF reports of your data grid.

Editing & Input #

When isEditing is true, cells become interactive:

• Text/Number: Standard input.
• ComboBox: Single and multi-selection dropdowns.
• Switches: Instant boolean updates.
• Images/Files: Integrated image_picker and file_picker support.

🛠 API Reference #

OmDataGrid Props #

OmGridColumn Configuration #

OmDataGridConfiguration #

Defines the global appearance and behavior of the DataGrid.

(Note: OmDataGridConfiguration contains many more color and style properties for fine-grained customization of menus, dialogs, and inputs not listed above.)

OmSidePanelConfiguration #

Controls the look and feel of the expandable side panel.

🤝 Contributing #

Contributions are welcome! Please feel free to submit a Pull Request or open an issue on GitHub.

📄 License #

This project is licensed under the MIT License - see the LICENSE file for details.