feat(eo-next-table): support columns:cellStatus

bricks/advanced/docs/eo-next-table.md

@@ -1037,3 +1037,45 @@ context:
         }))
       %>
 ```
+
+### Cell status
+
+```yaml preview
+- brick: eo-next-table
+  properties:
+    columns:
+      - dataIndex: name
+        key: name
+        title: Name
+        cellStatus:
+          dataIndex: age
+          mapping:
+            - value: 18
+              leftBorderColor: green
+            - value: 20
+              leftBorderColor: blue
+            - value: 28
+              leftBorderColor: red
+      - dataIndex: age
+        key: age
+        title: Age
+      - dataIndex: address
+        key: address
+        title: Address
+    dataSource:
+      pageSize: 5
+      page: 1
+      list:
+        - key: 0
+          name: Jack
+          age: 18
+          address: Guangzhou
+        - key: 1
+          name: Alex
+          age: 20
+          address: Shanghai
+        - key: 3
+          name: Sam
+          age: 28
+          address: Shenzhen
+```

bricks/advanced/src/next-table/Table.tsx

@@ -35,6 +35,7 @@ import {
   defaultPaginationConfig,
   defaultRowSelectionConfig,
   getAllKeys,
+  getCellStatusStyle,
   getValueByDataIndex,
   isPlainObject,
   naturalComparator,
@@ -313,6 +314,7 @@ export const NextTableComponent = forwardRef(function LegacyNextTableComponent(
                 : undefined,
               style: {
                 ...col.cellStyle,
+                ...getCellStatusStyle(record, col),
                 verticalAlign: col.verticalAlign,
               },
             };

bricks/advanced/src/next-table/interface.ts

@@ -42,6 +42,17 @@ export interface Column
   cellStyle?: CSSProperties;
   /** 头部单元格样式 */
   headerStyle?: CSSProperties;
+  cellStatus?: CellStatus;
+}
+
+export interface CellStatus {
+  dataIndex?: string;
+  mapping: CellStatusMap[];
+}
+
+export interface CellStatusMap {
+  value: unknown;
+  leftBorderColor: string;
 }
 
 export interface CellConfig extends WithUseBrick {

bricks/advanced/src/next-table/utils.spec.ts

@@ -1,4 +1,4 @@
-import { naturalComparator } from "./utils";
+import { getCellStatusStyle, naturalComparator } from "./utils";
 
 describe("naturalComparator", () => {
   test("default order (ascend)", () => {
@@ -13,3 +13,47 @@ describe("naturalComparator", () => {
     expect(list).toEqual(["35", 23, 12, 6, 1, null, undefined]);
   });
 });
+
+describe("getCellStatusStyle", () => {
+  const record = { status: "active" };
+  const col = {
+    dataIndex: "status",
+    cellStatus: {
+      dataIndex: "status",
+      mapping: [
+        { value: "active", leftBorderColor: "green" },
+        { value: "inactive", leftBorderColor: "red" },
+      ],
+    },
+  };
+
+  test("should return correct style for matched value", () => {
+    const style = getCellStatusStyle(record, col);
+    expect(style).toEqual({
+      boxShadow: "inset 4px 0 var(--theme-green-color)",
+    });
+  });
+
+  test("should return null if no cellStatus", () => {
+    const colWithoutCellStatus = { dataIndex: "status" };
+    const style = getCellStatusStyle(record, colWithoutCellStatus);
+    expect(style).toBeNull();
+  });
+
+  test("should return null if no match found", () => {
+    const recordWithNoMatch = { status: "unknown" };
+    const style = getCellStatusStyle(recordWithNoMatch, col);
+    expect(style).toBeNull();
+  });
+
+  test("should return correct style for custom color", () => {
+    const colWithCustomColor = {
+      ...col,
+      cellStatus: {
+        mapping: [{ value: "active", leftBorderColor: "#123456" }],
+      },
+    };
+    const style = getCellStatusStyle(record, colWithCustomColor);
+    expect(style).toEqual({ boxShadow: "inset 4px 0 #123456" });
+  });
+});

bricks/advanced/src/next-table/utils.ts

@@ -153,3 +153,36 @@ export function naturalComparator(
 
   return a == b ? 0 : a > b ? 1 : -1;
 }
+
+const THEME_COLORS = [
+  "green",
+  "red",
+  "blue",
+  "orange",
+  "cyan",
+  "purple",
+  "geekblue",
+  "gray",
+];
+
+export function getCellStatusStyle(
+  record: RecordType,
+  col: Column
+): React.CSSProperties | null {
+  if (!col.cellStatus) {
+    return null;
+  }
+  const dataIndex = col.cellStatus.dataIndex ?? col.dataIndex;
+  const value = getValueByDataIndex(record, dataIndex);
+
+  const match = col.cellStatus.mapping?.find((m) => m.value === value);
+  if (!match) {
+    return null;
+  }
+
+  const color = THEME_COLORS.includes(match.leftBorderColor)
+    ? `var(--theme-${match.leftBorderColor}-color)`
+    : match.leftBorderColor;
+
+  return { boxShadow: `inset 4px 0 ${color}` };
+}