Strip DataTable

DataTable Component

A flexible, reusable table component with built-in support for different data types, sorting, pagination, and consistent styling.

Quick Start

import (
    "apps/strip/internal/app/templates/components/datatable"
)

// Define your columns
columns := []datatable.Column{
    {
        Key:      "email",
        Label:    "Email",
        Type:     datatable.ColumnTypeEmail,
        Sortable: true,
        Align:    "left",
    },
    {
        Key:      "credits",
        Label:    "Credits",
        Type:     datatable.ColumnTypeCredits, // Auto color-coding
        Align:    "center",
    },
    {
        Key:      "reported_count",
        Label:    "Reports",
        Type:     datatable.ColumnTypeBadge, // Threshold-based badges
        Align:    "center",
    },
}

// Create table config
config := datatable.Config{
    ID:            "my-table",
    Data:          tableData,
    Columns:       columns,
    Striped:       true,      // Alternating row backgrounds
    Hoverable:     true,      // Hover effects
    Bordered:      true,      // Table borders
    Rounded:       true,      // Rounded corners
    SortBy:        "email",
    SortDirection: "asc",
    OnSort:        "/api/sort", // HTMX endpoint
}

// Use in template
@datatable.DataTable(config)

With Pagination

paginatedConfig := datatable.PaginatedConfig{
    TableConfig:   config,
    ItemsPerPage:  25,
    PageSizes:     []int{10, 25, 50, 100},
    UpdateTarget:  "table-container",
    UpdateURL:     "/api/users",
    HasNext:       true,
    HasPrev:       false,
    NextCursor:    "abc123",
    IncludeParams: []string{"search", "sort_by"},
}

@datatable.PaginatedDataTable(paginatedConfig)

Column Types

ColumnTypeText / ColumnTypeEmail

• Basic text display
• Email type adds font-medium styling

ColumnTypeNumber

• Displays numbers with medium font weight
• Centered by default

ColumnTypeCredits

• Automatic color coding:
  • 0: Muted gray
  • 1-9: Amber (low)
  • 10-49: Normal
  • 50+: Emerald (high)

ColumnTypeBadge

• Threshold-based badges:
  • 0: Muted text
  • 1-10: Amber badge (warning)
  • 11+: Red badge (critical)

ColumnTypeCount

• Shows muted style for zero values
• Bold for positive numbers

ColumnTypeDate

• Formats dates (truncates to YYYY-MM-DD)
• Muted text color

ColumnTypeID

• Monospace font
• Tooltip with full value on hover
• Smaller text size

ColumnTypeCustom

• Use CustomRender component for full control

Custom Column Rendering

{
    Key:   "actions",
    Label: "Actions",
    Type:  datatable.ColumnTypeCustom,
    CustomRender: templ.ComponentFunc(func(ctx context.Context, w io.Writer) error {
        // Your custom rendering logic
        return nil
    }),
}

Custom Formatters

{
    Key:    "price",
    Label:  "Price",
    Type:   datatable.ColumnTypeNumber,
    Format: func(v interface{}) string {
        if price, ok := v.(float64); ok {
            return fmt.Sprintf("$%.2f", price)
        }
        return ""
    },
}

Custom Badge Thresholds

{
    Key:   "severity",
    Label: "Severity",
    Type:  datatable.ColumnTypeBadge,
    BadgeThresholds: []datatable.BadgeThreshold{
        {Min: 0, Max: 25, Class: "bg-green-100 text-green-700"},
        {Min: 26, Max: 75, Class: "bg-amber-100 text-amber-700"},
        {Min: 76, Max: 0, Class: "bg-red-100 text-red-700"}, // Max: 0 means no upper limit
    },
}

Row Actions

config := datatable.Config{
    // ... other config ...
    RowClickable: true,
    RowClickURL: func(row map[string]interface{}) string {
        return fmt.Sprintf("/users/%s", row["id"])
    },
}

Features

• ✅ Automatic styling for professional tables
• ✅ Built-in column types for common data
• ✅ Color-coded credits and badges
• ✅ Sortable columns with visual indicators
• ✅ Pagination with customizable page sizes
• ✅ HTMX integration for dynamic updates
• ✅ Responsive design
• ✅ Dark mode support
• ✅ Striped rows option
• ✅ Hover effects
• ✅ Loading indicators
• ✅ Empty state messages
• ✅ Row selection support

Migration from Old Tables

Replace your existing table implementation:

// OLD
@table.Table(...) {
    // Manual table building
}

// NEW
@datatable.DataTable(config)

The new component handles all styling, sorting, pagination, and interactions automatically.