go-mui-datagrid

React DataGrid components built on MUI X Data Grid Pro and Data Grid Premium, with persistent state (local or session storage), resizable columns, and a unified ref API including getStoredData().

Table of contents

• Installation
• Components
• Props
• Ref API
• Storage strategy & attributes
• Usage examples
• Module Federation
• Troubleshooting
• Development

Installation

npm install go-mui-datagrid

With yarn or pnpm:

yarn add go-mui-datagrid

Note: MUI X Data Grid Pro and Premium require a license for production use (free for development).

Components

GoDataGridPro

Uses MUI Data Grid Pro. Supports all Pro features (tree data, row reorder, column pinning, etc.) plus state persistence and the extended ref.

import { GoDataGridPro } from 'go-mui-datagrid';
import { useGridApiRef } from '@mui/x-data-grid-pro';

const apiRef = useGridApiRef();
<GoDataGridPro
  apiRef={apiRef}
  id="my-grid"
  rows={rows}
  columns={columns}
  // ... any DataGridPro props
/>

GoDataGridPremium

Same as Pro but uses MUI Data Grid Premium, including Excel export, row grouping, and other Premium-only features.

import { GoDataGridPremium } from 'go-mui-datagrid';
import { useGridApiRef } from '@mui/x-data-grid-premium';

const apiRef = useGridApiRef();
<GoDataGridPremium
  apiRef={apiRef}
  id="my-grid"
  rows={rows}
  columns={columns}
  // ... any DataGridPremium props
/>

Props

Both components accept all props from the underlying MUI grid (DataGridProProps or DataGridPremiumProps) plus these extras:

| Prop | Type | Default | Description | | ------------------- | -------------------------------------------------------------------- | ------------------------------- | ----------- | | id | string | btoa(location.href) | Unique id used as (part of) the storage key. Recommended to avoid key clashes. | | storageStrategy | GoDataGridProStorageStrategy | GoDataGridPremiumStorageStrategy | LOCAL_STORAGE | Where to persist state: localStorage or sessionStorage. | | storageAttributes | GoDataGridProStorageAttribute[] | GoDataGridPremiumStorageAttribute[] | — (entire state) | If set, only these parts of the state are saved (e.g. ['filter', 'sorting', 'pagination']). | | keepState | boolean | true | If false, state is not saved to storage. | | resizable | boolean | false | If true, column separators are visible and columns are resizable. |

You can pass any other grid prop (e.g. rows, columns, pageSizeOptions, checkboxSelection, initialState, onStateChange, sx, etc.) and they behave as in the standard MUI grid.

Ref API

Use the same ref for ref and apiRef so you get both the grid API and the extra method.

The ref type (GoDataGridProRef or GoDataGridPremiumRef) includes:

• The full MUI Grid API (e.g. exportState, restoreState, selection, sorting, filtering, etc.).

• getStoredData() – returns the currently stored state and the key used in storage:

  getStoredData(): { key: string; value: GridInitialState | null }

Example:

const gridRef = useGridApiRef();

<GoDataGridPro ref={gridRef} apiRef={gridRef} id="my-grid" rows={rows} columns={columns} />

// Later:
const { key, value } = gridRef.current?.getStoredData() ?? {};
console.log('Storage key:', key, 'Stored state:', value);
gridRef.current?.exportState();
gridRef.current?.restoreState(someState);

Storage strategy & attributes

Strategy

• GoDataGridProStorageStrategy.LOCAL_STORAGE / GoDataGridPremiumStorageStrategy.LOCAL_STORAGE – persist in localStorage (default).
• GoDataGridProStorageStrategy.SESSION_STORAGE / GoDataGridPremiumStorageStrategy.SESSION_STORAGE – persist in sessionStorage.

Attributes (optional allowlist)

If you set storageAttributes, only these parts of the state are saved. Use the enum values:

• COLUMNS
• DENSITY
• FILTER
• PAGINATION
• PINNED_COLUMNS
• PREFERENCE_PANEL
• SORTING

Example: save only filter, sorting, and pagination:

