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

Prop	Description
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

Prop	Description
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

Prop	Description
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

Prop	Description
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

Prop	Description
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