MGH Components

Metrolina Greenhouses (MGH) component library for React applications.

This package provides reusable UI components built on MUI, including the MGH Data Grid and related helpers.

Install

Using npm:

npm install mgh-components

Using pnpm:

pnpm add mgh-components

Using yarn:

yarn add mgh-components

Peer Dependencies

This package expects the following peer dependencies to be installed in your app:

• react
• react-dom
• @mui/material
• @mui/x-data-grid-premium
• @mui/x-date-pickers-pro
• @emotion/styled

Usage

Basic example with MGHDataGrid:

import React from 'react';
import { MGHDataGrid } from 'mgh-components';

const rows = [
  { id: 1, itemId: 'A-100', locationId: 'LOC-1', enterCount: 10 },
  { id: 2, itemId: 'B-200', locationId: 'LOC-2', enterCount: 20 },
];

const columns = [
  { field: 'itemId', headerName: 'Item', flex: 1 },
  { field: 'locationId', headerName: 'Location', flex: 1 },
  { field: 'enterCount', headerName: 'Count', type: 'number', flex: 1 },
];

export default function ExampleGrid() {
  return (
    <MGHDataGrid
      header="Finished Goods - On Hand"
      rows={rows}
      columns={columns}
      noRowsText="No finished goods availability submissions found within your filters."
      boxSx={{ height: '70vh' }}
      initialState={{
        pinnedColumns: { left: ['itemId'], right: ['enterCount'] },
      }}
    />
  );
}

Theme-aware no-rows overlay

If you use useSettingsContext in your app, pass it into the no-rows overlay so the component can read your theme mode.

import { MGHDataGrid } from 'mgh-components';
import { useSettingsContext } from 'src/contexts/SettingsContext';

export default function ExampleGridWithTheme() {
  return (
    <MGHDataGrid
      header="Finished Goods - On Hand"
      rows={[]}
      columns={[]}
      slotProps={{
        noRowsOverlay: {
          text: 'No finished goods availability submissions found within your filters.',
          useSettingsContext,
        },
      }}
    />
  );
}

Components

• MGHDataGrid
• MGHGridToolbar
• CustomNoRowsOverlay