List Column Widgets

Overview

List view widgets allow you to customize the display of fields in a list view.
You can render fields using built-in widgets or by creating your own custom widgets.

For example, to display a user's name along with their avatar, you can use the built-in widget SolidShortTextAvatarWidget.

The view widget is configured using the viewWidget attribute in the list view layout JSON.

Configuring a List View Widget

{
  "name": "model-list-view",
  ...
  "layout": {
    "type": "list",
    ...
    "children": [
      {
        "type": "field",
        "attrs": {
          "name": "fullName",
          "label": "Name",
          "viewWidget": "SolidShortTextAvatarWidget",
          "isSearchable": true
        }
      }
    ]
  }
}

tip

In the above example, the viewWidget attribute specifies the widget to use in view mode. While registering a widget, you can provide an alias (like avatar) to reference it easily in the layout instead of the full component name e.g. SolidShortTextAvatarWidget.

The widgets can be:

• Built-in (provided by @solidxai/core-ui)
• Custom (created by you)

In the example above, SolidShortTextAvatarWidget is a built-in widget that displays the user's name and avatar.

Built-in Widgets

SolidX ships with a set of pre-built list column widgets. Reference them directly in your layout JSON via the viewWidget attribute — no registration required.

Field Type	Description	Widget Name	Alias
shortText	Default plain text column	DefaultTextListWidget	—
shortText	Masked text (e.g., for sensitive data)	MaskedShortTextListViewWidget	maskedShortTextList
shortText, relation	Text with a colored initials avatar badge	SolidShortTextAvatarWidget	—
shortText	Renders the field value as a thumbnail image (src URL)	SolidShortTextFieldImageListWidget	—
boolean	Boolean column display	DefaultBooleanListWidget	—
date	Renders a date field as a Published / Draft status tag	PublishedStatusListViewWidget	publishedStatus
mediaSingle	Single media thumbnail	DefaultMediaSingleListWidget	—
mediaMultiple	Multiple media thumbnails	DefaultMediaMultipleListWidget	—
relation.many2one	Many-to-one relation label	DefaultRelationManyToOneListWidget	—
relation.many2one	Many-to-one with colored initials avatar	SolidManyToOneRelationAvatarListWidget	—
relation.many2many	Many-to-many comma-separated labels	DefaultRelationManyToManyListWidget	—
relation.many2many	Many-to-many with colored initials avatars	SolidManyToManyRelationAvatarListWidget	—
relation.one2many	One-to-many relation column	DefaultRelationOneToManyListWidget	—

Creating a Custom Widget

If you need a custom display (e.g. a score widget with colors based on score values), follow these steps:

1. Create the Widget Component

ScoreWidget

import { SolidListFieldWidgetProps } from "@solidxai/core-ui";

export const ScoreWidget = ({ rowData, solidListViewMetaData, fieldMetadata, column }: SolidListFieldWidgetProps) => {
    let labelColor;
    let backgroundColor;

    if (rowData[fieldMetadata.name] >= 1 && rowData[fieldMetadata.name] <= 2) {
        labelColor = '#1DD900';
        backgroundColor = '#E7FDE4';
    } else if (rowData[fieldMetadata.name] >= 3 && rowData[fieldMetadata.name] <= 4) {
        labelColor = '#008C26';
        backgroundColor = '#E9FFEF';
    } else if (rowData[fieldMetadata.name] >= 5 && rowData[fieldMetadata.name] <= 9) {
        labelColor = '#FFA600';
        backgroundColor = '#FFF7E7';
    } else if (rowData[fieldMetadata.name] >= 10 && rowData[fieldMetadata.name] <= 16) {
        labelColor = '#E63946';
        backgroundColor = '#FDE8E9';
    } else if (rowData[fieldMetadata.name] >= 17 && rowData[fieldMetadata.name] <= 25) {
        labelColor = '#DC0600';
        backgroundColor = '#FFF2F1';
    }

    return (
        <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'flex-start' }}>
            <p style={{ color: labelColor, backgroundColor: backgroundColor, padding: '8px', borderRadius: '5px' }}>
                {rowData[fieldMetadata.name]}
            </p>
        </div>
    );
};

File Path:

/solid-ui/src/extensions/<module-name>/<model-name>/custom-widgets/ScoreWidget.tsx

2. Register the Widget

Register the widget in solid-extensions.ts so the framework recognizes it.

registerExtensionComponent(
"ScoreWidget",
 ScoreWidget,
//["score"] //alias to use in layout JSON
 );

File Path:

/solid-ui/src/extensions/solid-extensions.ts

3. Use in Layout

Now you can use ScoreWidget in your layout JSON:

{
  "type": "field",
  "attrs": {
    "name": "score",
    "label": "Score",
    "viewWidget": "ScoreWidget"
  }
}

How It Works

1. When the SolidX app loads the list view, it reads the layout configuration.
2. It checks fields that have a viewWidget attribute.
3. The corresponding widget is dynamically imported.
4. The widget is rendered for each row, with props of type SolidListFieldWidgetProps:

export type SolidListFieldWidgetProps = {
    rowData: any;
    solidListViewMetaData: any
    fieldMetadata: FieldMetadata;
    column: any;
}

export type FieldMetadata = CommonEntity & {
    id: number;
    name: string;
    displayName: string;
    // For now we have kept it flexible allowing any number of other key / value pairs...
    [key: string]: any;
}

5. The widget displays data based on custom logic you define.

Parameter Notes

• rowData: current row record being rendered.
• solidListViewMetaData: list metadata and layout context.
• fieldMetadata: model field definition for the current column.
• column: resolved column config from the active list layout.

Related

• Form View Field Widgets — built-in and custom widgets for form fields (edit and view mode)
• Kanban Field Widgets — widgets for kanban card fields
• Custom Widgets — general guide to registering extension components