Data grid

The data grid in Contember is simply a table. It allows you to display data from different entities, link to them and freely modify the data display in the cell. The data grid automatically creates filters (by data type) and paginate over each column for larger numbers of records.

Data Grid

The DataGrid is a wrapper for cell components.

<DataGrid
  entities="Article"
  itemsPerPage={50}
>
  <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
itemsPerPage	Number The number of items you want to display on one page. Default is "all of them".

Cells

Data grid in Contember supports these cells:

• Boolean cell
  The BooleanCell renders yes/no for boolean values. And filters by them + N/A.
• Date cell
  The DateCell renders date values in a human readable format and filters by choosing from - to.
• Enum cell
  The EnumCell renders enum values in a human readable format and filters by the enum values.
• Generic cell
  The GenericCell is useful to render any data you want in this cell.
• Has many select cell
  The HasManySelectCell renders a all the values of the related entity and filters by them.
• Has one select cell
  The HasOneSelectCell renders a single value of the related entity and filters by them.
• Number cell
  The NumberCell renders numbers and add filters for numbers (equals, greater than, smaller than)
• Text cell
  The TextCell renders text values and filters by them (contains, doesn't contain, matches exactly, starts with, ends with).

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.

<HasOneSelectCell header="Category" field="category" options="Category.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