data-grid-ultra

This package is a full customized data grid component base on mui data grid library.

Installation

Install the package in your project directory with:

npm install data-grid-ultra

Usage

import * as React from 'react';
import { DataGrid, GridColDef } from '@mui/x-data-grid';

const columns: GridColDef<(typeof rows)[number]>[] = [
  { field: 'id', headerName: 'ID', width: 90 },
  {
    field: 'firstName',
    headerName: 'First name',
    width: 150,
    editable: true,
  },
  {
    field: 'lastName',
    headerName: 'Last name',
    width: 150,
    editable: true,
  },
  {
    field: 'age',
    headerName: 'Age',
    type: 'number',
    width: 110,
    editable: true,
  },
  {
    field: 'fullName',
    headerName: 'Full name',
    description: 'This column has a value getter and is not sortable.',
    sortable: false,
    width: 160,
    valueGetter: (value, row) => `${row.firstName || ''} ${row.lastName || ''}`,
  },
];

const rows = [
  { id: 1, lastName: 'Snow', firstName: 'Jon', age: 14 },
  { id: 2, lastName: 'Lannister', firstName: 'Cersei', age: 31 },
  { id: 3, lastName: 'Lannister', firstName: 'Jaime', age: 31 },
  { id: 4, lastName: 'Stark', firstName: 'Arya', age: 11 },
  { id: 5, lastName: 'Targaryen', firstName: 'Daenerys', age: null },
  { id: 6, lastName: 'Melisandre', firstName: null, age: 150 },
  { id: 7, lastName: 'Clifford', firstName: 'Ferrara', age: 44 },
  { id: 8, lastName: 'Frances', firstName: 'Rossini', age: 36 },
  { id: 9, lastName: 'Roxie', firstName: 'Harvey', age: 65 },
];

export default function DataGridDemo() {
  return (
      <DataGrid
        rows={rows}
        columns={columns}
        initialState={{
          pagination: {
            paginationModel: {
              pageSize: 5,
            },
          },
        }}
        pageSizeOptions={[5]}
        checkboxSelection
        disableRowSelectionOnClick
      />
  );
}

Props

