@izumisy-tailor/tailor-data-viewer 0.1.49 → 0.1.51

package/docs/custom-renderers.md

@@ -128,7 +128,11 @@ const DataViewer = createDataViewer({
         
         // Table-specific renderers
         "task:status": StatusBadge({
-          colorMap: { todo: "gray", "in-progress": "blue", done: "green" },
+          valuesMap: {
+            todo: { color: "gray" },
+            "in-progress": { color: "blue" },
+            done: { color: "green" },
+          },
         }),
       },
       byFieldType: {
@@ -181,7 +185,11 @@ export const DataViewer = createDataViewer({
         "*:*Email": EmailLink,
         "*:id": TruncatedId,
         "orders:status": StatusBadge({
-          colorMap: { pending: "yellow", approved: "green", rejected: "red" },
+          valuesMap: {
+            pending: { color: "yellow" },
+            approved: { color: "green" },
+            rejected: { color: "red" },
+          },
         }),
       },
       byFieldType: {
@@ -207,17 +215,17 @@ const { EmailLink, StatusBadge, BooleanIcon, TruncatedId } = builtInRenderers;
       byFieldName: {
         // Table-specific renderers
         "orders:status": StatusBadge({
-          colorMap: {
-            "pending": "yellow",
-            "approved": "green",
-            "rejected": "red",
+          valuesMap: {
+            "pending": { color: "yellow" },
+            "approved": { color: "green" },
+            "rejected": { color: "red" },
           },
         }),
         "invoices:status": StatusBadge({
-          colorMap: {
-            "draft": "gray",
-            "sent": "blue",
-            "paid": "green",
+          valuesMap: {
+            "draft": { color: "gray" },
+            "sent": { color: "blue" },
+            "paid": { color: "green" },
           },
         }),
 
@@ -296,22 +304,28 @@ byFieldType: {
 
 ### StatusBadge
 
-Factory function that creates a colored badge renderer based on value-to-color mapping.
+Factory function that creates a colored badge renderer with custom display labels.
 
 ```tsx
 StatusBadge({
-  colorMap: {
-    "pending": "yellow",      // Preset color
-    "approved": "green",
-    "rejected": "red",
-    "pending*": "yellow",     // Prefix match: pending, pending_review
-    "*approved": "green",     // Suffix match: manager_approved
-    "*error*": "red",         // Contains match: validation_error
+  valuesMap: {
+    "pending": { color: "yellow", label: "保留中" },
+    "approved": { color: "green", label: "承認済み" },
+    "rejected": { color: "red", label: "却下" },
+    "pending*": { color: "yellow" },      // Prefix match: pending, pending_review
+    "*approved": { color: "green" },      // Suffix match: manager_approved
+    "*error*": { color: "red" },          // Contains match: validation_error
   },
-  defaultColor: "gray",       // Default for unmatched values
+  defaultColor: "gray",                   // Default for unmatched values
 })
 ```
 
+**Options:**
+- `valuesMap?: Record<string, StatusBadgeValue>` — Mapping from value to color and label (supports wildcard patterns)
+  - `color?: BadgeColor` — Badge color (preset name or custom colors)
+  - `label?: string` — Display label (if not specified, the raw value is displayed)
+- `defaultColor?: BadgeColor` — Default color for unmatched values (default: "gray")
+
 **Preset Colors:**
 - `gray`: #F3F4F6 bg, #374151 text
 - `red`: #FEE2E2 bg, #991B1B text
@@ -322,13 +336,13 @@ StatusBadge({
 **Custom Colors:**
 ```tsx
 StatusBadge({
-  colorMap: {
-    "custom_status": { bg: "#E0F2FE", text: "#0369A1" },
+  valuesMap: {
+    "custom_status": { color: { bg: "#E0F2FE", text: "#0369A1" } },
   },
 })
 ```
 
-**Pattern Priority:**
+**Pattern Priority (for valuesMap keys):**
 1. Exact match (`"approved"`)
 2. Prefix match (`"approved*"`)
 3. Suffix match (`"*approved"`)

package/docs/labels.md

@@ -20,6 +20,8 @@ type Labels = Record<string, string>;
 |------------|-------------|---------|
 | `tableName:fieldName` | Field label for specific table | `"orders:status"` → "Order Status" |
 | `*:fieldName` | Field label across all tables (wildcard) | `"*:createdAt"` → "Created" |
+| `tableName:fieldName=value` | Value label for specific field | `"task:status=pending"` → "保留中" |
+| `*:fieldName=value` | Value label across all tables (wildcard) | `"*:status=active"` → "有効" |
 | `tableName` | Table name label | `"orders"` → "Orders" |
 | `$:uiKey` | Built-in UI text override | `"$:refresh"` → "Refresh" |
 
@@ -37,6 +39,11 @@ For nested relation fields (`getLabel("task:assignee.name")`):
 4. `labels["*:name"]` — target field wildcard
 5. `"name"` — fallback to target field name
 
+For value labels (`getValueLabel("task", "status", "pending")`):
+1. `labels["task:status=pending"]` — exact match (highest)
+2. `labels["*:status=pending"]` — wildcard match
+3. `"pending"` — fallback to string representation
+
 For UI labels (`getLabel("$:refresh")`):
 1. `labels["$:refresh"]` — custom override (highest)
 2. `DEFAULT_UI_LABELS["$:refresh"]` — built-in default
@@ -148,34 +155,51 @@ Access labels within components using the `useLabels` hook:
 import { useLabels } from "@izumisy-tailor/tailor-data-viewer/component";
 
 function MyComponent() {
-  const { getLabel } = useLabels();
+  const { getLabel, getValueLabel } = useLabels();
   
   return (
     <div>
       <h2>{getLabel("orders")}</h2>           {/* Table label */}
       <span>{getLabel("orders:status")}</span> {/* Field label */}
       <button>{getLabel("$:refresh")}</button> {/* UI label */}
+      <span>{getValueLabel("task", "status", "pending")}</span> {/* Value label */}
     </div>
   );
 }
 ```
 
-## Using resolveLabel Function
+## Using resolveLabel and resolveValueLabel Functions
 
 For use outside of React components or context:
 
 ```tsx
-import { resolveLabel } from "@izumisy-tailor/tailor-data-viewer/component";
+import { resolveLabel, resolveValueLabel } from "@izumisy-tailor/tailor-data-viewer/component";
 
-const labels = { "orders:status": "Order Status" };
+const labels = {
+  "orders:status": "Order Status",
+  "task:status=pending": "保留中",
+  "*:status=active": "有効",
+};
 
-// Resolve a label
+// Resolve a field label
 const label = resolveLabel(labels, "orders:status");
 // → "Order Status"
 
 // Fallback to field name
 const fallback = resolveLabel(labels, "orders:unknown");
 // → "unknown"
+
+// Resolve a value label
+const valueLabel = resolveValueLabel(labels, "task", "status", "pending");
+// → "保留中"
+
+// Wildcard value label
+const wildcardValueLabel = resolveValueLabel(labels, "order", "status", "active");
+// → "有効"
+
+// Value parameter is optional (returns empty string when omitted)
+const emptyLabel = resolveValueLabel(labels, "task", "status");
+// → ""
 ```
 
 ## Built-in UI Labels (DEFAULT_UI_LABELS)

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@izumisy-tailor/tailor-data-viewer",
   "private": false,
-  "version": "0.1.49",
+  "version": "0.1.51",
   "type": "module",
   "description": "Flexible data viewer component for Tailor Platform",
   "files": [

package/src/component/built-in-renderers.test.tsx

@@ -230,3 +230,181 @@ describe("FileImageThumbnail", () => {
     });
   });
 });
+
+describe("StatusBadge", () => {
+  const { StatusBadge } = builtInRenderers;
+
+  it("renders '-' for null value", () => {
+    const renderer = StatusBadge();
+    const props = createMockProps({ value: null });
+    render(<>{renderer(props)}</>);
+    expect(screen.getByText("-")).toBeInTheDocument();
+  });
+
+  it("renders '-' for empty string value", () => {
+    const renderer = StatusBadge();
+    const props = createMockProps({ value: "" });
+    render(<>{renderer(props)}</>);
+    expect(screen.getByText("-")).toBeInTheDocument();
+  });
+
+  it("renders value as badge", () => {
+    const renderer = StatusBadge();
+    const props = createMockProps({ value: "active" });
+    render(<>{renderer(props)}</>);
+    expect(screen.getByText("active")).toBeInTheDocument();
+  });
+
+  it("applies color from valuesMap", () => {
+    const renderer = StatusBadge({
+      valuesMap: { active: { color: "green" } },
+    });
+    const props = createMockProps({ value: "active" });
+    render(<>{renderer(props)}</>);
+
+    const badge = screen.getByText("active");
+    expect(badge).toHaveStyle({ backgroundColor: "#D1FAE5", color: "#065F46" });
+  });
+
+  it("applies custom color from valuesMap", () => {
+    const renderer = StatusBadge({
+      valuesMap: { active: { color: { bg: "#ff0000", text: "#ffffff" } } },
+    });
+    const props = createMockProps({ value: "active" });
+    render(<>{renderer(props)}</>);
+
+    const badge = screen.getByText("active");
+    expect(badge).toHaveStyle({ backgroundColor: "#ff0000", color: "#ffffff" });
+  });
+
+  it("applies defaultColor when value not in valuesMap", () => {
+    const renderer = StatusBadge({
+      valuesMap: { active: { color: "green" } },
+      defaultColor: "red",
+    });
+    const props = createMockProps({ value: "unknown" });
+    render(<>{renderer(props)}</>);
+
+    const badge = screen.getByText("unknown");
+    expect(badge).toHaveStyle({ backgroundColor: "#FEE2E2", color: "#991B1B" });
+  });
+
+  describe("valuesMap with label", () => {
+    it("displays label from valuesMap instead of raw value", () => {
+      const renderer = StatusBadge({
+        valuesMap: {
+          pending: { label: "保留中" },
+          active: { label: "有効" },
+        },
+      });
+      const props = createMockProps({ value: "pending" });
+      render(<>{renderer(props)}</>);
+      expect(screen.getByText("保留中")).toBeInTheDocument();
+      expect(screen.queryByText("pending")).not.toBeInTheDocument();
+    });
+
+    it("displays raw value when valuesMap does not contain the value", () => {
+      const renderer = StatusBadge({
+        valuesMap: {
+          pending: { label: "保留中" },
+        },
+      });
+      const props = createMockProps({ value: "unknown" });
+      render(<>{renderer(props)}</>);
+      expect(screen.getByText("unknown")).toBeInTheDocument();
+    });
+
+    it("combines label and color in valuesMap", () => {
+      const renderer = StatusBadge({
+        valuesMap: {
+          active: { color: "green", label: "有効" },
+        },
+      });
+      const props = createMockProps({ value: "active" });
+      render(<>{renderer(props)}</>);
+
+      const badge = screen.getByText("有効");
+      expect(badge).toBeInTheDocument();
+      expect(badge).toHaveStyle({
+        backgroundColor: "#D1FAE5",
+        color: "#065F46",
+      });
+    });
+
+    it("uses defaultColor when only label is specified", () => {
+      const renderer = StatusBadge({
+        valuesMap: {
+          pending: { label: "保留中" },
+        },
+        defaultColor: "yellow",
+      });
+      const props = createMockProps({ value: "pending" });
+      render(<>{renderer(props)}</>);
+
+      const badge = screen.getByText("保留中");
+      expect(badge).toHaveStyle({
+        backgroundColor: "#FEF3C7",
+        color: "#92400E",
+      });
+    });
+  });
+
+  describe("wildcard valuesMap patterns", () => {
+    it("matches prefix pattern", () => {
+      const renderer = StatusBadge({
+        valuesMap: { "active*": { color: "green" } },
+      });
+      const props = createMockProps({ value: "active_state" });
+      render(<>{renderer(props)}</>);
+
+      const badge = screen.getByText("active_state");
+      expect(badge).toHaveStyle({
+        backgroundColor: "#D1FAE5",
+        color: "#065F46",
+      });
+    });
+
+    it("matches suffix pattern", () => {
+      const renderer = StatusBadge({
+        valuesMap: { "*_active": { color: "green" } },
+      });
+      const props = createMockProps({ value: "is_active" });
+      render(<>{renderer(props)}</>);
+
+      const badge = screen.getByText("is_active");
+      expect(badge).toHaveStyle({
+        backgroundColor: "#D1FAE5",
+        color: "#065F46",
+      });
+    });
+
+    it("matches contains pattern", () => {
+      const renderer = StatusBadge({
+        valuesMap: { "*active*": { color: "green" } },
+      });
+      const props = createMockProps({ value: "is_active_now" });
+      render(<>{renderer(props)}</>);
+
+      const badge = screen.getByText("is_active_now");
+      expect(badge).toHaveStyle({
+        backgroundColor: "#D1FAE5",
+        color: "#065F46",
+      });
+    });
+
+    it("applies label from wildcard match", () => {
+      const renderer = StatusBadge({
+        valuesMap: { "error*": { color: "red", label: "エラー" } },
+      });
+      const props = createMockProps({ value: "error_500" });
+      render(<>{renderer(props)}</>);
+
+      // wildcard match でもlabelが設定されていれば表示される
+      const badge = screen.getByText("エラー");
+      expect(badge).toHaveStyle({
+        backgroundColor: "#FEE2E2",
+        color: "#991B1B",
+      });
+    });
+  });
+});

package/src/component/built-in-renderers.tsx

@@ -28,12 +28,22 @@ export interface CustomColor {
  */
 export type BadgeColor = PresetColor | CustomColor;
 
+/**
+ * Value configuration for StatusBadge
+ */
+export interface StatusBadgeValue {
+  /** Badge color (preset name or custom colors) */
+  color?: BadgeColor;
+  /** Display label (if not specified, the raw value is displayed) */
+  label?: string;
+}
+
 /**
  * Options for StatusBadge renderer
  */
 export interface StatusBadgeOptions {
   /**
-   * Mapping from value to color
+   * Mapping from value to color and label configuration
    *
    * Key format (wildcard support):
    * - "pending"    → exact match
@@ -42,10 +52,12 @@ export interface StatusBadgeOptions {
    * - "*pending*"  → contains match
    *
    * Value format:
-   * - "green"                      → preset color
-   * - { bg: "#xxx", text: "#xxx" } → custom color
+   * - { color: "green", label: "有効" }     → both color and label
+   * - { color: "green" }                    → color only
+   * - { label: "保留中" }                    → label only
+   * - { color: { bg: "#xxx", text: "#xxx" } } → custom color
    */
-  colorMap?: Record<string, BadgeColor>;
+  valuesMap?: Record<string, StatusBadgeValue>;
   defaultColor?: BadgeColor;
 }
 
@@ -115,38 +127,62 @@ function matchPattern(value: string, pattern: string): boolean {
   }
 }
 
-function resolveStatusColor(
-  value: unknown,
-  options: StatusBadgeOptions,
-): CustomColor {
-  const { colorMap = {}, defaultColor = "gray" } = options;
-  const strValue = String(value ?? "");
-
-  // Priority: exact → prefix → suffix → contains
+/**
+ * Find matching key from valuesMap with wildcard support
+ * Priority: exact → prefix → suffix → contains
+ */
+function findMatchingKey(
+  valuesMap: Record<string, StatusBadgeValue>,
+  strValue: string,
+): string | undefined {
   // 1. Exact match
-  if (colorMap[strValue]) {
-    return resolveColor(colorMap[strValue]);
+  if (valuesMap[strValue]) {
+    return strValue;
   }
 
   // 2. Prefix match (pattern*)
-  const prefixKey = Object.keys(colorMap).find(
+  const prefixKey = Object.keys(valuesMap).find(
     (k) => k.endsWith("*") && !k.startsWith("*") && matchPattern(strValue, k),
   );
-  if (prefixKey) return resolveColor(colorMap[prefixKey]);
+  if (prefixKey) return prefixKey;
 
   // 3. Suffix match (*pattern)
-  const suffixKey = Object.keys(colorMap).find(
+  const suffixKey = Object.keys(valuesMap).find(
     (k) => k.startsWith("*") && !k.endsWith("*") && matchPattern(strValue, k),
   );
-  if (suffixKey) return resolveColor(colorMap[suffixKey]);
+  if (suffixKey) return suffixKey;
 
   // 4. Contains match (*pattern*)
-  const containsKey = Object.keys(colorMap).find(
+  const containsKey = Object.keys(valuesMap).find(
     (k) => k.startsWith("*") && k.endsWith("*") && matchPattern(strValue, k),
   );
-  if (containsKey) return resolveColor(colorMap[containsKey]);
+  if (containsKey) return containsKey;
 
-  return resolveColor(defaultColor);
+  return undefined;
+}
+
+function resolveStatusConfig(
+  value: unknown,
+  options: StatusBadgeOptions,
+): { color: CustomColor; label: string } {
+  const { valuesMap = {}, defaultColor = "gray" } = options;
+  const strValue = String(value ?? "");
+
+  const matchedKey = findMatchingKey(valuesMap, strValue);
+  if (matchedKey) {
+    const config = valuesMap[matchedKey];
+    return {
+      color: config.color
+        ? resolveColor(config.color)
+        : resolveColor(defaultColor),
+      label: config.label ?? strValue,
+    };
+  }
+
+  return {
+    color: resolveColor(defaultColor),
+    label: strValue,
+  };
 }
 
 // =============================================================================
@@ -266,7 +302,7 @@ const ArrayBadges: CellRenderer = ({ value }) => {
 
 /**
  * Factory function to create a StatusBadge renderer with custom options
- * Renders values as colored badges based on colorMap
+ * Renders values as colored badges based on valuesMap configuration
  */
 function StatusBadge(options: StatusBadgeOptions = {}): CellRenderer {
   return ({ value }) => {
@@ -274,15 +310,14 @@ function StatusBadge(options: StatusBadgeOptions = {}): CellRenderer {
       return <span className="text-muted-foreground">-</span>;
     }
 
-    const strValue = String(value);
-    const color = resolveStatusColor(strValue, options);
+    const { color, label } = resolveStatusConfig(value, options);
 
     return (
       <span
         className="inline-flex items-center rounded-full px-2 py-0.5 text-xs font-medium"
         style={{ backgroundColor: color.bg, color: color.text }}
       >
-        {strValue}
+        {label}
       </span>
     );
   };

package/src/component/data-table.tsx

@@ -272,7 +272,7 @@ export function DataTable(props: DataTableProps = {}) {
 
   return (
     <>
-      <div className="rounded-md border">
+      <div className="rounded-md border bg-background">
         <Table>
           <TableHeader>
             <TableRow>

package/src/component/hooks/use-labels.ts

@@ -1,69 +1,18 @@
 import { useCallback } from "react";
 import { useDataViewer } from "../contexts";
-import type { Labels } from "../types";
-import { DEFAULT_UI_LABELS } from "../ui-labels";
+import { resolveLabel, resolveValueLabel } from "../label-resolver";
 
-/**
- * Resolve a label from a key
- *
- * @param labels Labels configuration
- * @param key Label key (e.g., "orders:status", "*:createdAt", "orders", "$:refresh")
- * @returns Resolved label with wildcard fallback for "table:field" format
- *
- * Resolution order for UI labels (`$:*` format):
- * 1. labels["$:key"]
- * 2. DEFAULT_UI_LABELS["$:key"]
- *
- * Resolution order for "tableName:fieldName" format:
- * 1. labels["tableName:fieldName"]
- * 2. labels["*:fieldName"] (wildcard fallback)
- * 3. "fieldName" (default)
- *
- * Resolution order for other formats (e.g., "tableName", "fieldName"):
- * 1. labels[key]
- * 2. key itself (default, no wildcard fallback)
- *
- * @example
- * ```tsx
- * resolveLabel(labels, "$:refresh")      // labels["$:refresh"] ?? DEFAULT_UI_LABELS["$:refresh"]
- * resolveLabel(labels, "orders:status")  // labels["orders:status"] ?? labels["*:status"] ?? "status"
- * resolveLabel(labels, "orders")         // labels["orders"] ?? "orders"
- * ```
- */
-export function resolveLabel(labels: Labels | undefined, key: string): string {
-  // If key exists in labels, return it
-  if (labels?.[key]) {
-    return labels[key];
-  }
-
-  // Handle UI labels ($:* format) - fallback to DEFAULT_UI_LABELS
-  if (key.startsWith("$:")) {
-    return DEFAULT_UI_LABELS[key] ?? key;
-  }
-
-  const colonIndex = key.indexOf(":");
-  if (colonIndex >= 0) {
-    const fieldName = key.slice(colonIndex + 1);
-    // For "table:field" format, try wildcard fallback
-    const wildcardKey = `*:${fieldName}`;
-    if (labels?.[wildcardKey]) {
-      return labels[wildcardKey];
-    }
-    return fieldName;
-  }
-
-  // For keys without colon, return key itself (no wildcard fallback)
-  return key;
-}
+// Re-export for backward compatibility
+export { resolveLabel, resolveValueLabel };
 
 /**
  * Hook to get labels from DataViewer context
  *
- * @returns Object with getLabel function
+ * @returns Object with getLabel and getValueLabel functions
  *
  * @example
  * ```tsx
- * const { getLabel } = useLabels();
+ * const { getLabel, getValueLabel } = useLabels();
  *
  * // Field label
  * <span>{getLabel(`${tableName}:${field.name}`)}</span>
@@ -73,6 +22,9 @@ export function resolveLabel(labels: Labels | undefined, key: string): string {
  *
  * // Cross-table field label
  * <span>{getLabel(`*:${field.name}`)}</span>
+ *
+ * // Value label (e.g., enum display name)
+ * <span>{getValueLabel(tableName, fieldName, value)}</span>
  * ```
  */
 export function useLabels() {
@@ -85,5 +37,12 @@ export function useLabels() {
     [labels],
   );
 
-  return { getLabel, labels };
+  const getValueLabel = useCallback(
+    (tableName: string, fieldName: string, value?: unknown): string => {
+      return resolveValueLabel(labels, tableName, fieldName, value);
+    },
+    [labels],
+  );
+
+  return { getLabel, getValueLabel, labels };
 }

package/src/component/index.ts

@@ -55,6 +55,7 @@ export type {
   PresetColor,
   CustomColor,
   BadgeColor,
+  StatusBadgeValue,
   StatusBadgeOptions,
   FileImageThumbnailOptions,
   BuiltInRenderers,
@@ -103,7 +104,7 @@ export type {
 export { isFileValue, OPERATOR_LABELS, OPERATORS_BY_FIELD_TYPE } from "./types";
 
 // Label utilities
-export { resolveLabel } from "./label-resolver";
+export { resolveLabel, resolveValueLabel } from "./label-resolver";
 export { useLabels } from "./hooks/use-labels";
 export { DEFAULT_UI_LABELS } from "./ui-labels";
 export type { UILabelKey } from "./ui-labels";

package/src/component/label-resolver.test.ts

@@ -1,5 +1,5 @@
 import { describe, it, expect } from "vitest";
-import { resolveLabel } from "./label-resolver";
+import { resolveLabel, resolveValueLabel } from "./label-resolver";
 import type { Labels } from "./types";
 
 describe("resolveLabel", () => {
@@ -141,3 +141,89 @@ describe("resolveLabel", () => {
     });
   });
 });
+
+describe("resolveValueLabel", () => {
+  it("returns value label when exact match exists", () => {
+    const labels: Labels = {
+      "task:status=pending": "保留中",
+      "task:status=active": "有効",
+    };
+    expect(resolveValueLabel(labels, "task", "status", "pending")).toBe(
+      "保留中",
+    );
+    expect(resolveValueLabel(labels, "task", "status", "active")).toBe("有効");
+  });
+
+  it("falls back to wildcard match", () => {
+    const labels: Labels = {
+      "*:status=completed": "完了",
+    };
+    expect(resolveValueLabel(labels, "task", "status", "completed")).toBe(
+      "完了",
+    );
+    expect(resolveValueLabel(labels, "order", "status", "completed")).toBe(
+      "完了",
+    );
+  });
+
+  it("falls back to string representation when no label found", () => {
+    const labels: Labels = {};
+    expect(resolveValueLabel(labels, "task", "status", "unknown")).toBe(
+      "unknown",
+    );
+  });
+
+  it("handles undefined labels", () => {
+    expect(resolveValueLabel(undefined, "task", "status", "pending")).toBe(
+      "pending",
+    );
+  });
+
+  it("handles null and undefined values", () => {
+    const labels: Labels = {};
+    expect(resolveValueLabel(labels, "task", "status", null)).toBe("");
+    expect(resolveValueLabel(labels, "task", "status", undefined)).toBe("");
+  });
+
+  it("handles omitted value parameter", () => {
+    const labels: Labels = {};
+    expect(resolveValueLabel(labels, "task", "status")).toBe("");
+  });
+
+  it("prefers exact match over wildcard", () => {
+    const labels: Labels = {
+      "task:status=pending": "タスク保留中",
+      "*:status=pending": "保留中（共通）",
+    };
+    expect(resolveValueLabel(labels, "task", "status", "pending")).toBe(
+      "タスク保留中",
+    );
+    expect(resolveValueLabel(labels, "order", "status", "pending")).toBe(
+      "保留中（共通）",
+    );
+  });
+
+  it("handles numeric values", () => {
+    const labels: Labels = {
+      "task:priority=1": "低",
+      "task:priority=2": "中",
+      "task:priority=3": "高",
+    };
+    expect(resolveValueLabel(labels, "task", "priority", 1)).toBe("低");
+    expect(resolveValueLabel(labels, "task", "priority", 2)).toBe("中");
+    expect(resolveValueLabel(labels, "task", "priority", 3)).toBe("高");
+  });
+
+  it("handles boolean values", () => {
+    const labels: Labels = {
+      "task:isActive=true": "アクティブ",
+      "task:isActive=false": "非アクティブ",
+    };
+    expect(resolveValueLabel(labels, "task", "isActive", true)).toBe(
+      "アクティブ",
+    );
+    expect(resolveValueLabel(labels, "task", "isActive", false)).toBe(
+      "非アクティブ",
+    );
+  });
+});

package/src/component/label-resolver.ts

@@ -86,3 +86,56 @@ export function resolveLabel(labels: Labels | undefined, key: string): string {
   // For keys without colon, return key itself (no wildcard fallback)
   return key;
 }
+
+/**
+ * Resolve a value label (e.g., enum value display name)
+ *
+ * @param labels Labels configuration
+ * @param tableName Table name
+ * @param fieldName Field name
+ * @param value The actual value to resolve a label for (optional)
+ * @returns Resolved label or the original value as string
+ *
+ * Resolution order:
+ * 1. labels["tableName:fieldName=value"] - exact match
+ * 2. labels["*:fieldName=value"] - wildcard match
+ * 3. String(value) - fallback to string representation
+ *
+ * @example
+ * ```tsx
+ * const labels = {
+ *   "task:status=pending": "保留中",
+ *   "task:status=active": "有効",
+ *   "*:status=completed": "完了",
+ * };
+ *
+ * resolveValueLabel(labels, "task", "status", "pending")    // → "保留中"
+ * resolveValueLabel(labels, "task", "status", "active")     // → "有効"
+ * resolveValueLabel(labels, "order", "status", "completed") // → "完了" (wildcard)
+ * resolveValueLabel(labels, "task", "status", "unknown")    // → "unknown"
+ * resolveValueLabel(labels, "task", "status")               // → ""
+ * ```
+ */
+export function resolveValueLabel(
+  labels: Labels | undefined,
+  tableName: string,
+  fieldName: string,
+  value?: unknown,
+): string {
+  const strValue = String(value ?? "");
+
+  // 1. Exact match: tableName:fieldName=value
+  const exactKey = `${tableName}:${fieldName}=${strValue}`;
+  if (labels?.[exactKey]) {
+    return labels[exactKey];
+  }
+
+  // 2. Wildcard match: *:fieldName=value
+  const wildcardKey = `*:${fieldName}=${strValue}`;
+  if (labels?.[wildcardKey]) {
+    return labels[wildcardKey];
+  }
+
+  // 3. Fallback to string representation
+  return strValue;
+}

package/src/component/ui/table.tsx

@@ -4,7 +4,12 @@ import * as React from "react";
 
 import { cn } from "../lib/utils";
 
-function Table({ className, ...props }: React.ComponentProps<"table">) {
+interface TableProps extends React.ComponentProps<"table"> {
+  /** Table layout algorithm. Defaults to "fixed" to respect explicit column widths. */
+  tableLayout?: "fixed" | "auto";
+}
+
+function Table({ className, tableLayout = "fixed", ...props }: TableProps) {
   return (
     <div
       data-slot="table-container"
@@ -12,7 +17,11 @@ function Table({ className, ...props }: React.ComponentProps<"table">) {
     >
       <table
         data-slot="table"
-        className={cn("w-full caption-bottom text-sm", className)}
+        className={cn(
+          "w-full caption-bottom text-sm",
+          tableLayout === "fixed" ? "table-fixed" : "table-auto",
+          className,
+        )}
         {...props}
       />
     </div>