React KendoGrid custom column component is ignored and not displayed

Question

For frequently repeating Kendo React DataGrid columns I would like to create a custom column component e.g. (ColumnCreatedAt, ColumnCreatedBy, ColumnModifiedAt, ColumnModifiedBy, ...).

<Grid data={...} {...dataState} sortable={true} pageable={true} pageSize={8} resizable={true} dataItemKey={'_id'} selectable={{
                      enabled: true,
                      drag: false,
                      cell: false,
                      mode: "single",
                  }}>

<Column field="native" filter={"text"} title={i18n.__('languages.native')}/>
<Column field="published" filter={"boolean"} title={i18n.__('languages.published')}/>
<Column field="createdAt" filter={"date"} title={i18n.__('languages.createdAt')} format="{0:d}"/>
<Column field="createdBy" title={i18n.__('languages.createdBy')} cell={KendoUserCell}
                        filterCell={KendoUserFilterCell}
                        columnMenu={props => (<DefaultGridColumnMenu values={users} {...props}/>)}/>
<Column field="modifiedAt" filter={"date"} title={i18n.__('languages.modifiedAt')} format="{0:d}"/>
<Column field="modifiedBy" title={i18n.__('languages.modifiedBy')}/>

            </Grid>

I would like to simplify the use of the grid and prepare frequently used columns in predefined components, for example as follows:

<Grid ...>

<Column field="native" filter={"text"} title={i18n.__('languages.native')}/>
<Column field="published" filter={"boolean"} title={i18n.__('languages.published')}/>
<ColumnCreatedAt />
<ColumnCreatedBy />
<ColumnModifiedAt />
<ColumnModifiedBy />

</Grid>

For this purpose I have prepared the components as follows:

import React from "react";
import {GridColumn} from "@progress/kendo-react-grid";

const ColumnCreatedAt = ():React.ReactElement => {
    return (<GridColumn field={'createdAt'} title={'grid.columnCreatedAt'} format="{0:d}"/>);
};

export default ColumnCreatedAt;

And the problem is, that my custom components (ColumnCreatedAt, ColumnModifiedAt, ...) are not displayed. The probable reason is, that the kendo Grid expects component of type GridColumn and gets my custom column component of type e.g. 'ColumnCreatedAt', which is ignored. Does exists any way to solve this problem to be able to use my custom column components, or I always MUST using only original Kendo's 'GridColumn' component to render columns?

==== Edit: ==== I almost found the solution, but I don't know, how can I add new React props into existing component.

"use strict";
import React from "react";
import {GridColumn as Column} from "@progress/kendo-react-grid";
import {i18n} from "meteor/universe:i18n";

const GridColumnDate = function(_):React.ReactElement {
    return null;
};

GridColumnDate.displayName = Column.displayName;

GridColumnDate.defaultProps = {
    ...Column.defaultProps,

    // --- How to move this fields as default component props?
    field: "createdAt",
    title: i18n.__('grid.columnCreatedAt'),
    format: "{0:d}",
    filter: "date"
    // ---
};

GridColumnDate.propTypes = Column.propTypes;

export default GridColumnDate;

React KendoGrid custom column component is ignored and not displayed

0 Answers0