data-grid-extra

This package is a full customized data grid component base on mui data grid library. Skip installation and read usage

Installation

Install the package in your project directory with:

npm install data-grid-extra

Info

This is an additional helper library for DataGridUltra. So instead of this use

npm install data-grid-ultra

if you don't want to use DataGridUltra you still can use DataGridExtra.

Props

| Name | Type | Default | Description | |------------------------------------|--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|------------------------------------------------------|------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------| | columns* | Array<object> | - | Set of columns of type GridColDef[]. | | 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. | | 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. | | 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. | | 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) | If true, multiple selection using the Ctrl/CMD or Shift key is disabled. Default will ignore this prop, unless checkboxSelection is enabled. | | 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, the feature will be fully disabled and any property / method call will not 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. | | 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