Optional adapterThe adapter is used to integrate the grid with a UI library. Please see the documentation of the LibraryAdapter interface for more information. Please see https://reactdatagrid.com/examples?example=Material_Adapter for an example. Please see https://reactdatagrid.com/examples?example=Material_Filter for an example. Please see https://reactdatagrid.com/examples?example=Material_Editors for an example.
Optional behaviorsThe behaviors array is used to enable TreeShaking. We have organized larger features into behaviors. For example, the filter behavior is used to enable filtering. Edit behavior is used to enable editing. The behaviors array is used to specify which behaviors to enable. As of now, the following features are organized into their own behaviors to reduce the default bundle size.
Please see the documentation for each behavior for more information on how to use them.
Optional cellSimilar to cellStyleFunction, the cellAttrsFunction is used to customize the attributes of a cell. The function should return an object of html attributes. Please see the https://reactdatagrid.com/examples?example=Cell_Formatting
Optional cellSimilar to cellStyleFunction, the cellClassNamesFunction is used to customize the class names of a cell. The function should return a string of class names. Please see the https://reactdatagrid.com/examples?example=Cell_Formatting
Optional cellThe cellDisabledFunction is used to control the disabled state of a cell. If the function returns true, the cell will be disabled.
Optional cellcellStyleFunction is used to customize the style of a cell. The function should return a style object. Please see the https://reactdatagrid.com/examples?example=Cell_Formatting
Optional columnOptions to customize the column menu. Please see the https://reactdatagrid.com/examples?example=Column_Menu for an example. Please see the documentation for the ColumnMenuOptions interface for more information.
undefined
Optional columnsThe columns to displayed in the grid. IF not provided, the columns will be generated from the data. For grouped columns, you can use the children property to define the sub columns. The children property can be used recursively to define sub columns.
Optional contextThe contextInfo is the internal context of the grid. This is used to store information about the grid that is used internally. For the most part, you will use the gridApi to access the grid's context. However, if you need to access the context directly, you can do so here. Please see the documentation of the GridContext interface for more information.
Optional contextOptions to customize the context menu. Please see the https://reactdatagrid.com/examples?example=Context_Menu for an example. Please see the documentation for the ContextMenuOptions interface for more information.
undefined
The dataProvider is the main data source for the grid. It is an array of objects. Each object represents a row in the grid. If you dont specify columns, the grid will automatically create columns for each property in the object. The column name will be the property name.
Optional displayChanges the order in which the grid displays the filter,header,body,footer,and toolbar. The order in which the various sections of the grid are laid out.
Defaults to toolbar,header,filter,body,footer
Optional dividerThe dividerOptions property is used to customize the divider behavior of the grid. Please see the documentation for the DividerOptions interface for more information. The grid has 5 primary sections: Header, Filter, Body, Footer, and Toolbar. The dividerOptions property can be used to customize the divider above of each section.
Optional enableThe enableActiveCellHighlight flag is used to control the active cell highlight. The active cell is the cell that is currently under the mouse. You can use the euxdt-dg-active-cell class to customize the active cell highlight.
Optional enableThis flag controls the column menu. The column menu is shown when the user clicks on the column menu icon in the header row. The column menu allows the user to show/hide columns, sort, and filter, among other things. You can customize the column menu by using the columnMenuRenderer option, or specifying custom columnMenuItems. This flag is present both at the grid level and at the column level. You can disable the column menu completely by setting this flag to false at the grid level. You can disable the column menu for a specific column by setting this flag to false at the column level. Please see the https://reactdatagrid.com/examples?example=Column_Menu for an example.
Optional enableThis flag controls the context menu. The context menu is shown when the user right clicks on a cell. The context menu allows the user to perform actions on the cell. You can customize the context menu by using the contextMenuOptions Please see the https://reactdatagrid.com/examples?example=Context_Menu for an example.
Optional enableFor hierarchical data, enableDynamicLevels is used to control the number of levels that are rendered in the grid. If the max nest depth of the data is known upfront, you can set this flag to false, and the grid will render all the levels as defined by your nextLevel configuration. If the max nest depth is not known upfront, you can set this flag to true, and the grid will calculate the max nest depth, and render the levels as needed. Please see the https://reactdatagrid.com/examples?example=Grouping for an example.
Optional enableEnables the filter.
Optional enableFlag to control floating header rows. These are used in conjunction with hierachical data, and are used to show the parent rows when the user scrolls the grid. You can customize the floating header rows by using the floatingRowsOptions. Note that these are different from lockedDataProvider, which is used to show a locked container above the main grid. The floating header rows are used to show the parent rows when the user scrolls the grid. Please see the https://reactdatagrid.com/examples?example=Nested_Grid for an example.
Optional enableThe enableFocusCellHighlight flag is used to control the focus cell highlight. The focus cell is the cell that is currently selected. You can use the euxdt-dg-focus-cell class to customize the focus cell highlight.
Optional enableEnables the footer
Optional enableEnable height auto adjust. This is used to adjust the height of the grid based on the number of rows. Please see: https://reactdatagrid.com/examples/?example=Auto_Sizing_Grid
Optional enableEnables paging in the grid.
Optional enableEnables the toolbar.
Optional eventThe event bus is used to communicate between the grid and other components. The grid will emit events on the event bus, and other components can listen to these events. Documentation for the event bus lists all the events that are emitted by the grid. Please see the https://reactdatagrid.com/examples?example=Event_Bus for an example.
undefined
Optional filterThe Filter/Page/Sort Mode. Can be either "server" or "client". In client mode, the grid will take care of paging, sorting and filtering once the dataprovider is set. In server mode, the grid will fire a com.flexicious.grids.events.FilterPageSortChangeEvent named filterPageSortChange that should be used to construct an appropriate query to be sent to the backend.
Optional filterThe filterRowHeight is used to set the height of the filter row. The filter row is the row that contains the filter cells. You can set this either on a grid level, or globally by setting Constants.DEFAULT_FILTER_HEIGHT
Optional floatingOptions to customize the floating header rows. Please see the https://reactdatagrid.com/examples?example=Nested_Grid for an example. Also see teh documentation for the FloatingRowsOptions interface, as well as the documentation for the enableFloatingHeaderRows flag.
undefined
Optional footerThe footerRowHeight is used to set the height of the footer row. The footer row is the row that contains the footer cells. You can set this either on a grid level, or globally by setting Constants.DEFAULT_FOOTER_HEIGHT
Optional gridThe sections to be displayed in the grid. The sections are the header, body, footer, and the toolbar.
Optional groupThe groupHeaderOptions is used to customize the group header. Please see the documentation of the GroupHeaderOptions interface for more information. Please see https://reactdatagrid.com/examples?example=Group_Headers for an example. Please see https://reactdatagrid.com/examples?example=Large_Dynamic_Grid for an example.
Optional headerThe headerRowHeight is used to set the height of the header row. The header row is the row that contains the column headers. You can set this either on a grid level, or globally by setting Constants.DEFAULT_HEADER_HEIGHT
Optional heightThe maximum height of the grid when enableHeightAutoAdjust is set to true.
Optional horizontalThe horizontalScroll property is used to control the horizontal scroll mode of the grid. The grid supports two horizontal scroll modes.
Optional isWhen set to true, the grid will show a loading indicator. The loading indicator will be shown until the dataProvider is set. This is useful when the dataProvider is loaded asynchronously. The default behavior of the loading indicator is to show a skeleton grid. This can be changed by setting the euxdt-dg-skeleton::after css class definition in your css file. Please see the getting started guide for more information on how to customize the css.
false
Optional lockedThe lockedDataProvider is an array of objects. Each object represents a row in the grid. The lockedDataProvider is used to create a locked container above the main grid. The rows in the lockedDataProvider will be visible when the user scrolls the main grid. The lockedDataProvider is useful for creating summary sections, like a a median,average, max row. A demonstration is available at https://reactdatagrid.com/examples?example=Locked_Rows
Optional nextThe nextLevel property is used to defined hierarchical grids. If you know upfront how deep the hierarchy is, you can define the nextLevel property recursively. If you do not know how deep the hierarchy is, you can use the enableDynamicLevels property to dynamically add the nextLevel property.
Optional nodeSimilar to nodeStyleFunction, the nodeAttrsFunction is used to customize the attributes of a node. The function should return an object of html attributes.
Optional nodeSimilar to nodeStyleFunction, the nodeClassNamesFunction is used to customize the class names of a node. The function should return a string of class names.
Optional nodeThe nodePropsFunction is used to customize the props of a node. The function should return an object of React props. This is used in our material and bootstrap adapters to customize the props of the node. Please see any of our Material demos for an example at https://reactdatagrid.com/examples
Optional nodeThe nodeRenderer is a function that is called for each row in the grid. The function is called with a RendererProps object as a parameter. This can be used to customize the rendering of each node. The grid is a tree of nodes, starting at the root grid node all the way to the leaf nodes that are the components inside the cells. This function is mostly used by our library adapters to fully customize the rendering of the grid. Please see the https://github.com/flexicious/euxdt-example/src/adapters/material-adapter.tsx in the demo repo for an example.
undefined
Optional nodeThe nodeDisabledFunction is used to control the disabled state of a node. If the function returns true, the node will be disabled. Please see https://reactdatagrid.com/examples?example=Nested_Grid for an example
Optional paginationThese options control the pagesize, and the allowed pagesizes, and whether the pagesize can be changed.
Optional recyclingThe recyclingOptions property is used to customize the recycling behavior of the grid. Please see the documentation for the HorizontalRecyclingOptions interface for more information. This property can be used to control which sections of the grid are recycled. By default, the grid will recycle all the sections.
Optional rowSimilar to rowStyleFunction, the rowAttrsFunction is used to customize the attributes of a row. The function should return an object of html attributes.
Optional rowSimilar to rowStyleFunction, the rowClassNamesFunction is used to customize the class names of a row. The function should return a string of class names. Please see the https://reactdatagrid.com/examples?example=Cell_Formatting
Optional rowThe rowDisabledFunction is used to control the disabled state of a row. If the function returns true, the row will be disabled.
Optional rowThe rowHeight to be used. You can customize the rowHeight by setting it on the grid or by setting the Constants.GRID_CONSTANTS.DEFAULT_ROW_HEIGHT to a different value.
Optional rowrowStyleFunction is used to customize the style of a row. The function should return a style object. Please see the https://reactdatagrid.com/examples?example=Cell_Formatting or https://reactdatagrid.com/examples?example=Nested_Grid for an example. for an example.
Optional selectionThe selectionMode is used to control the selection mode of the grid. The grid supports single row selection, multiple row selection, single cell selection, and multiple cell selection. Please see the documentation for the GridSelectionMode enum for more information. Please see the https://reactdatagrid.com/examples?example=Selection_Modes for an example.
Optional selectionThe selectionOptions is used to customize the selection behavior of the grid. Please see the documentation for the GridSelectionOptions interface for more information.
Optional serverserverInfo is used to enable server side data fetching. Please see the documentation of the ServerInfo interface for more information. Please see https://reactdatagrid.com/examples?example=Server_Paging and Nested https://reactdatagrid.com/examples?example=Lazy_Load_Grid for an example.
Optional settingsThe settings options are used to customize the settings menu. Please see the documentation for the SettingsOptions interface for more information. Please see the https://reactdatagrid.com/examples?example=Persistent_Settings for an example.
Optional sortThe options to control the sorting. This allows you to control whether or not multiple columns can be sorted and lets you specify the default sort.
Optional textThe textMeasurerElement is an element that is used to measure the width of the text. This is used to calculate the width of the columns. When you use column width mode fitToContent, the grid attepmts to approximate the width of the text by measuring the width of the text. You can use textMeasurerElement to pass an element that will be used to measure the width of the text. This is useful if you need very precise width measurements.
Optional textIn some cases, the textWidthMeasurer may not be able to measure the width of the text exactly. For example, if you are using a custom font, the textWidthMeasurer may not be able to measure the width of the text exactly. In this case, you can use the textWidthAdjustment to adjust the width of the text.
Optional texttextWidthMeasurer is a function that is used to measure the width of text. This is used to calculate the width of the columns. When you use column width mode fitToContent, the grid attepmts to approximate the width of the text by measuring the width of the text. If you are using a custom font, you can pass a function that will measure the width of the text using your custom font or if you need extremely precise width measurements. Please note, that this function is called for every cell in the grid, so it should be fast.
Optional toolbarThe toolbarHeight is used to set the height of the toolbar. The toolbar is the row that contains the toolbar cells. You can set this either on a grid level, or globally by setting Constants.DEFAULT_TOOLBAR_HEIGHT
Optional toolbarControls the various sections of the toolbar.
The uniqueIdentifierOptions is used to specify the unique identifier for each row in the grid. The unique identifier is used to identify the row when the user selects a row. The unique identifier can be a string, or a function that returns a string. If the unique identifier is a string, it is the name of the property in the dataProvider object that contains the unique identifier.
Optional variablevariableRowHeightOptions is used to enable variable row heights. Please see the documentation of the VariableRowHeightOptions interface for more information. Please see https://reactdatagrid.com/examples?example=Variable_Row_Height for an example.
Generated using TypeDoc
This is the main interface for the grid. It contains all the options that can be passed to the grid. The only required options are the dataProvider and the uniqueIdentifierOptions.