Customization of Search Results Table

The record search results are displayed in a table. It is possible to change the appearance of the table cells: add a background, change the text color, etc. (Figure 1).

Figure 1. Recolored text in table cell

Implementation example: Re-coloring the text of a table cell into red

let React = window.UnidataReact.React;

export interface ISearchColumn extends IAbstractModel {
    displayName: StringField;
    description: StringField;
    helperText: StringField;
    displayable: BooleanField;
    searchable: BooleanField;
    order: IntegerField;
    searchMorphologically: BooleanField;
    children: ModelCollection<ISearchColumn>;
    width: IntegerField;
    typeValue: StringField<null>;
}

interface IProps {
    record: SearchHit;
    namespaceId: NamespaceId;
    entityName: string;
    column: ISearchColumn;
}

class CellView extends React.Component<IProps> {
    render() {

        const field = this.props.record.preview.find((item) => item.field === this.props.column.name.getValue());

        if (field === undefined) {
            return null;
        }
        const values = field.values.getValue();

        return (
            <div style={{color: 'red'}}>
                {values.join(', ')}
            </div>
        );
    }
}

export default {
    type: 'RENDER_CELL', // custom extension type. Required to specify this value to override the appearance of the cell
    moduleId: 'search-table-transform-value-lookup', // string - unique identifier of the module, you can enter another name
    active: true, // flag - module is active? In most cases, leave it true
    system: false, // flag - module is system? leave it false
    resolver: () => { // display extension?
        return true;
    },
    component: CellView // extension component
}