| Name | Type | Default | Description | |------------------------------------|--------------------------------------------------------------------------------------------------------------------------|-----------------------------------------------------------|------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------| | columns* | Array<object> | - | Set of columns of type GridColDef[]. | | aggregationFunctions | object | GRID_AGGREGATION_FUNCTIONS | Aggregation functions available on the grid. | | aggregationModel | object | - | Set the aggregation model of the grid. | | aggregationRowsScope | 'all'| 'filtered' | "filtered" | Rows used to generate the aggregated value. If filtered, the aggregated values are generated using only the rows currently passing the filtering process. If all, the aggregated values are generated using all the rows. | | apiRef | { current: object } | - | The ref object that allows grid manipulation. Can be instantiated with useGridApiRef(). | | aria-label | string | - | The label of the Data Grid. | | aria-labelledby | string | - | The id of the element containing a label for the Data Grid. | | autoHeight | bool | false | If true, the Data Grid height is dynamic and follows the number of rows in the Data Grid. | | autoPageSize | bool | false | If true, the pageSize is calculated according to the container size and the max number of rows to avoid rendering a vertical scroll bar. | | autosizeOnMount | bool | false | If true, columns are autosized after the datagrid is mounted. | | autosizeOptions | { columns?: Array<string>, expand?: bool, includeHeaders?: bool, includeOutliers?: bool, outliersFactor?: number } | - | The options for autosize when user-initiated. | | cellModesModel | object | - | Controls the modes of the cells. | | cellSelection | bool | false | If true, the cell selection mode is enabled. | | cellSelectionModel | object | - | Set the cell selection model of the grid. | | checkboxSelection | bool | false | If true, the Data Grid will display an extra column with checkboxes for selecting rows. | | checkboxSelectionVisibleOnly | bool | false | If true, the "Select All" header checkbox selects only the rows on the current page. To be used in combination with checkboxSelection. It only works if the pagination is enabled. | | classes | object | - | Override or extend the styles applied to the component.See CSS classes API below for more details. | | clipboardCopyCellDelimiter | string | ' ' | The character used to separate cell values when copying to the clipboard. | | columnBufferPx | number | 150 | Column region in pixels to render before/after the viewport | | columnHeaderHeight | number | 56 | Sets the height in pixel of the column headers in the Data Grid. | | columnVisibilityModel | object | - | Set the column visibility model of the Data Grid. If defined, the Data Grid will ignore the hide property in GridColDef. | | defaultGroupingExpansionDepth | number | 0 | If above 0, the row children will be expanded up to this depth. If equal to -1, all the row children will be expanded. | | density | 'comfortable'| 'compact'| 'standard' | "standard" | Set the density of the Data Grid. | | detailPanelExpandedRowIds | Array<number | string> | - | The row ids to show the detail panel. | | disableAggregation | bool | false | If true, aggregation is disabled. | | disableAutosize | bool | false | If true, column autosizing on header separator double-click is disabled. | | disableChildrenFiltering | bool | false | If true, the filtering will only be applied to the top level rows when grouping rows with the treeData prop. | | disableChildrenSorting | bool | false | If true, the sorting will only be applied to the top level rows when grouping rows with the treeData prop. | | disableClipboardPaste | bool | false | If true, the clipboard paste is disabled. | | disableColumnFilter | bool | false | If true, column filters are disabled. | | disableColumnMenu | bool | false | If true, the column menu is disabled. | | disableColumnPinning | bool | false | If true, the column pinning is disabled. | | disableColumnReorder | bool | false | If true, reordering columns is disabled. | | disableColumnResize | bool | false | If true, resizing columns is disabled. | | disableColumnSelector | bool | false | If true, hiding/showing columns is disabled. | | disableColumnSorting | bool | false | If true, the column sorting feature will be disabled. | | disableDensitySelector | bool | false | If true, the density selector is disabled. | | disableEval | bool | false | If true, eval() is not used for performance optimization. | | disableMultipleColumnsFiltering | bool | false | If true, filtering with multiple columns is disabled. | | disableMultipleColumnsSorting | bool | false | If true, the sorting with multiple columns is disabled. | | disableMultipleRowSelection | bool | false (!props.checkboxSelection for MIT Data Grid) | If true, multiple selection using the Ctrl/CMD or Shift key is disabled. The MIT DataGrid will ignore this prop, unless checkboxSelection is enabled. | | disableRowGrouping | bool | false | If true, the row grouping is disabled. | | disableRowSelectionOnClick | bool | false | If true, the selection on click on a row or cell is disabled. | | disableVirtualization | bool | false | If true, the virtualization is disabled. | | editMode | 'cell' | 'row' | "cell" | Controls whether to use the cell or row editing. | | estimatedRowCount | number | - | Use if the actual rowCount is not known upfront, but an estimation is available. If some rows have children (for instance in the tree data), this number represents the amount of top level rows. Applicable only with paginationMode="server" and when rowCount="-1" | | experimentalFeatures | { warnIfFocusStateIsNotSynced?: bool } | - | Unstable features, breaking changes might be introduced. For each feature, if the flag is not explicitly set to true, then the feature is fully disabled, and neither property nor method calls will have any effect. | | filterDebounceMs | number | 150 | The milliseconds delay to wait after a keystroke before triggering filtering. | | filterMode | 'client' | 'server' | "client" | Filtering can be processed on the server or client-side. Set it to 'server' if you would like to handle filtering on the server-side. | | filterModel | { items: Array<{ field: string, id?: number | string, operator: string, value?: any }>, logicOperator?: 'and'|  'or', quickFilterExcludeHiddenColumns?: bool, quickFilterLogicOperator?: 'and' | 'or', quickFilterValues?: array } | - | Set the filter model of the Data Grid. | | getAggregationPosition | func | (groupNode) => groupNode == null ? 'footer' : 'inline' | Determines the position of an aggregated value.Signature:function(groupNode: GridGroupNode) => GridAggregationPosition | nullgroupNode The current group.Returns: Position of the aggregated value (if null, the group isn't aggregated). | | getCellClassName | func | - | Function that applies CSS classes dynamically on cells.Signature:function(params: GridCellParams) => stringparams With all properties from GridCellParams.Returns: The CSS class to apply to the cell. | | getDetailPanelContent | func | - | Function that returns the element to render in row detail.Signature:function(params: GridRowParams) => React.JSX.Elementparams With all properties from GridRowParams.Returns: The row detail element. | | getDetailPanelHeight | func | "() => 500" | Function that returns the height of the row detail panel.Signature:function(params: GridRowParams) => number | stringparams With all properties from GridRowParams.Returns: The height in pixels or "auto" to use the content height. | | getEstimatedRowHeight | func | - | Function that returns the estimated height for a row. Only works if dynamic row height is used. Once the row height is measured this value is discarded.Signature:function(params: GridRowHeightParams) => number | nullparams With all properties from GridRowHeightParams.Returns: The estimated row height value. If null or undefined then the default row height, based on the density, is applied. | | getRowClassName | func | - | Function that applies CSS classes dynamically on rows.Signature:function(params: GridRowClassNameParams) => stringparams With all properties from GridRowClassNameParams.Returns: The CSS class to apply to the row. | | getRowHeight | func | - | Function that sets the row height per row.Signature:function(params: GridRowHeightParams) => GridRowHeightReturnValueparams With all properties from GridRowHeightParams.Returns: The row height value. If null or undefined then the default row height is applied. If "auto" then the row height is calculated based on the content. | | getRowId | func | - | Return the id of a given GridRowModel. | | getRowSpacing | func | - | Function that allows to specify the spacing between rows.Signature:function(params: GridRowSpacingParams) => GridRowSpacingparams With all properties from GridRowSpacingParams.Returns: The row spacing values. | | getTreeDataPath | func | - | Determines the path of a row in the tree data. For instance, a row with the path ["A", "B"] is the child of the row with the path ["A"]. Note that all paths must contain at least one element.Signature:function(row: R) => Arrayrow The row from which we want the path.Returns: The path to the row. | | groupingColDef | func | object | - | The grouping column used by the tree data. | | headerFilterHeight | number | - | Override the height of the header filters. | | headerFilters | bool | false | If true, enables the data grid filtering on header feature. | | hideFooter | bool | false | If true, the footer component is hidden. | | hideFooterPagination | bool | false | If true, the pagination component in the footer is hidden. | | hideFooterRowCount | bool | false | If true, the row count in the footer is hidden. It has no effect if the pagination is enabled. | | hideFooterSelectedRowCount | bool | false | If true, the selected row count in the footer is hidden. | | ignoreDiacritics | bool | false | If true, the diacritics (accents) are ignored when filtering or quick filtering. E.g. when filter value is cafe, the rows with café will be visible. | | ignoreValueFormatterDuringExport | { clipboardExport?: bool, csvExport?: bool } | bool | false | If true, the Data Grid will not use valueFormatter when exporting to CSV or copying to clipboard. If an object is provided, you can choose to ignore the valueFormatter for CSV export or clipboard export. | | initialState | object | - | The initial state of the DataGridUltra. The data in it is set in the state on initialization but isn't controlled. If one of the data in initialState is also being controlled, then the control state wins. | | isCellEditable | func | - | Callback fired when a cell is rendered, returns true if the cell is editable.Signature:function(params: GridCellParams) => booleanparams With all properties from GridCellParams.Returns: A boolean indicating if the cell is editable. | | isGroupExpandedByDefault | func | - | Determines if a group should be expanded after its creation. This prop takes priority over the defaultGroupingExpansionDepth prop.Signature:function(node: GridGroupNode) => booleannode The node of the group to test.Returns: A boolean indicating if the group is expanded. | | isRowSelectable | func | - | Determines if a row can be selected.Signature:function(params: GridRowParams) => booleanparams With all properties from GridRowParams.Returns: A boolean indicating if the cell is selectable. | | keepColumnPositionIfDraggedOutside | bool | false | If true, moving the mouse pointer outside the grid before releasing the mouse button in a column re-order action will not cause the column to jump back to its original position. | | keepNonExistentRowsSelected | bool | false | If true, the selection model will retain selected rows that do not exist. Useful when using server side pagination and row selections need to be retained when changing pages. | | loading | bool | - | If true, a loading overlay is displayed. | | localeText | object | - | Set the locale text of the Data Grid. You can find all the translation keys supported in the source in the GitHub repository. | | logger | { debug: func, error: func, info: func, warn: func } | console | Pass a custom logger in the components that implements the Logger interface. | | logLevel | 'debug' | 'error' | 'info' | 'warn' | false | "error" ("warn" in dev mode) | Allows to pass the logging level or false to turn off logging. | | nonce | string | - | Nonce of the inline styles for Content Security Policy. | | onAggregationModelChange | func | - | Callback fired when the row grouping model changes.Signature:function(model: GridAggregationModel, details: GridCallbackDetails) => voidmodel The aggregated columns.details Additional details for this callback. | | onBeforeClipboardPasteStart | func | - | Callback fired before the clipboard paste operation starts. Use it to confirm or cancel the paste operation.Signature:function(params: object) => voidparams Params passed to the callback. | | onCellClick | func | - | Callback fired when any cell is clicked.Signature:function(params: GridCellParams, event: MuiEvent, details: GridCallbackDetails) => voidparams With all properties from GridCellParams.event The event object.details Additional details for this callback. | | onCellDoubleClick | func | - | Callback fired when a double click event comes from a cell element.Signature:function(params: GridCellParams, event: MuiEvent, details: GridCallbackDetails) => voidparams With all properties from GridCellParams.event The event object.details Additional details for this callback. | | onCellEditStart | func | - | Callback fired when the cell turns to edit mode.Signature:function(params: GridCellParams, event: MuiEvent) => voidparams With all properties from GridCellParams.event The event that caused this prop to be called. | | onCellEditStop | func | - | Callback fired when the cell turns to view mode.Signature:function(params: GridCellParams, event: MuiEvent) => voidparams With all properties from GridCellParams.event The event that caused this prop to be called. | | onCellKeyDown | func | - | Callback fired when a keydown event comes from a cell element.Signature:function(params: GridCellParams, event: MuiEvent, details: GridCallbackDetails) => voidparams With all properties from GridCellParams.event The event object.details Additional details for this callback. | | onCellModesModelChange | func | - | Callback fired when the cellModesModel prop changes.Signature:function(cellModesModel: GridCellModesModel, details: GridCallbackDetails) => voidcellModesModel Object containing which cells are in "edit" mode.details Additional details for this callback. | | onCellSelectionModelChange | func | - | Callback fired when the selection state of one or multiple cells changes.Signature:function(cellSelectionModel: GridCellSelectionModel, details: GridCallbackDetails) => voidcellSelectionModel Object in the shape of GridCellSelectionModel containing the selected cells.details Additional details for this callback. | | onClipboardCopy | func | - | Callback called when the data is copied to the clipboard.Signature:function(data: string) => voiddata The data copied to the clipboard. | | onClipboardPasteEnd | func | - | Callback fired when the clipboard paste operation ends. | | onClipboardPasteStart | func | - | Callback fired when the clipboard paste operation starts. | | onColumnHeaderClick | func | - | Callback fired when a click event comes from a column header element.Signature:function(params: GridColumnHeaderParams, event: MuiEvent, details: GridCallbackDetails) => voidparams With all properties from GridColumnHeaderParams.event The event object.details Additional details for this callback. | | onColumnHeaderDoubleClick | func | - | Callback fired when a double click event comes from a column header element.Signature:function(params: GridColumnHeaderParams, event: MuiEvent, details: GridCallbackDetails) => voidparams With all properties from GridColumnHeaderParams.event The event object.details Additional details for this callback. | | onColumnHeaderEnter | func | - | Callback fired when a mouse enter event comes from a column header element.Signature:function(params: GridColumnHeaderParams, event: MuiEvent, details: GridCallbackDetails) => voidparams With all properties from GridColumnHeaderParams.event The event object.details Additional details for this callback. | | onColumnHeaderLeave | func | - | Callback fired when a mouse leave event comes from a column header element.Signature:function(params: GridColumnHeaderParams, event: MuiEvent, details: GridCallbackDetails) => voidparams With all properties from GridColumnHeaderParams.event The event object.details Additional details for this callback. | | onColumnHeaderOut | func | - | Callback fired when a mouseout event comes from a column header element.Signature:function(params: GridColumnHeaderParams, event: MuiEvent, details: GridCallbackDetails) => voidparams With all properties from GridColumnHeaderParams.event The event object.details Additional details for this callback. | | onColumnHeaderOver | func | - | Callback fired when a mouseover event comes from a column header element.Signature:function(params: GridColumnHeaderParams, event: MuiEvent, details: GridCallbackDetails) => voidparams With all properties from GridColumnHeaderParams.event The event object.details Additional details for this callback. | | onColumnOrderChange | func | - | Callback fired when a column is reordered.Signature:function(params: GridColumnOrderChangeParams, event: MuiEvent<{}>, details: GridCallbackDetails) => voidparams With all properties from GridColumnOrderChangeParams.event The event object.details Additional details for this callback. | | onColumnResize | func | - | Callback fired while a column is being resized.Signature:function(params: GridColumnResizeParams, event: MuiEvent, details: GridCallbackDetails) => voidparams With all properties from GridColumnResizeParams.event The event object.details Additional details for this callback. | | onColumnVisibilityModelChange | func | - | Callback fired when the column visibility model changes.Signature:function(model: GridColumnVisibilityModel, details: GridCallbackDetails) => voidmodel The new model.details Additional details for this callback. | | onColumnWidthChange | func | - | Callback fired when the width of a column is changed.Signature:function(params: GridColumnResizeParams, event: MuiEvent, details: GridCallbackDetails) => voidparams With all properties from GridColumnResizeParams.event The event object.details Additional details for this callback. | | onDensityChange | func | - | Callback fired when the density changes.Signature:function(density: GridDensity) => voiddensity New density value. | | onDetailPanelExpandedRowIdsChange | func | - | Callback fired when the detail panel of a row is opened or closed.Signature:function(ids: Array, details: GridCallbackDetails) => voidids The ids of the rows which have the detail panel open.details Additional details for this callback. | | onExcelExportStateChange | func | - | Callback fired when the state of the Excel export changes.Signature:function(inProgress: string) => voidinProgress Indicates if the task is in progress. | | onFetchRows | func | - | Callback fired when rowCount is set and the next batch of virtualized rows is rendered.Signature:function(params: GridFetchRowsParams, event: MuiEvent<{}>, details: GridCallbackDetails) => voidparams With all properties from GridFetchRowsParams.event The event object.details Additional details for this callback. | | onFilterModelChange | func | - | Callback fired when the Filter model changes before the filters are applied.Signature:function(model: GridFilterModel, details: GridCallbackDetails) => voidmodel With all properties from GridFilterModel.details Additional details for this callback. | | onMenuClose | func | - | Callback fired when the menu is closed.Signature:function(params: GridMenuParams, event: MuiEvent<{}>, details: GridCallbackDetails) => voidparams With all properties from GridMenuParams.event The event obje