Data Grid Modularity

Smart.Grid supports both bundle-first and module-first integration. This guide shows how to build a reliable modular setup with Grid and registerModules, starting from beginner defaults and scaling to advanced production patterns.

Who This Guide Is For

• Entry developers: copy the quick-start imports and baseline config, then enable features one by one.
• Advanced developers: control bundle size, load modules intentionally, and apply feature-specific optimizations.
• Teams: use the module map and troubleshooting checklist to standardize setups across applications.

Bundle vs Modular Imports

Approach	JavaScript	Use Case
Full bundle	smart.grid.js	Fast setup, everything included
Modular	smart.grid.core.js + selected feature modules	Smaller build, feature-by-feature control

Quick Start (Recommended Baseline)

Use this as your default starting point for modular Grid in demos and new projects. It includes the common interactive features: filtering, sorting, editing, selection, resize, reorder, and menu.

import { Grid, registerModules } from '../../../source/modules/smart.grid.core.js';
import { FilterModule } from '../../../source/modules/smart.grid.filter.js';
import { SortModule } from '../../../source/modules/smart.grid.sort.js';
import { EditModule } from '../../../source/modules/smart.grid.edit.js';
import { ResizeModule } from '../../../source/modules/smart.grid.resize.js';
import { ReorderModule } from '../../../source/modules/smart.grid.reorder.js';
import { SelectModule } from '../../../source/modules/smart.grid.select.js';
import { MenuModule } from '../../../source/modules/smart.grid.menu.js';

registerModules([FilterModule, SortModule, EditModule, ReorderModule, ResizeModule, SelectModule, MenuModule]);

Feature to Module Map

Grid Feature	JS Module	Typical Config Flag	Recommended CSS
Core rendering and data binding	smart.grid.core.js	N/A (always required)	smart.grid.core.css
Sorting	smart.grid.sort.js	sortable: true	smart.grid.sort.css
Filtering	smart.grid.filter.js	filterable: true	smart.grid.filter.css
Selection	smart.grid.select.js	selectable: true	smart.grid.select.css
Editing	smart.grid.edit.js	editable: true	smart.grid.edit.css
Resize	smart.grid.resize.js	column resize options	smart.grid.core.css
Reorder	smart.grid.reorder.js	row/column reorder options	smart.grid.core.css
Menu	smart.grid.menu.js	menu-related options	smart.grid.core.css
Paging	smart.grid.pager.js	paging: true	smart.grid.pager.css
Grouping	smart.grid.group.js	group options	smart.grid.group.css
Tree data	smart.grid.tree.js	tree/grid tree options	smart.grid.tree.css
Export	smart.grid.export.js	export APIs	smart.grid.core.css

Complete JavaScript Grid Modules

Source: source/modules/

Module	Purpose
smart.grid.js	Full Grid bundle (all core functionality together)
smart.grid.core.js	Base Grid engine (required for modular builds)
smart.grid.celltemplate.js	Cell template support
smart.grid.chart.js	Chart-related integration support
smart.grid.dropdown.js	Dropdown interactions used by Grid UI
smart.grid.edit.js	Editing workflows
smart.grid.editors.js	Editor components used during cell/row edit
smart.grid.export.js	Data export capabilities
smart.grid.filter.js	Filtering engine and UI
smart.grid.group.js	Grouping support
smart.grid.menu.js	Context/column menu support
smart.grid.pager.js	Paging and pager UI
smart.grid.reorder.js	Reordering (rows/columns where applicable)
smart.grid.resize.js	Resize support
smart.grid.select.js	Selection engine
smart.grid.sort.js	Sorting engine
smart.grid.state.js	State persistence/restore helpers
smart.grid.tree.js	Tree/hierarchical Grid behaviors
smart.grid.view.js	View/rendering-level helpers
smart.gridpanel.js	Grid panel companion module

Grid Modular Example (Update Data)

The demos/grid/datagrid-update-data sample demonstrates the same modular approach for Data Grid: start from smart.grid.core.js, register only the modules you need, then create a Grid instance. This keeps production bundles smaller while preserving feature parity.

JavaScript modules used in the demo

import { Grid, registerModules } from '../../../source/modules/smart.grid.core.js';
import { FilterModule } from '../../../source/modules/smart.grid.filter.js';
import { SortModule } from '../../../source/modules/smart.grid.sort.js';
import { EditModule } from '../../../source/modules/smart.grid.edit.js';
import { ResizeModule } from '../../../source/modules/smart.grid.resize.js';
import { ReorderModule } from '../../../source/modules/smart.grid.reorder.js';
import { SelectModule } from '../../../source/modules/smart.grid.select.js';
import { MenuModule } from '../../../source/modules/smart.grid.menu.js';

registerModules([FilterModule, SortModule, EditModule, ReorderModule, ResizeModule, SelectModule, MenuModule]);

Instance setup used in the demo

