@ornery/ui-grid-react 0.1.7-hotfix-1 → 0.1.8

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ornery/ui-grid-react",
-  "version": "0.1.7-hotfix-1",
+  "version": "0.1.8",
   "description": "React wrapper for @ornery/ui-grid-core",
   "main": "dist/index.js",
   "module": "dist/index.mjs",
@@ -34,7 +34,7 @@
   },
   "scripts": {
     "start": "vite serve demo --config demo/vite.config.ts",
-    "build": "npm run build --prefix ../ui-grid-core && tsup src/index.ts --format esm,cjs --tsconfig tsconfig.build.json --external react --external react-dom --external @ornery/ui-grid-core && tsc -p tsconfig.dts.json",
+    "build": "npm run build --prefix ../ui-grid-core && tsup src/index.ts --format esm,cjs --tsconfig tsconfig.build.json --external react --external react-dom --external @ornery/ui-grid-core && tsc -p tsconfig.dts.json && node -e \"require('fs').copyFileSync('src/ui-grid.css','dist/ui-grid.css')\"",
     "test": "vitest run",
     "test:watch": "vitest"
   }

package/src/UiGrid.test.tsx

@@ -3,7 +3,12 @@ import { render, screen, fireEvent, act } from '@testing-library/react';
 import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest';
 import { UiGrid } from './UiGrid';
 import type { UiGridProps } from './UiGrid';
-import type { GridOptions, UiGridApi, GridExpandableTemplateContext } from '@ornery/ui-grid-core';
+import type {
+  GridHeaderTemplateContext,
+  GridOptions,
+  UiGridApi,
+  GridExpandableTemplateContext,
+} from '@ornery/ui-grid-core';
 import { SORT_DIRECTIONS, FILTER_CONDITIONS } from '@ornery/ui-grid-core';
 
 const baseData = [
@@ -136,6 +141,41 @@ describe('UiGrid React component', () => {
     );
   });
 
+  it('renders custom header content from the React headerRenderer prop', () => {
+    const headerRenderer = ({ value, column }: GridHeaderTemplateContext) => (
+      <span>{`${value}:${column.name}`}</span>
+    );
+
+    const { container } = renderGrid({}, { headerRenderer });
+
+    const headers = Array.from(container.querySelectorAll('.header-label')).map((el) =>
+      el.textContent?.trim(),
+    );
+
+    expect(headers).toEqual([
+      'Customer:name',
+      'Status:status',
+      'Revenue:revenue',
+      'Owner:owner',
+      'Badge:badge',
+    ]);
+  });
+
+  it('renders custom header content from column headerRenderer when no React headerRenderer is provided', () => {
+    const { container } = renderGrid({
+      columnDefs: [
+        { name: 'name', displayName: 'Customer', headerRenderer: ({ value }) => `[${value}]` },
+        { name: 'status' },
+      ],
+    });
+
+    const headers = Array.from(container.querySelectorAll('.header-label')).map((el) =>
+      el.textContent?.trim(),
+    );
+
+    expect(headers).toEqual(['[Customer]', 'Status']);
+  });
+
   it('sorts rows and cycles sort state from header button', () => {
     const { container, gridApi } = renderGrid();