DataGrid Component

Display and interact with tabular data in a powerful grid interface

DataGrid Component

Overview

The DataGrid component provides a powerful way to display and interact with tabular data. It supports features like sorting, filtering, and row selection, with customizable columns and row actions.

Usage

To use the DataGrid component in your tool handler, follow these steps:

  1. Import the DataGridUIBuilder and DainResponse from the @dainprotocol/utils package:
import { DataGridUIBuilder, DainResponse } from "@dainprotocol/utils";
  1. Create a DataGridUIBuilder instance and configure it:
const dataGridUI = new DataGridUIBuilder()
  .addColumns([          // Mandatory
    {
      field: "name",
      header: "Name",
      sortable: true
    },
    {
      field: "email",
      header: "Email",
      filter: true
    }
  ])
  .rows([               // Mandatory
    { name: "John Doe", email: "john@example.com" },
    { name: "Jane Smith", email: "jane@example.com" }
  ])
  .build();
  1. Return the DataGridUIBuilder instance in a DainResponse object:
return new DainResponse({
  text: "Generated data grid",
  data: { /* Your data */ },
  ui: dataGridUI
});

Configuration

Mandatory Props

  • columns (GridColumn[]): Array of column definitions
  • rows (T[]): Array of data objects to display in the grid

Optional Props

Each column can have these optional properties:

  • header (string): Column header text
  • flex (number): Column width flex value
  • sortable (boolean): Enable sorting for the column
  • filter (boolean | string): Enable filtering for the column
  • editable (boolean): Allow editing of cell values

GridColumn Interface

The GridColumn interface defines the structure of each column:

interface GridColumn {
    field: string;       // Mandatory: data field to display
    header?: string;     // Optional: column header text
    flex?: number;       // Optional: column width flex
    sortable?: boolean;  // Optional: enable sorting
    filter?: boolean | string; // Optional: enable filtering
    editable?: boolean;  // Optional: enable cell editing
}

Actions

The DataGrid supports row click actions:

dataGridUI.onRowClick({
  tool: "yourToolName",
  paramSchema: {
    // Define required parameters
    id: { type: "string" }
  },
  params: {
    // Predefined parameters
    action: "view"
  }
});

Action Arguments

  • tool (string): The name of the tool to be called when a row is clicked
  • paramSchema (object): Schema defining required parameters when the action is triggered
  • params (object): Pre-defined parameters included with every row click

Examples

Basic DataGrid

const basicGrid = new DataGridUIBuilder()
  .addColumns([
    { field: "id", header: "ID" },
    { field: "name", header: "Name" },
    { field: "status", header: "Status" }
  ])
  .rows([
    { id: 1, name: "Project A", status: "Active" },
    { id: 2, name: "Project B", status: "Pending" }
  ])
  .build();

return new DainResponse({
  text: "Projects Grid",
  data: {},
  ui: basicGrid
});

Interactive DataGrid

const interactiveGrid = new DataGridUIBuilder()
  .addColumns([
    { field: "id", header: "ID", sortable: true },
    { field: "name", header: "Name", filter: true },
    { field: "status", header: "Status", editable: true }
  ])
  .rows([
    { id: 1, name: "Task A", status: "In Progress" },
    { id: 2, name: "Task B", status: "Completed" }
  ])
  .onRowClick({
    tool: "taskManager",
    paramSchema: {
      taskId: { type: "string" }
    },
    params: {
      action: "view"
    }
  })
  .build();

return new DainResponse({
  text: "Tasks Grid",
  data: {},
  ui: interactiveGrid
});

Flexible Column Layout

const flexGrid = new DataGridUIBuilder()
  .addColumns([
    { field: "name", header: "Name", flex: 2 },
    { field: "email", header: "Email", flex: 3 },
    { field: "role", header: "Role", flex: 1 }
  ])
  .rows([
    { name: "John Doe", email: "john@example.com", role: "Admin" },
    { name: "Jane Smith", email: "jane@example.com", role: "User" }
  ])
  .build();

return new DainResponse({
  text: "Users Grid",
  data: {},
  ui: flexGrid
});