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

``bash
npm install go-mui-datagrid
`

With yarn or pnpm:

`bash
yarn add go-mui-datagrid
`

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

---

Components

$3

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

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

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

$3

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

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

const apiRef = useGridApiRef();
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:

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

Example:

`tsx
const gridRef = useGridApiRef();

// 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

$3

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

$3

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:

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

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

$3

`tsx
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: 'alice@example.com' },
{ id: 2, name: 'Bob', email: 'bob@example.com' },
];

export function MyGrid() {
const gridRef = useGridApiRef();

return (



);
}
`

$3

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

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

$3

`tsx
const gridRef = useRef(null);

// 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:

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

Vite + @originjs/vite-plugin-federation:

`js
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:

`bash
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:

`js
'@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:

`bash
rm -rf node_modules package-lock.json
npm install
`

---

Development

`bash


Install dependencies

npm install

Build the library

npm run build

Run the demo app

npm run dev

Lint

npm run lint
``