Documentation

Our DataGrid is based on MUI's DataGrid, and you can find the documentation here: https://mui.com/x/react-data-grid/

We've added some custom props :

• to the DataGrid component
• in the slot toolbar of the DataGrid component to mimic Virtual Table toolbar

Custom DataGrid props

Name	Type	Required	Default	Description
rowContextMenu	object	No		Configuration object to enable and customize a context menu shown when right-clicking a row.

rowContextMenu

Name	Type	Required	Default	Description
canOpen	function	No		Callback that determines whether the context menu should open. Receives the selected rows as an argument and should return true to allow the menu or false to prevent it.
actions	array	Yes		Array of action definitions to be displayed in the context menu.

rowContextMenu.actions

Name	Type	Required	Default	Description
key	string	Yes		Unique identifier for the action.
label	string	Yes		Text label displayed for the action.
disabled	boolean | function	No	false	Disables the action if true. If a function is provided, it will be called with the selected rows and should return a boolean.
onClick	function	Yes		Callback triggered when the action is clicked. Receives the selected rows as an argument.

Custom SlotProps.toolbar props

Name	Type	Required	Default	Description
customButtons	array	No		Display custom buttons to the left of the right-side button area.
deleteAction	object	No		Enables deletion and displays the delete button after the custom buttons.
bulkEditAction	object	No		Enables bulk editing and displays save and cancel buttons after the custom buttons.
exportHandlers	array	No		Enables the Export toolbar button with a dropdown menu. See Export (CSV and Excel) below.
showSelectedCount	boolean	No	true	Show selected count

customButtons

Name	Type	Required	Default	Description
key	string | number	Yes		Unique identifier for the button, also used to generate the data-id attribute.
type	'text' | 'icon'	No	'text'	Defines whether the button displays text or an icon.
- text	string	Yes		The button label, used when type is set to 'text'.
- icon	component	Yes		The icon component to display when type is set to 'icon'.
color	ButtonProps['color']	No	'primary'	Sets the button color, based on MUI's color palette.
disabled	boolean	No	false	If true, the button is disabled.
onClick	function	Yes		Callback triggered on button click. Receives selected row IDs and selected row data as arguments.

deleteAction

Name	Type	Required	Default	Description
disabled	boolean	No	false	If true, the button is disabled.
onDelete	function	Yes		Callback triggered on button click. Receives selected row IDs and returns a boolean indicating success, used to automatically unselect the rows if success.

bulkEditAction

Name	Type	Required	Default	Description
disabled	boolean	No	false	If true, the button is disabled.
onBulkEditSave	function	Yes		Callback triggered on button click. Receives selected row IDs and new rows and returns a boolean indicating success, used to automatically unselect the rows if success or cancel modification if not.

menuActions

Name	Type	Required	Default	Description
key	string	Yes		Unique identifier for the action, also used to generate the data-id attribute.
label	string	Yes		The action label.
icon	component	No		The icon component to display.
color	string	No	'primary.main'	The action color.
disabled	boolean | function	No	false	Disables the action if true. If a function is provided, it will be called with the selected rows and should return a boolean.
onClick	function	Yes		Callback triggered when the action is clicked. Receives the selected rows as an argument.

exportHandlers

Enables an Export button in the toolbar. Clicking it opens a dropdown menu (MUI default) with the export options you provide. Each option is defined by a handler that calls the grid API or your custom export logic.

Name	Type	Required	Description
type	'csv' | 'xls'	Yes	Export format identifier. 'csv' for CSV, 'xls' for Excel (.xlsx).
handler	function	Yes	Callback that performs the export. Typically calls apiRef.current?.exportDataAsCsv() or exportDataAsXlsx().

Example:

import DataGridDS, {
  attachExcelExportToApi,
  type ExportHandler
} from '@myunisoft/design-system';
import { useGridApiRef } from '@mui/x-data-grid-pro';

function MyGrid() {
  const apiRef = useGridApiRef();
  const fileName = 'my-export';

  const exportHandlers: ExportHandler[] = [
    {
      type: 'csv',
      handler: () => apiRef.current?.exportDataAsCsv({ fileName })
    },
    {
      type: 'xls',
      handler: () => {
        const api = apiRef.current;
        (api as typeof api & { exportDataAsXlsx?: (opts?: { fileName?: string }) => void })
          ?.exportDataAsXlsx?.({ fileName });
      }
    }
  ];

  return (
    <DataGridDS
      apiRef={apiRef}
      columns={columns}
      rows={rows}
      slotProps={{ toolbar: { exportHandlers } }}
    />
  );
}

---

Export (CSV and Excel)

• CSV: MUI DataGrid Pro provides CSV export via the grid API (exportDataAsCsv). In your exportHandlers, pass a handler that calls apiRef.current?.exportDataAsCsv({ fileName }) to download the grid data as a .csv file.

• Excel (.xlsx): MUI DataGrid Pro does not provide Excel export. The design system adds it:

  • In the toolbar: If you include 'xls' in exportHandlers with a handler that calls exportDataAsXlsx, the toolbar uses our internal Excel export (via ExcelJS) to download the grid data as a .xlsx file.
  • Programmatic use: You can attach an exportDataAsXlsx method to the grid API. Import attachExcelExportToApi from the package and call it with the grid's apiRef:

import DataGridDS, { attachExcelExportToApi } from '@myunisoft/design-system';
import { useGridApiRef } from '@mui/x-data-grid-pro';

function MyGrid() {
  const apiRef = useGridApiRef();
  // DataGridDS calls attachExcelExportToApi internally when the grid is ready.
  // Or call it yourself: attachExcelExportToApi(apiRef, 'my-file');
  return (
    <DataGridDS apiRef={apiRef} columns={columns} rows={rows} />
  );
}
// Then elsewhere: apiRef.current?.exportDataAsXlsx({ fileName: 'my-export' });

attachExcelExportToApi(apiRef, fileName?) adds exportDataAsXlsx(options?: { fileName?: string }) to the grid API. The default file name is the one you pass or 'export'. The actual export is implemented in the DataGrid utils and uses the grid's getDataAsCsv plus ExcelJS to produce the .xlsx file.