@jmruthers/pace-core 0.5.136 → 0.5.137

package/src/components/DataTable/utils/__tests__/columnUtils.test.ts

@@ -0,0 +1,94 @@
+/**
+ * @file Column Utils Tests
+ * @package @jmruthers/pace-core
+ * @module Components/DataTable/Utils/__tests__
+ * @since 0.4.0
+ * 
+ * Test suite for column utility functions.
+ */
+
+import { describe, it, expect } from 'vitest';
+import React from 'react';
+import { getColumnHeaderText } from '../columnUtils';
+import type { Column } from '@tanstack/react-table';
+
+const createMockColumn = (overrides: Partial<Column<any, unknown>> = {}): Column<any, unknown> => ({
+  id: 'test-column',
+  columnDef: {
+    header: undefined,
+    accessorKey: undefined,
+  },
+  ...overrides,
+} as unknown as Column<any, unknown>);
+
+describe('getColumnHeaderText', () => {
+  it('returns header text when header is a string', () => {
+    const column = createMockColumn({
+      columnDef: {
+        header: 'Bulk Distribution',
+        accessorKey: 'item_bulkdistribution',
+      },
+    });
+
+    expect(getColumnHeaderText(column)).toBe('Bulk Distribution');
+  });
+
+  it('returns accessorKey when header is not provided', () => {
+    const column = createMockColumn({
+      columnDef: {
+        header: undefined,
+        accessorKey: 'logistics_name',
+      },
+    });
+
+    expect(getColumnHeaderText(column)).toBe('logistics_name');
+  });
+
+  it('returns column id when header and accessorKey are not provided', () => {
+    const column = createMockColumn({
+      id: 'fallback-column',
+      columnDef: {
+        header: undefined,
+        accessorKey: undefined,
+      },
+    });
+
+    expect(getColumnHeaderText(column)).toBe('fallback-column');
+  });
+
+  it('returns accessorKey when header is a function', () => {
+    const column = createMockColumn({
+      columnDef: {
+        header: () => 'Function Header',
+        accessorKey: 'unit_name',
+      },
+    });
+
+    expect(getColumnHeaderText(column)).toBe('unit_name');
+  });
+
+  it('returns accessorKey when header is a React component', () => {
+    const HeaderComponent = () => React.createElement('div', null, 'Header Component');
+    const column = createMockColumn({
+      columnDef: {
+        header: React.createElement(HeaderComponent),
+        accessorKey: 'component_column',
+      },
+    });
+
+    expect(getColumnHeaderText(column)).toBe('component_column');
+  });
+
+  it('falls back to column id when header is function and accessorKey is not provided', () => {
+    const column = createMockColumn({
+      id: 'function-header-column',
+      columnDef: {
+        header: () => 'Function Header',
+        accessorKey: undefined,
+      },
+    });
+
+    expect(getColumnHeaderText(column)).toBe('function-header-column');
+  });
+});
+

package/src/components/DataTable/utils/columnUtils.ts

@@ -0,0 +1,40 @@
+import React from 'react';
+import type { Column } from '@tanstack/react-table';
+
+/**
+ * Extracts a human-readable header text from a column definition.
+ * Used for generating filter placeholders and other UI text that should
+ * display the column header instead of the technical field name.
+ * 
+ * @param column - The TanStack Table column object
+ * @returns The header text as a string, or falls back to column.id
+ */
+export function getColumnHeaderText(column: Column<any, unknown>): string {
+  const header = column.columnDef.header;
+  
+  // If header is a string, use it directly
+  if (typeof header === 'string') {
+    return header;
+  }
+  
+  // Helper to get accessorKey safely
+  const getAccessorKey = (): string | undefined => {
+    const def = column.columnDef as any;
+    return 'accessorKey' in def && def.accessorKey ? String(def.accessorKey) : undefined;
+  };
+  
+  // If header is a function, we can't easily extract the text without calling it
+  // with a context, so we fall back to accessorKey or id
+  if (typeof header === 'function') {
+    return getAccessorKey() || column.id;
+  }
+  
+  // If header is a React component, fall back to accessorKey or id
+  if (React.isValidElement(header)) {
+    return getAccessorKey() || column.id;
+  }
+  
+  // Final fallback to accessorKey or id
+  return getAccessorKey() || column.id;
+}
+