Skip to main content

Data grid

Data grid#

The DataGrid component is a wrapper for cell components. It is used to display data in a grid.

<DataGrid entities="Article">
<TextCell header="Title" field="title" />
<TextCell header="Author" field="author.name" />
</DataGrid>

Props#

PropDescription

entities

string

The name of the entity. You can use query language (Qualified entity list) to filter the entities.

Required

Date cell#

The DateCell component adds a column for rendering date (including filtering by date range and sorting).

<DateCell header="Created at" field="createdAt" />

Props#

PropDescription

field

string

The name of the column in Contember schema where data is stored.

Required

header

undefined | string

Column's header

shrunk

undefined | boolean

If true column will try to be as narrow as possible given rendered data in the column.

canBeHidden

undefined | boolean

If false, the column can not be hidden. It is true by default.

disableOrder

undefined | boolean

If true, the column cannot be ordered

headerJustification

undefined | Justification

The justification of the column header

initialOrder

undefined | DataGridOrderDirection

The initial order of the column

Generic cell#

The GenericCell component is a generic wrapper for cell content.

<GenericCell />

Props#

PropDescription

header

undefined | string

Column's header

shrunk

undefined | boolean

If true column will try to be as narrow as possible given rendered data in the column.

canBeHidden

undefined | boolean

If false, the column can not be hidden. It is true by default.

Has many select cell#

The HasManySelectCell component adds a column for rendering has many binding.

<HasManySelectCell header="Tags" field="tags" option="Tag.name" />

Props#

PropDescription

field

string

The name of the column in Contember schema where data is stored.

Required

options

string | { label: ReactNode, value: OptionallyVariableFieldValue, description: ReactNode, searchKeywords: string | undefined }[]

The options for the field. You can use query language to filter the entities.

header

undefined | string

Column's header

shrunk

undefined | boolean

If true column will try to be as narrow as possible given rendered data in the column.

canBeHidden

undefined | boolean

If false, the column can not be hidden. It is true by default.

Text cell#

The TextCell component is a wrapper for text content.

<TextCell field="name" />

Props#

PropDescription

field

string

The name of the column in Contember schema where data is stored.

Required

header

undefined | string

Column's header

shrunk

undefined | boolean

If true column will try to be as narrow as possible given rendered data in the column.

canBeHidden

undefined | boolean

If false, the column can not be hidden. It is true by default.

disableOrder

undefined | boolean

If true, the column cannot be ordered

headerJustification

undefined | Justification

The justification of the column header

initialOrder

undefined | DataGridOrderDirection

The initial order of the column