// HTML host:
// <smart-grid id="grid"></smart-grid>
const grid = new Grid(document.querySelector('#grid'), {
  dataSource: [
    { id: 0, firstName: 'John', lastName: 'Doe', productName: 'Black Tea', quantity: 15, price: 2.5, total: 37.5, date: new Date(2026, 0, 1) },
    { id: 1, firstName: 'Jane', lastName: 'Smith', productName: 'Green Tea', quantity: 10, price: 1.5, total: 15, date: new Date(2026, 0, 2) }
  ],
  dataSourceSettings: {
    dataFields: [
      'id: number',
      'firstName: string',
      'lastName: string',
      'productName: string',
      'date: date',
      'quantity: number',
      'price: number',
      'total: number'
    ]
  },
  editable: true,
  sortable: true,
  filterable: true,
  selectable: true,
  columns: [
    { label: 'First Name', dataField: 'firstName', columnGroup: 'name' },
    { label: 'Last Name', dataField: 'lastName', columnGroup: 'name' },
    { label: 'Product', dataField: 'productName', columnGroup: 'order' },
    { label: 'Quantity', dataField: 'quantity', columnGroup: 'order' },
    { label: 'Unit Price', dataField: 'price', cellsFormat: 'c2', columnGroup: 'order' },
    { label: 'Date', dataField: 'date', cellsFormat: 'd', columnGroup: 'order' },
    { label: 'Total', dataField: 'total', cellsFormat: 'c2', columnGroup: 'order' }
  ]
});

CSS modules used in the demo

<link rel="stylesheet" href="../../../source/styles/modules/smart.grid.core.css" />
<link rel="stylesheet" href="../../../source/styles/modules/smart.grid.sort.css" />
<link rel="stylesheet" href="../../../source/styles/modules/smart.grid.filter.css" />
<link rel="stylesheet" href="../../../source/styles/modules/smart.grid.select.css" />
<link rel="stylesheet" href="../../../source/styles/modules/smart.grid.edit.css" />

Live Demo (datagrid-module)

The live demo below loads the datagrid-module sample directly in an iframe. If your environment blocks embedded pages, open the same demo in a separate tab.

Open datagrid-module demo in a new tab

Complete CSS Grid Modules

Source: source/styles/modules/

CSS Module	Purpose
smart.grid.css	Bundle-level Grid stylesheet
smart.grid.core.css	Core Grid styling baseline
smart.grid.edit.css	Editing visuals
smart.grid.filter.css	Filtering UI styles
smart.grid.group.css	Grouping UI styles
smart.grid.pager.css	Pager styles
smart.grid.select.css	Selection visuals
smart.grid.sort.css	Sort indicator styles
smart.grid.sticky.css	Sticky rows/columns styles
smart.grid.tree.css	Tree Grid styles
smart.gridlayout.css	Grid layout support styles
smart.gridpanel.css	Grid panel styles

How to Use Modular Grid (ES Modules)

The pattern is always the same: (1) import core and feature module exports, (2) call registerModules, (3) create new Grid(...) with matching feature flags and a valid host setup.

// HTML:
// <smart-grid id="grid"></smart-grid>
import { Grid, registerModules } from '../../../source/modules/smart.grid.core.js';
import { FilterModule } from '../../../source/modules/smart.grid.filter.js';
import { SortModule } from '../../../source/modules/smart.grid.sort.js';
import { EditModule } from '../../../source/modules/smart.grid.edit.js';
import { ResizeModule } from '../../../source/modules/smart.grid.resize.js';
import { ReorderModule } from '../../../source/modules/smart.grid.reorder.js';
import { SelectModule } from '../../../source/modules/smart.grid.select.js';
import { MenuModule } from '../../../source/modules/smart.grid.menu.js';

registerModules([FilterModule, SortModule, EditModule, ReorderModule, ResizeModule, SelectModule, MenuModule]);

const grid = new Grid(document.querySelector('#grid'), {
  dataSource: [
    { id: 0, firstName: 'John', lastName: 'Doe', productName: 'Black Tea', quantity: 15, price: 2.5, total: 37.5, date: new Date(2026, 0, 1) },
    { id: 1, firstName: 'Jane', lastName: 'Smith', productName: 'Green Tea', quantity: 10, price: 1.5, total: 15, date: new Date(2026, 0, 2) }
  ],
  dataSourceSettings: {
    dataFields: [
      'id: number',
      'firstName: string',
      'lastName: string',
      'productName: string',
      'date: date',
      'quantity: number',
      'price: number',
      'total: number'
    ]
  },
  editable: true,
  sortable: true,
  filterable: true,
  selectable: true,
  columns: [
    { label: 'First Name', dataField: 'firstName', columnGroup: 'name' },
    { label: 'Last Name', dataField: 'lastName', columnGroup: 'name' },
    { label: 'Product', dataField: 'productName', columnGroup: 'order' },
    { label: 'Quantity', dataField: 'quantity', columnGroup: 'order' },
    { label: 'Unit Price', dataField: 'price', cellsFormat: 'c2', columnGroup: 'order' },
    { label: 'Date', dataField: 'date', cellsFormat: 'd', columnGroup: 'order' },
    { label: 'Total', dataField: 'total', cellsFormat: 'c2', columnGroup: 'order' }
  ]
});

