React DataGrid component extended from MUI DataGridPro with extra features
npm install go-mui-datagridReact 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().
---
- Installation
- Components
- Props
- Ref API
- Storage strategy & attributes
- Usage examples
- Module Federation
- Troubleshooting
- Development
---
``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).
---
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();
id="my-grid"
rows={rows}
columns={columns}
// ... any DataGridPro props
/>
`
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();
id="my-grid"
rows={rows}
columns={columns}
// ... any DataGridPremium 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.
---
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);
`
---
- GoDataGridProStorageStrategy.LOCAL_STORAGE / GoDataGridPremiumStorageStrategy.LOCAL_STORAGE – persist in localStorage (default).GoDataGridProStorageStrategy.SESSION_STORAGE
- / GoDataGridPremiumStorageStrategy.SESSION_STORAGE – persist in sessionStorage.
If you set storageAttributes, only these parts of the state are saved. Use the enum values:
- COLUMNSDENSITY
- FILTER
- PAGINATION
- PINNED_COLUMNS
- PREFERENCE_PANEL
- SORTING
-
Example: save only filter, sorting, and pagination:
`tsx
import {
GoDataGridPro,
GoDataGridProStorageStrategy,
GoDataGridProStorageAttribute,
} from 'go-mui-datagrid';
storageStrategy={GoDataGridProStorageStrategy.LOCAL_STORAGE}
storageAttributes={[
GoDataGridProStorageAttribute.FILTER,
GoDataGridProStorageAttribute.SORTING,
GoDataGridProStorageAttribute.PAGINATION,
]}
rows={rows}
columns={columns}
/>
`
Same enums exist for Premium: GoDataGridPremiumStorageStrategy, GoDataGridPremiumStorageAttribute.
---
`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 installBuild the library
npm run buildRun the demo app
npm run devLint
npm run lint
``