Additional Columns

Overview

Additional columns let you display computed or derived data in the collection table without storing it in the database.

Defining Additional Columns

const ordersCollection: EntityCollection = {
    slug: "orders",
    additionalFields: [
        {
            key: "total_display",
            name: "Total",
            Builder: ({ entity }) => {
                const total = entity.values.items?.reduce(
                    (sum, item) => sum + (item.price * item.quantity), 0
                ) ?? 0;
                return <span>${total.toFixed(2)}</span>;
            }
        },
        {
            key: "status_badge",
            name: "Status",
            Builder: ({ entity }) => {
                const color = entity.values.status === "completed" ? "green" : "orange";
                return (
                    <span style={{ color }}>
                        {entity.values.status}
                    </span>
                );
            },
            dependencies: ["status"]  // Re-render when these fields change
        }
    ],
    properties: { /* ... */ }
};

Builder Props

Prop	Type	Description
entity	Entity	The entity for this row
context	RebaseContext	Full Rebase context

Next Steps

• Entity Actions — Custom action buttons
• Custom Fields — Custom form fields