Table Component

Display structured data in rows and columns with support for multiple data types

Table Component

Overview

The Table component displays structured data in a responsive grid format with support for different data types including text, numbers, images, currency, and clickable links. It features a styled header and hoverable rows.

Usage

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

  1. Import the TableUIBuilder and DainResponse from the @dainprotocol/utils package:
import { TableUIBuilder, DainResponse } from "@dainprotocol/utils";
  1. Create a TableUIBuilder instance and configure it:
const tableUI = new TableUIBuilder()
  .addColumns([                    // Mandatory
    { key: "name", header: "Name", type: "text" },
    { key: "price", header: "Price", type: "currency" }
  ])
  .rows([                         // Mandatory
    { name: "Product One", price: 99.99 },
    { name: "Product Two", price: 149.99 }
  ])
  .build();
  1. Return the TableUIBuilder instance in a DainResponse object:
return new DainResponse({
  text: "Generated data table",
  data: { /* Your data */ },
  ui: tableUI
});

Configuration

Mandatory Props

  • columns (TableColumn[]): Array of column definitions
  • rows (Array<Record<string, unknown>>): Array of data objects

TableColumn Interface

Each column is defined using this interface:

interface TableColumn {
    key: string;        // Mandatory: unique identifier for the column
    header: string;     // Mandatory: display name in header
    type: string;       // Mandatory: data type for the column
}

Supported Column Types

  • text: Default type, displays plain text
  • image: Renders an image
  • number: Formats numbers with locale-specific separators
  • currency: Formats as currency with symbol
  • link: Creates a clickable link

Examples

Basic Text Table

const basicTable = new TableUIBuilder()
  .addColumns([
    { key: "name", header: "Name", type: "text" },
    { key: "age", header: "Age", type: "number" }
  ])
  .rows([
    { name: "John Doe", age: 30 },
    { name: "Jane Smith", age: 25 }
  ])
  .build();

return new DainResponse({
  text: "Basic Table",
  data: {},
  ui: basicTable
});

Mixed Content Table

const mixedTable = new TableUIBuilder()
  .addColumns([
    { key: "product", header: "Product", type: "text" },
    { key: "preview", header: "Preview", type: "image" },
    { key: "price", header: "Price", type: "currency" }
  ])
  .rows([
    {
      product: "Premium Widget",
      preview: "https://example.com/widget.jpg",
      price: 149.99
    },
    {
      product: "Basic Widget",
      preview: "https://example.com/basic.jpg",
      price: 99.99
    }
  ])
  .build();

return new DainResponse({
  text: "Product Table",
  data: {},
  ui: mixedTable
});

Dynamic Column Generation

const dynamicTable = new TableUIBuilder()
  .addColumns(
    productFields.map(field => ({
      key: field.id,
      header: field.label,
      type: field.dataType
    }))
  )
  .rows(productData)
  .build();

return new DainResponse({
  text: "Dynamic Table",
  data: {},
  ui: dynamicTable
});