expose renderers prop to allow custom internal renderers

BrianHung · Jun 23, 2024 · e58e90d · e58e90d
1 parent 5983dca
commit e58e90d
Show file tree

Hide file tree

Showing 3 changed files with 35 additions and 2 deletions.
diff --git a/packages/core/src/data-editor-all.tsx b/packages/core/src/data-editor-all.tsx
@@ -5,7 +5,7 @@ import { sprites } from "./internal/data-grid/sprites.js";
 import ImageWindowLoaderImpl from "./common/image-window-loader.js";
 import type { ImageWindowLoader } from "./internal/data-grid/image-window-loader-interface.js";
 
-export interface DataEditorAllProps extends Omit<DataEditorProps, "renderers" | "imageWindowLoader"> {
+export interface DataEditorAllProps extends Omit<DataEditorProps, "imageWindowLoader"> {
     imageWindowLoader?: ImageWindowLoader;
 }
 
@@ -14,14 +14,18 @@ const DataEditorAllImpl: React.ForwardRefRenderFunction<DataEditorRef, DataEdito
         return { ...sprites, ...p.headerIcons };
     }, [p.headerIcons]);
 
+    const renderers = React.useMemo(() => {
+        return p.renderers ?? AllCellRenderers;
+    }, [p.renderers])
+
     const imageWindowLoader = React.useMemo(() => {
         return p.imageWindowLoader ?? new ImageWindowLoaderImpl();
     }, [p.imageWindowLoader]);
 
     return (
         <DataEditor
             {...p}
-            renderers={AllCellRenderers}
+            renderers={renderers}
             headerIcons={allSprites}
             ref={ref}
             imageWindowLoader={imageWindowLoader}

diff --git a/packages/core/src/index.ts b/packages/core/src/index.ts
@@ -61,6 +61,7 @@ export { markerCellRenderer } from "./cells/marker-cell.js";
 export { bubbleCellRenderer } from "./cells/bubble-cell.js";
 export { protectedCellRenderer } from "./cells/protected-cell.js";
 export { rowIDCellRenderer } from "./cells/row-id-cell.js";
+export type { InternalCellRenderer } from "./cells/cell-types.js"
 export { AllCellRenderers } from "./cells/index.js";
 export { sprites } from "./internal/data-grid/sprites.js";
 export { default as ImageWindowLoaderImpl } from "./common/image-window-loader.js";

diff --git a/packages/core/test/data-editor.test.tsx b/packages/core/test/data-editor.test.tsx
@@ -8,6 +8,10 @@ import {
     GridCellKind,
     isSizedGridColumn,
     type Item,
+    markerCellRenderer,
+    type InnerGridCell,
+    type InternalCellRenderer,
+    AllCellRenderers,
 } from "../src/index.js";
 import type { CustomCell } from "../src/internal/data-grid/data-grid-types.js";
 import type { DataEditorRef } from "../src/data-editor/data-editor.js";
@@ -2572,6 +2576,30 @@ describe("data-editor", () => {
         expect(onClickSpy).not.toBeCalled();
     });
 
+    test("renderers can override internal cells", async () => {    
+        const spy = vi.fn();
+
+        vi.useFakeTimers();
+        render(
+            <DataEditor
+                {...basicProps}
+                renderers={[
+                    ...AllCellRenderers,
+                    {
+                        ...markerCellRenderer,
+                        draw: spy
+                    } as InternalCellRenderer<InnerGridCell>,
+                ]}
+                rowMarkers="both"
+            />,
+            {
+                wrapper: Context,
+            }
+        );
+        prep();
+        expect(spy).toHaveBeenCalledTimes(31); // Math.ceil((height - headerHeight) / rowHeight)
+    });
+
     test("onCellsEdited blocks onCellEdited", async () => {
         const spy = vi.fn();
         vi.useFakeTimers();