Renders a complex Data Grid component.

Parameters:
NameTypeDescription
propsobject

Component props.

Properties
NameTypeDescription
columnsobject

Array of column objects. Supply: component, key, props, sortable (optional), hideAt (optional). Key is used to match data keys for cells.

columnRowAttributesobject

Custom attributes for the column row.

columnRowClassesstring | Array | object

Custom classes for the column row.

columnStylePropsobject

Style props for the column.

customAttributesobject

Custom attributes for the component

customClassesstring | Array | object

Custom classes for the component.

dataobject

The data for the component.

dataPerPagenumber

The number of data rows to show per page.

dataRowAttributesobject

Custom attributes for the data row.

dataRowClassesstring | Array | object

Custom classes for the data row.

dataRowMinHeightstring

The minimum height for the data row.

EmptyImageJSX.Element

The image to show when there is no data.

emptyMessageAttributesboolean

Custom attributes for the empty message.

emptyMessageClassesstring | Array | object

Custom classes for the empty message.

equalGridboolean

Whether the grid should be equal.

gridControlWrapperClassesstring | Array | object

Custom classes for the grid control wrapper.

handleGridClicksfunction

Passed handler for grid clicks if the field type supports it.

highlightHoverboolean

Whether the grid should highlight a row on hover.

highlightSelectedboolean

Whether the grid should highlight a selected row.

i18nobject

Language strings for the component.

Properties
NameTypeDescription
emptyMessageI18nstring

The empty message for the data grid.

emptyTitleI18nstring

The empty title for the data grid.

gridHeadingI18nstring

The heading for the data grid.

idstring

The ID for the component.

isLoadingboolean

Whether the data grid is loading.

maintainHeightboolean

Whether the grid should maintain height at all times.

modulesArray

The modules for the data grid.

moduleAttributesobject

Custom attributes for the modules.

setGridDatafunction

Passed handler for field changes if the field type supports it.

showColumnsboolean

Whether to show the column row(s).

showColumnsInFooterboolean

Whether the column row should be in the footer as well.

sortableboolean

Whether the grid should be sortable.

spacingstring | number | Array | object

The spacing for the component, as a string, number, array, or object.

titleAttributesobject

Custom attributes for the title.

titleClassesstring | Array | object

Custom classes for the title.

useAjaxboolean

Whether to use ajax for the data grid.

refobject | null

Ref to the component.

Since
  • 3.3.0
Returns:

The DataGrid component.

Type: 
JSX.Element
Example
import DataGrid from '@gravityforms/components/react/admin/modules/DataGrid';

return <DataGrid />;