import React from "react";
import { DataEditorAll as DataEditor } from "../../data-editor-all.js";
import {
BeautifulWrapper,
Description,
PropName,
defaultProps,
useAllMockedKinds,
} from "../../data-editor/stories/utils.js";
import type { SpriteMap } from "../../internal/data-grid/data-grid-sprites.js";
import { SimpleThemeWrapper } from "../../stories/story-utils.js";
export default {
title: "Glide-Data-Grid/DataEditor Demos",
decorators: [
(Story: React.ComponentType) => (
You can provide overrides for the default icons by passing the{" "}
headerIcons prop.
}>
),
],
};
export const CustomHeaderIcons: React.VFC = () => {
const { cols, getCellContent, onColumnResize, setCellValue } = useAllMockedKinds();
const realCols = React.useMemo(() => {
const c = [...cols];
c[3] = {
...c[3],
title: "CUSTOM ICON",
icon: "custom",
width: 200,
};
return c;
}, [cols]);
const headerIcons = React.useMemo(() => {
return {
custom: p => ``,
};
}, []);
return (
);
};