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

Boolean cell

The BooleanCell component adds a column for rendering boolean value.

<BooleanCell field="done" />

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

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

Enum cell

The EnumCell component adds a column for rendering enum values.

<EnumCell 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

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" options="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.
renderOption	undefined | (EntityAccessor) => ReactNode A function that is called to render the option.
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 one select cell

The HasOneSelectCell component adds a column for rendering has one binding.

<HasManySelectCell header="Tags" field="tags" options="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.
renderOption	undefined | (EntityAccessor) => ReactNode A function that is called to render the option.
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.

Number cell

The NumberCell component adds a column for number content.

<NumberCell field="likes" />

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

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