Init

src/Gridler/components/sprites/Sort.ts

@@ -0,0 +1,13 @@
+import { Sprite, SpriteProps } from '@glideapps/glide-data-grid';
+
+
+
+export const SortSprite: Sprite = (props: Partial<SpriteProps>) => {
+  const fg = props.fgColor ?? 'currentColor';
+  return `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="20" height="20" fill="none">
+      <path
+        fill="${fg}"
+        d="M2.22 9.967L7.97 4.22l.085-.074l.058-.038l.072-.039l.105-.04l.105-.022l.052-.005L8.5 4l.057.002l.092.013l.107.03l.085.037l.054.03l.063.044l.072.064l5.75 5.747a.75.75 0 0 1-.976 1.133l-.084-.072L9.25 6.56v16.69a.75.75 0 0 1-1.493.102l-.007-.102V6.56l-4.47 4.468a.75.75 0 0 1-.976.072l-.084-.072a.75.75 0 0 1-.073-.977zM19.5 4a.75.75 0 0 1 .743.648l.007.102v16.687l4.47-4.467l.084-.073a.75.75 0 0 1 1.049 1.05l-.073.083l-5.728 5.727a.75.75 0 0 1-1.031.07l-.073-.07l-5.728-5.727l-.073-.084a.75.75 0 0 1-.007-.882l.08-.094l.084-.073a.75.75 0 0 1 .882-.007l.094.08l4.47 4.469V4.75l.007-.102A.75.75 0 0 1 19.5 4"
+      ></path>
+    </svg>`;
+};

src/Gridler/components/sprites/SortDown.tsx

@@ -0,0 +1,12 @@
+import { Sprite, SpriteProps } from '@glideapps/glide-data-grid';
+
+export const SortDownSprite: Sprite = (props: Partial<SpriteProps>) => {
+  const fg = props.fgColor ?? 'currentColor';
+  return `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="20" height="20" fill="none">
+      <path
+        fill="${fg}"
+        d="M15 2.5a.5.5 0 0 0-1 0v13.793l-2.146-2.147a.5.5 0 0 0-.708.708l3 3a.5.5 0 0 0 .708 0l3-3a.5.5 0 0 0-.708-.708L15 16.293zM2.5 4a.5.5 0 0 0 0 1h9a.5.5 0 0 0 0-1zM5 7.5a.5.5 0 0 1 .5-.5h6a.5.5 0 0 1 0 1h-6a.5.5 0 0 1-.5-.5M8.5 10a.5.5 0 0 0 0 1h3a.5.5 0 0 0 0-1z"
+      ></path>
+    </svg>
+  `;
+};

src/Gridler/components/sprites/SortUp.tsx

@@ -0,0 +1,12 @@
+import { Sprite, SpriteProps } from '@glideapps/glide-data-grid';
+
+export const SortUpSprite: Sprite = (props: Partial<SpriteProps>) => {
+  const fg = props.fgColor ?? 'currentColor';
+  return `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="20" height="20" fill="none">
+      <path
+        fill="${fg}"
+        d="M15 17.5a.5.5 0 0 1-1 0V3.707l-2.146 2.147a.5.5 0 0 1-.708-.708l3-3a.5.5 0 0 1 .708 0l3 3a.5.5 0 0 1-.708.708L15 3.707zM2.5 16a.5.5 0 0 1 0-1h9a.5.5 0 0 1 0 1zM5 12.5a.5.5 0 0 0 .5.5h6a.5.5 0 0 0 0-1h-6a.5.5 0 0 0-.5.5M8.5 10a.5.5 0 0 1 0-1h3a.5.5 0 0 1 0 1z"
+      ></path>
+    </svg>
+  `;
+};

src/Gridler/components/sprites/SpriteImage.tsx

@@ -0,0 +1,7 @@
+import { Sprite, SpriteProps } from '@glideapps/glide-data-grid';
+
+export const SpriteImage = (props: { alt?:string; sprite: Sprite, } & Partial<SpriteProps>) => {
+  return (
+    <img alt={props.alt ?? "Sprite Image"}  src={`data:image/svg+xml;utf8,${props.sprite({ ...props, sprite: undefined } as any)}`} />
+  );
+};