PayloadCMS ColoredSelectCell

field-example.ts

{
  name: "jobStatus",
  type: "select",
  required: true,
  defaultValue: "toBeAssigned",
  options: [
      {
          label: "To Be Assigned",
          value: "toBeAssigned",
      },
      {
          label: "Ready To Go",
          value: "readyToGo",
      },
      {
          label: "In Progress",
          value: "inProgress",
      },
      {
          label: "Completed",
          value: "completed",
      },
      {
          label: "Cancelled",
          value: "cancelled",
      },
  ],
  custom: {
      colors: {
          toBeAssigned: {
              pillStyle: "dark",
          },
          readyToGo: {
              pillStyle: "error",
          },
          inProgress: {
              pillStyle: "warning",
          },
          completed: {
              pillStyle: "success",
          },
          cancelled: {
              pillStyle: "light",
          },
      },
  },
  admin: {
      components: {
          Cell: ColoredSelectCell,
      },
  },
},

index.scss

.colored-select-cell {
  display: flex;
  flex-direction: row;
  gap: 0.25rem;
}

index.ts

import { Props as PillProps } from "payload/dist/admin/components/elements/Pill/types";
import { Props } from "payload/dist/admin/components/views/collections/List/Cell/types";
import React from "react";
import { useTranslation } from "react-i18next";

import { OptionObject, SelectField, optionsAreObjects } from "payload/types";
import { getTranslation } from "payload/utilities";

import { Pill } from "payload/components";
import "./index.scss";

interface ColoredSelectValue {
    label: string;
    value: string;
    pillStyle: PillProps["pillStyle"];
}

const Index: React.FC<Props & { field: SelectField; cellData: string | string[] }> = (props) => {
    const { field, cellData } = props;
    const { i18n } = useTranslation();
    const findLabel = (items: string[]): ColoredSelectValue[] =>
        items.map((i) => {
            const colorConfig = field.custom?.colors[i];
            const found = (field.options as OptionObject[]).filter((f: OptionObject) => f.value === i)?.[0]?.label;
            return {
                label: getTranslation(found, i18n),
                value: i,
                pillStyle: colorConfig?.pillStyle ?? "light-gray",
            };
        });

    let content = [];
    if (optionsAreObjects(field.options)) {
        content = Array.isArray(cellData)
            ? findLabel(cellData) // hasMany
            : findLabel([cellData]);
    } else {
        content = Array.isArray(cellData) ? cellData : [cellData];
    }

    return (
        <div className="colored-status-cell">
            {content.map(({ label, value, pillStyle }) => (
                <Pill key={value} draggable={false} pillStyle={pillStyle}>
                    {label}
                </Pill>
            ))}
        </div>
    );
};

export default Index;

Example: