diff --git a/packages/core/API.md b/packages/core/API.md index 44fb12bc4..30e18b7fb 100644 --- a/packages/core/API.md +++ b/packages/core/API.md @@ -189,7 +189,8 @@ Most data grids will want to set the majority of these props one way or another. | Name | Description | | ---------------------------------- | ------------------------------------------------------ | -| [customRenderers](#customRenderer) | FIXME | +| [customRenderers](#customRenderer) | Custom renderers for `GridCellKind.Custom`. | +| [renderers](#renderers) | Overrides built-in cell renderers. | | [drawCell](#drawcell) | Callback used to override the rendering of any cell. | | [drawHeader](#drawheader) | Callback used to override the rendering of any header. | @@ -728,6 +729,16 @@ It is possible to return `false` after rendering just a background and the regul --- +## renderers + +```ts +readonly renderers?: readonly InternalCellRenderer[]; +``` + +An array of cell renderers used when drawing built-in cell types. Provide this prop to override default cell renderers. If omitted, `AllCellRenderers` is used. + +--- + ## getGroupDetails ```ts diff --git a/packages/core/src/data-editor-all.tsx b/packages/core/src/data-editor-all.tsx index 8cdd822c5..11ca5848c 100644 --- 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 { +export interface DataEditorAllProps extends Omit { imageWindowLoader?: ImageWindowLoader; } @@ -14,6 +14,10 @@ const DataEditorAllImpl: React.ForwardRefRenderFunction { + return p.renderers ?? AllCellRenderers; + }, [p.renderers]) + const imageWindowLoader = React.useMemo(() => { return p.imageWindowLoader ?? new ImageWindowLoaderImpl(); }, [p.imageWindowLoader]); @@ -21,7 +25,7 @@ const DataEditorAllImpl: React.ForwardRefRenderFunction ( + + + Override internal cell renderers by passing the {" "} + renderers prop. + + } + > + + + + ), + ], +}; + +export const OverrideMarkerRenderer: React.VFC = () => { + const { cols, getCellContent } = useMockDataGenerator(100, true, true); + + const renderers = React.useMemo[]>(() => { + return [ + ...AllCellRenderers, + { + ...markerCellRenderer, + draw: args => { + const { ctx, rect } = args; + ctx.fillStyle = "#ffe0e0"; + ctx.fillRect(rect.x, rect.y, rect.width, rect.height); + markerCellRenderer.draw(args as any); + }, + } as InternalCellRenderer, + ]; + }, []); + + return ( + + ); +}; \ No newline at end of file diff --git a/packages/core/src/index.ts b/packages/core/src/index.ts index 0c7a8df84..3d7b0bdb2 100644 --- 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 index 097c8e967..c1c0cf050 100644 --- 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( + , + ]} + 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(); diff --git a/setup-react-18-test.sh b/setup-react-18-test.sh index f68e8f92a..18bab1a5e 100755 --- a/setup-react-18-test.sh +++ b/setup-react-18-test.sh @@ -1,3 +1,3 @@ #!/bin/bash -npm i -D react@latest react-dom@latest @testing-library/react@latest @testing-library/react-hooks@latest @testing-library/user-event@14.5.1 react-test-renderer@latest \ No newline at end of file +npm i -D react@latest react-dom@latest @testing-library/react@latest @testing-library/react-hooks@latest @testing-library/user-event@14.5.1 react-test-renderer@latest @testing-library/dom \ No newline at end of file