Glide Data Grid
Ask or search…
K

Implementing Custom Cells

Coming soon. For now enjoy this custom cell which kind of explains the process.
import {
type CustomCell,
measureTextCached,
type CustomRenderer,
getMiddleCenterBias,
GridCellKind,
} from "@glideapps/glide-data-grid";
import * as React from "react";
import { roundedRect } from "../draw-fns.js";
interface RangeCellProps {
readonly kind: "range-cell";
readonly value: number;
readonly min: number;
readonly max: number;
readonly step: number;
readonly label?: string;
readonly measureLabel?: string;
readonly readonly?: boolean;
}
export type RangeCell = CustomCell<RangeCellProps>;
const RANGE_HEIGHT = 6;
const inputStyle: React.CSSProperties = {
marginRight: 8,
};
const wrapperStyle: React.CSSProperties = {
display: "flex",
alignItems: "center",
flexGrow: 1,
};
const renderer: CustomRenderer<RangeCell> = {
kind: GridCellKind.Custom,
isMatch: (c): c is RangeCell => (c.data as any).kind === "range-cell",
draw: (args, cell) => {
const { ctx, theme, rect } = args;
const { min, max, value, label, measureLabel } = cell.data;
const x = rect.x + theme.cellHorizontalPadding;
const yMid = rect.y + rect.height / 2;
const rangeSize = max - min;
const fillRatio = (value - min) / rangeSize;
ctx.save();
let labelWidth = 0;
if (label !== undefined) {
ctx.font = `12px ${theme.fontFamily}`; // fixme this is slow
labelWidth =
measureTextCached(measureLabel ?? label, ctx, `12px ${theme.fontFamily}`).width +
theme.cellHorizontalPadding;
}
const rangeWidth = rect.width - theme.cellHorizontalPadding * 2 - labelWidth;
if (rangeWidth >= RANGE_HEIGHT) {
const gradient = ctx.createLinearGradient(x, yMid, x + rangeWidth, yMid);
gradient.addColorStop(0, theme.accentColor);
gradient.addColorStop(fillRatio, theme.accentColor);
gradient.addColorStop(fillRatio, theme.bgBubble);
gradient.addColorStop(1, theme.bgBubble);
ctx.beginPath();
ctx.fillStyle = gradient;
roundedRect(ctx, x, yMid - RANGE_HEIGHT / 2, rangeWidth, RANGE_HEIGHT, RANGE_HEIGHT / 2);
ctx.fill();
ctx.beginPath();
roundedRect(
ctx,
x + 0.5,
yMid - RANGE_HEIGHT / 2 + 0.5,
rangeWidth - 1,
RANGE_HEIGHT - 1,
(RANGE_HEIGHT - 1) / 2
);
ctx.strokeStyle = theme.accentLight;
ctx.lineWidth = 1;
ctx.stroke();
}
if (label !== undefined) {
ctx.textAlign = "right";
ctx.fillStyle = theme.textDark;
ctx.fillText(
label,
rect.x + rect.width - theme.cellHorizontalPadding,
yMid + getMiddleCenterBias(ctx, `12px ${theme.fontFamily}`)
);
}
ctx.restore();
return true;
},
provideEditor: () => {
// eslint-disable-next-line react/display-name
return p => {
const { data } = p.value;
const strValue = data.value.toString();
const strMin = data.min.toString();
const strMax = data.max.toString();
const strStep = data.step.toString();
const onChange = (e: React.ChangeEvent<HTMLInputElement>) => {
p.onChange({
...p.value,
data: {
...data,
value: Number(e.target.value),
},
});
};
return (
<label style={wrapperStyle}>
<input
style={inputStyle}
type="range"
value={strValue}
min={strMin}
max={strMax}
step={strStep}
onChange={onChange}
/>
{strValue}
</label>
);
};
},
onPaste: (v, d) => {
let num = Number.parseFloat(v);
num = Number.isNaN(num) ? d.value : Math.max(d.min, Math.min(d.max, num));
return {
...d,
value: num,
};
},
};
export default renderer;
Last modified 2mo ago