Columns Configuration

This interface is the crux of all configurations in the grid. DetailsList Columns are of type 'IColumn' Editable DetailsList Columns are of type IColumnConfig, a custom interface that extends IColumn

export interface IColumnConfig extends IColumn {
    key: string; // column key
    text: string; // column display text
    editable?: boolean; // are column fields editable?
    dataType?: string; // datatype for column values
    includeColumnInExport?: boolean; // include values of this column in export
    includeColumnInSearch?: boolean; // include values of this column in grid text search
    inputType?: EditControlType; // EditControlType value for the column. This can be TextField, Multiline TextField, DatePicker
    onChange?: any; // onChange Hook to trigger a callback when the value of the column changes
    maxLength?: number; // in case of TextField, the maximum no. of characters the column allows
};

Implementing the column configuration using the above interface type is the same as in the standard DetailsList.

export const GridColumnConfig : IColumnConfig[] = 
[
    {
        key: 'id',
        name: 'ID',
        text: 'ID',
        editable: false,
        dataType: 'number',
        minWidth: 100,
        maxWidth: 100,
        isResizable: true,
        includeColumnInExport: true,
        includeColumnInSearch: true,
    },
    {
        key: 'name',
        name: 'Name',
        text: 'Name',
        editable: true,
        dataType: 'string',
        minWidth: 100,
        maxWidth: 100,
        isResizable: true,
        includeColumnInExport: true,
        includeColumnInSearch: true,
    }
]