import {
  GoDataGridPro,
  GoDataGridProStorageStrategy,
  GoDataGridProStorageAttribute,
} from 'go-mui-datagrid';

<GoDataGridPro
  id="users-grid"
  storageStrategy={GoDataGridProStorageStrategy.LOCAL_STORAGE}
  storageAttributes={[
    GoDataGridProStorageAttribute.FILTER,
    GoDataGridProStorageAttribute.SORTING,
    GoDataGridProStorageAttribute.PAGINATION,
  ]}
  rows={rows}
  columns={columns}
/>

Same enums exist for Premium: GoDataGridPremiumStorageStrategy, GoDataGridPremiumStorageAttribute.

Usage examples

Basic Pro grid with persistence

import {
  GoDataGridPro,
  GoDataGridProStorageStrategy,
  type GoDataGridProRef,
} from 'go-mui-datagrid';
import { useGridApiRef } from '@mui/x-data-grid-pro';

const columns = [
  { field: 'id', headerName: 'ID', width: 90 },
  { field: 'name', headerName: 'Name', width: 150 },
  { field: 'email', headerName: 'Email', width: 200 },
];

const rows = [
  { id: 1, name: 'Alice', email: '[email protected]' },
  { id: 2, name: 'Bob', email: '[email protected]' },
];

export function MyGrid() {
  const gridRef = useGridApiRef<GoDataGridProRef>();

  return (
    <div style={{ height: 400, width: '100%' }}>
      <GoDataGridPro
        ref={gridRef}
        apiRef={gridRef}
        id="my-grid"
        rows={rows}
        columns={columns}
        storageStrategy={GoDataGridProStorageStrategy.LOCAL_STORAGE}
        pageSizeOptions={[5, 10, 25]}
        checkboxSelection
        disableRowSelectionOnClick
      />
    </div>
  );
}

Premium grid with session storage and resizable columns

import {
  GoDataGridPremium,
  GoDataGridPremiumStorageStrategy,
} from 'go-mui-datagrid';
import { useGridApiRef } from '@mui/x-data-grid-premium';

<GoDataGridPremium
  apiRef={useGridApiRef()}
  id="reports-grid"
  storageStrategy={GoDataGridPremiumStorageStrategy.SESSION_STORAGE}
  resizable
  rows={rows}
  columns={columns}
/>

Accessing stored data via ref

const gridRef = useRef<GoDataGridProRef | null>(null);

<GoDataGridPro ref={gridRef} apiRef={gridRef} id="my-grid" ... />

// In a handler:
const stored = gridRef.current?.getStoredData();
if (stored) {
  console.log('Key:', stored.key, 'State:', stored.value);
}

Module Federation

If you see "resolving fallback for shared module go-mui-datagrid", add the package to your host’s shared configuration.

Webpack:

shared: {
  'go-mui-datagrid': {
    requiredVersion: require('go-mui-datagrid/package.json').version,
    singleton: true,
  },
}

Vite + @originjs/vite-plugin-federation:

federation({
  shared: {
    'go-mui-datagrid': {
      requiredVersion: '^0.1.0',
      singleton: true,
    },
  },
})

Use compatible versions across host and remotes to avoid loading a second copy.

Then clear cache and restart:

rm -rf node_modules/.vite
npm run dev

If your app uses Webpack, ensure only one version of the grid is resolved (e.g. in resolve.alias or by deduplicating in resolve.modules). You can also add in resolve.alias:

'@mui/x-data-grid': path.resolve(__dirname, 'node_modules/@mui/x-data-grid'),
'@mui/x-data-grid-pro': path.resolve(__dirname, 'node_modules/@mui/x-data-grid-pro'),
'@mui/x-data-grid-premium': path.resolve(__dirname, 'node_modules/@mui/x-data-grid-premium'),

Also: install exactly one version of the grid in your app (e.g. one @mui/x-data-grid-pro and one @mui/x-data-grid-premium). If the error persists, try:

rm -rf node_modules package-lock.json
npm install

Development

# Install dependencies
npm install

# Build the library
npm run build

# Run the demo app
npm run dev

# Lint
npm run lint