Added customColumns to docs

apps/evalite-docs/astro.config.mts

@@ -107,6 +107,10 @@ export default defineConfig({
               label: "CLI",
               slug: "guides/cli",
             },
+            {
+              label: "Customizing The UI",
+              slug: "guides/customizing-the-ui",
+            },
           ],
         },
         {

apps/evalite-docs/src/content/docs/guides/customizing-the-ui.mdx

@@ -0,0 +1,48 @@
+---
+title: Customizing The UI
+---
+
+import { Aside } from "@astrojs/starlight/components";
+
+## Creating Custom Columns
+
+By default, the Evalite UI renders the input, expected and output columns:
+
+| Input                    | Expected                    | Output           |
+| ------------------------ | --------------------------- | ---------------- |
+| `input` passed to `data` | `expected` passed to `data` | Result of `task` |
+
+You can customize the columns shown by the UI by passing an `experimental_customColumns` attribute to the `evalite` function:
+
+```ts
+import { evalite } from "evalite";
+
+evalite("My Eval", {
+  data: async () => {
+    return [
+      { input: { a: 1, b: 2, c: 3, theOnlyPropertyWeWantToShow: "Hello" } },
+    ];
+  },
+  task: async (input) => {
+    return input.theOnlyPropertyWeWantToShow + " World!";
+  },
+  experimental_customColumns: async (result) => {
+    return [
+      {
+        label: "Custom Input",
+        value: result.input.theOnlyPropertyWeWantToShow, // "Hello"
+      },
+      {
+        label: "Output",
+        value: result.output, // "Hello World!"
+      },
+    ];
+  },
+});
+```
+
+This will show two columns:
+
+| Custom Input | Output       |
+| ------------ | ------------ |
+| Hello        | Hello World! |