Skip to content

Customizing The UI

Creating Custom Columns

By default, the Evalite UI renders the input, expected and output columns:

InputExpectedOutput
input passed to dataexpected passed to dataResult of task

You can customize the columns shown by the UI by passing an experimental_customColumns attribute to the evalite function:

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!";
},
scorers: [],
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 InputOutput
HelloHello World!