Alternative host: initialize from a div

// HTML:
// <div id="grid"></div>
const grid = new Grid(document.createElement('div'), {
  appendTo: '#grid',
  dataSource: [],
  columns: []
});

Advanced Patterns

1) Feature-set registration per page/app area

Register only what the current page needs. For example, an analytics screen may need sort/filter but not edit. This helps control initial load size and avoids hidden dependencies.

2) Lazy-load heavier modules

If a feature is rarely used (for example export), load and register it only when needed.

async function enableExportFeature() {
  const { ExportModule } = await import('smart-webcomponents/source/modules/smart.grid.export.js');
  registerModules([ExportModule]);
}

3) Keep config and module sets in sync

If sortable: true is enabled, include SortModule. If sorting is disabled in product requirements, remove both the flag and module. This practice reduces regressions and improves maintainability.

4) Recommended initialization order

1. Import module exports.
2. Register feature modules.
3. Create host element (or select existing host).
4. Create Grid instance with options.
5. Apply data updates and event wiring.

5) State persistence strategy

For enterprise apps, pair the state module with application-level persistence (for example local storage or server profile settings) so users keep column, sort, and filter preferences across sessions.

Troubleshooting Checklist

Symptom	Likely Cause	Fix
Grid renders but feature does not work	Feature module not registered	Import module export and add it to registerModules([...])
Feature UI looks broken or incomplete	Missing feature CSS module	Add corresponding CSS module file to the page/bundle
Runtime import error	Wrong module path	Verify relative path and filename from source/modules
Unexpected behavior after refactor	Flag/module mismatch	Audit config flags (sortable, filterable, etc.) against registered modules
Works locally, fails in production	Bundler removed required module	Confirm import is reachable and not conditionally stripped by build tooling

Production Webpack Starter (Modular Grid)

Use module-level imports in your entry file so bundlers include only selected functionality and styles. For production apps, prefer extracted CSS and code splitting where appropriate.

1) Install

npm i smart-webcomponents
npm i -D webpack webpack-cli style-loader css-loader html-webpack-plugin mini-css-extract-plugin

2) Entry file (src/index.js)

import 'smart-webcomponents/source/styles/modules/smart.grid.core.css';
import 'smart-webcomponents/source/styles/modules/smart.grid.sort.css';
import 'smart-webcomponents/source/styles/modules/smart.grid.filter.css';
import 'smart-webcomponents/source/styles/modules/smart.grid.pager.css';

import { Grid, registerModules } from 'smart-webcomponents/source/modules/smart.grid.core.js';
import { SortModule } from 'smart-webcomponents/source/modules/smart.grid.sort.js';
import { FilterModule } from 'smart-webcomponents/source/modules/smart.grid.filter.js';
import { MenuModule } from 'smart-webcomponents/source/modules/smart.grid.menu.js';
import { SelectModule } from 'smart-webcomponents/source/modules/smart.grid.select.js';

registerModules([SortModule, FilterModule, MenuModule, SelectModule]);

const gridHost = document.querySelector('#grid'); // <smart-grid id="grid"></smart-grid>
new Grid(gridHost, {
  dataSource: [
    { firstName: 'Nancy', lastName: 'Davolio', product: 'Espresso' },
    { firstName: 'Andrew', lastName: 'Fuller', product: 'Latte' }
  ],
  sortable: true,
  filterable: true,
  selectable: true,
  columns: [
    { label: 'First Name', dataField: 'firstName' },
    { label: 'Last Name', dataField: 'lastName' },
    { label: 'Product', dataField: 'product' }
  ]
});

3) Webpack config (webpack.config.js)

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');

module.exports = {
  mode: 'production',
  entry: './src/index.js',
  output: {
    filename: 'bundle.[contenthash].js',
    path: path.resolve(__dirname, 'dist'),
    clean: true
  },
  module: {
    rules: [
      {
        test: /\.css$/i,
        use: [MiniCssExtractPlugin.loader, 'css-loader']
      }
    ]
  },
  plugins: [
    new MiniCssExtractPlugin({ filename: 'styles.[contenthash].css' }),
    new HtmlWebpackPlugin({
      templateContent: `
        <!doctype html>
        <html lang="en">
        <head>
          <meta charset="utf-8" />
          <meta name="viewport" content="width=device-width, initial-scale=1" />
          <title>Data Grid Modular Build</title>
        </head>
        <body>
          <smart-grid id="grid"></smart-grid>
        </body>
        </html>
      `
    })
  ]
};

4) Build

npx webpack

Production Best Practices

• Prototype with smart.grid.js, then migrate to modular imports before release.
• Treat module registration as part of feature design, not as an afterthought.
• Keep JavaScript modules, CSS modules, and grid flags intentionally synchronized.
• Prefer one centralized registration utility per app to avoid duplicated module logic.
• Load rare features lazily to keep initial bundles smaller.
• Add regression tests for sorting/filtering/editing when changing module sets.
• When debugging, check module registration first, then CSS coverage, then data/config.