Top 100 Passive Income Models for Indie Hackers and Web Developers without Relying on Paid Advertising Budgets

1. SaaS Micro-Products: The “One-Problem” Solution

Indie hackers and web developers often possess niche technical skills that can solve very specific, albeit small, problems for businesses or individuals. Instead of building a sprawling, feature-rich platform, focus on a single, high-value pain point. This approach minimizes development overhead, accelerates time-to-market, and simplifies marketing. The key is to identify a recurring, frustrating task that can be automated or streamlined with a focused software solution.

Consider a tool that automatically generates boilerplate code for a specific framework’s API client, or a service that monitors a particular type of website for changes and sends alerts. The pricing model should reflect the value delivered, often a recurring subscription (SaaS) with tiered features or usage limits.

Example: API Key Rotation Service

Let’s imagine a micro-SaaS that helps developers manage and automatically rotate API keys for services like Stripe, Twilio, or AWS. This is a common security pain point.

Core Functionality & Tech Stack

• User Authentication: Secure login with email/password or OAuth.
• API Integration: Securely store and manage credentials for target services.
• Rotation Logic: Implement scheduled key generation and revocation for each service.
• Notification System: Alert users via email or webhooks about successful rotations or failures.
• Tech Stack: Python (Flask/Django) for the backend, PostgreSQL for data storage, Redis for job queuing (e.g., Celery), and a simple React/Vue frontend.

Example Backend Snippet (Python/Flask)

from flask import Flask, request, jsonify
from celery import Celery
import os
import time
import requests # For interacting with external APIs

app = Flask(__name__)
app.config['CELERY_BROKER_URL'] = os.environ.get('CELERY_BROKER_URL', 'redis://localhost:6379/0')
app.config['CELERY_RESULT_BACKEND'] = os.environ.get('CELERY_RESULT_BACKEND', 'redis://localhost:6379/0')

celery = Celery(app.name, broker=app.config['CELERY_BROKER_URL'])
celery.conf.update(app.config)

# Placeholder for database interaction
def get_user_api_keys(user_id):
    # In a real app, this would query a database
    return {
        "stripe": {"api_key": "sk_test_...", "rotation_interval_hours": 24},
        "twilio": {"api_key": "ACxxxxxxxxxxxx", "rotation_interval_hours": 72}
    }

def update_api_key_in_db(user_id, service, new_key):
    print(f"Updating {service} key for user {user_id} to {new_key[:5]}...")
    # Database update logic here

@celery.task
def rotate_api_key_task(user_id, service, credentials):
    print(f"Attempting to rotate {service} API key for user {user_id}...")
    try:
        # --- Simulate API Key Rotation Logic ---
        # This is highly service-specific. For example, for AWS, you'd use boto3.
        # For Stripe, you might need to create a new secret and revoke the old one.
        # For simplicity, we'll just generate a new dummy key.
        new_key = f"rotated_{service}_key_{int(time.time())}"

        # --- Update the service provider (simulated) ---
        # In a real scenario, you'd make an API call to the service provider
        # to revoke the old key and register the new one.
        print(f"Simulating revocation of old key and registration of new key for {service}.")
        time.sleep(2) # Simulate network latency

        # --- Update our internal database ---
        update_api_key_in_db(user_id, service, new_key)

        # --- Notify user (simulated) ---
        print(f"Successfully rotated {service} API key for user {user_id}.")
        # send_notification(user_id, f"Your {service} API key has been rotated.")

        return {"status": "success", "new_key": new_key}
    except Exception as e:
        print(f"Error rotating {service} API key for user {user_id}: {e}")
        # send_notification(user_id, f"Failed to rotate {service} API key: {e}")
        return {"status": "failure", "error": str(e)}

@app.route('/rotate/', methods=['POST'])
def request_rotation(service):
    user_id = request.json.get('user_id')
    if not user_id:
        return jsonify({"error": "user_id is required"}), 400

    # In a real app, you'd fetch user credentials securely from DB
    # and pass them to the task. For this example, we'll assume they are available.
    user_credentials = get_user_api_keys(user_id) # This should be secure!
    if service not in user_credentials:
        return jsonify({"error": f"Service {service} not configured for user {user_id}"}), 404

    credentials = user_credentials[service]
    # Schedule the task to run asynchronously
    task = rotate_api_key_task.apply_async(args=[user_id, service, credentials])
    return jsonify({"message": "Rotation task scheduled", "task_id": task.id}), 202

if __name__ == '__main__':
    # For development: run Flask app and Celery worker separately
    # Flask: python your_app_file.py
    # Celery: celery -A your_app_file.celery worker --loglevel=info
    app.run(debug=True)

2. Premium Templates & Boilerplates

Leverage your expertise in specific frameworks, CMSs, or development stacks to create high-quality, production-ready templates or boilerplates. These aren’t just basic starter kits; they should include best practices, common integrations, and a solid architectural foundation. Think of a Next.js e-commerce starter with Stripe integration, a WordPress theme optimized for speed and SEO, or a Laravel API boilerplate with JWT authentication and role-based access control.

The target audience here is other developers or agencies who want to save significant setup time. Monetization is typically a one-time purchase, with potential for recurring revenue through support packages or premium add-ons.

Example: Nuxt.js E-commerce Starter Kit

Key Features

• Framework: Nuxt.js (Vue.js framework)
• Styling: Tailwind CSS with a pre-designed component library (e.g., Headless UI).
• State Management: Pinia or Vuex.
• Routing: Nuxt’s built-in file-based routing.
• E-commerce Integration: Pre-configured Stripe Checkout or a headless CMS like Strapi/Contentful for product management.
• Authentication: Nuxt Auth module for secure user login.
• Deployment: Optimized for Vercel or Netlify.
• Documentation: Comprehensive README and setup guide.

Example Configuration Snippet (Nuxt.js `nuxt.config.ts`)

// nuxt.config.ts
export default defineNuxtConfig({
  devtools: { enabled: true },
  modules: [
    '@nuxtjs/tailwindcss',
    '@pinia/nuxt',
    '@sidebase/nuxt-auth', // For authentication
    // '@nuxtjs/strapi', // If using Strapi as headless CMS
  ],
  css: ['~/assets/css/main.css'],

  plugins: [
    // Example: Initialize Stripe client
    '~/plugins/stripe.client.ts'
  ],

  runtimeConfig: {
    // Keys within public key are exposed to client
    public: {
      stripePublishableKey: process.env.STRIPE_PUBLISHABLE_KEY,
      // apiBaseUrl: process.env.API_BASE_URL || 'http://localhost:3001/api'
    },
    // Private keys are only available server-side
    stripeSecretKey: process.env.STRIPE_SECRET_KEY,
  },

  auth: {
    // The following settings are optional, but recommended
    enableVuex: false, // Use Pinia instead of Vuex
    // Default URL to redirect to if the user is not authenticated
    // redirect: {
    //   login: '/login', // not logged in users will be redirected to this page
    //   logout: '/', // after logout, user will be redirected to this page
    //   callback: '/callback', // should be the callback page path
    //   home: '/' // the user will be redirected to this page after successful login
    // },
    // strategies: {
    //   local: {
    //     token: {
    //       property: 'token',
    //       required: true,
    //       type: 'Bearer'
    //     },
    //     endpoints: {
    //       login: { url: '/api/auth/login', method: 'post' },
    //       logout: { url: '/api/auth/logout', method: 'post' },
    //       user: { url: '/api/auth/user', method: 'get' }
    //     }
    //   }
    // }
  },

  // Example Strapi configuration
  // strapi: {
  //   url: process.env.STRAPI_URL || 'http://localhost:1337',
  //   prefix: '/api',
  //   version: 'v4',
  //   cookie: {},
  //   cookieName: 'strapi_jwt'
  // },

  tailwindcss: {
    cssPath: '~/assets/css/tailwind.css',
  },

  pinia: {
    autoImports: [
      // automatically imports `defineStore`
      'defineStore',
      // automatically imports `acceptHMRUpdate`
      'acceptHMRUpdate',
    ],
  },
})

3. Niche WordPress Plugins/Themes

The WordPress ecosystem is vast. Developers can tap into this by creating specialized plugins or themes that solve problems not adequately addressed by existing solutions. Focus on performance, security, or unique functionality. Examples include a plugin for advanced Gutenberg block controls, a theme optimized for a specific industry (e.g., real estate listings with advanced filtering), or a plugin that integrates WordPress with a less common third-party service.

Monetization: One-time purchase for the plugin/theme, with optional premium support or add-on features. Selling on marketplaces like ThemeForest/CodeCanyon or directly from your own website are common strategies.

Example: Advanced Gutenberg Block Plugin

Plugin Idea: “Gutenberg Enhanced Layouts”

• Core Functionality: Provides pre-built, customizable layout blocks (e.g., multi-column sections with background images, accordions, tabs, carousels) that go beyond the default WordPress offerings.
• Features: Responsive controls, animation options, integration with ACF (Advanced Custom Fields) for dynamic content.
• Target Audience: Content creators, designers, and developers who want more design flexibility within the Gutenberg editor without writing custom code for every page.

Example PHP Snippet (Plugin Registration & Block Registration)

<?php
/**
 * Plugin Name: Gutenberg Enhanced Layouts
 * Description: Provides advanced layout blocks for the Gutenberg editor.
 * Version: 1.0.0
 * Author: Your Name
 * License: GPL-2.0-or-later
 * Text Domain: enhanced-layouts
 */

if ( ! defined( 'ABSPATH' ) ) {
    exit; // Exit if accessed directly.
}

/**
 * Register block styles and scripts.
 */
function enhanced_layouts_register_block() {
    // Automatically load dependencies and version
    $asset_file = include( plugin_dir_path( __FILE__ ) . 'build/index.asset.php');

    wp_register_script(
        'enhanced-layouts-block-editor-script',
        plugin_dir_url( __FILE__ ) . 'build/index.js',
        $asset_file['dependencies'],
        $asset_file['version']
    );

    wp_register_style(
        'enhanced-layouts-block-editor-style',
        plugin_dir_url( __FILE__ ) . 'build/index.css',
        array( 'wp-edit-blocks' ),
        $asset_file['version']
    );

    wp_register_style(
        'enhanced-layouts-block-frontend-style',
        plugin_dir_url( __FILE__ ) . 'build/style-index.css',
        array(),
        $asset_file['version']
    );

    // Register the block using the_content filter or block registration API
    register_block_type( 'enhanced-layouts/section', array(
        'editor_script' => 'enhanced-layouts-block-editor-script',
        'editor_style'  => 'enhanced-layouts-block-editor-style',
        'style'         => 'enhanced-layouts-block-frontend-style',
        // 'render_callback' => 'enhanced_layouts_render_section_block' // Optional: for server-side rendering
    ) );

    // Register other blocks similarly...
}
add_action( 'init', 'enhanced_layouts_register_block' );

/**
 * Optional: Server-side rendering callback for a block.
 * This is useful if your block's output is complex or needs dynamic data.
 */
// function enhanced_layouts_render_section_block( $attributes ) {
//     // Extract attributes and generate HTML output
//     $background_color = isset( $attributes['backgroundColor'] ) ? esc_attr( $attributes['backgroundColor'] ) : '';
//     $content = isset( $attributes['content'] ) ? $attributes['content'] : '';
//
//     ob_start();
//     ?>
//     <div class="wp-block-enhanced-layouts-section" style="background-color: <?php echo $background_color; ?>;">
//         <?php echo wp_kses_post( $content ); ?>
//     </div>
//     <?php
//     return ob_get_clean();
// }

/**
 * Enqueue block assets for the frontend.
 * This is often handled by the 'style' handle in register_block_type,
 * but can be explicitly managed if needed.
 */
// function enhanced_layouts_enqueue_frontend_assets() {
//     wp_enqueue_style( 'enhanced-layouts-block-frontend-style' );
// }
// add_action( 'wp_enqueue_scripts', 'enhanced_layouts_enqueue_frontend_assets' );

?>

4. Developer Tooling & Utilities

Create tools that streamline the development workflow. This could be a command-line interface (CLI) tool for automating repetitive tasks, a browser extension that aids in debugging or inspecting specific frameworks, or a desktop application for managing development environments. The key is to solve a problem *you* face as a developer, as this often indicates a broader need.

Monetization: Can be a one-time purchase, a subscription for advanced features/cloud sync, or even open-source with paid support/enterprise features. Think of tools like Postman (initially), TablePlus, or various code linters/formatters.

Example: CLI Tool for Project Scaffolding

Tool Idea: “ProjectForge”

• Functionality: A CLI tool that generates new project structures based on pre-defined templates (e.g., React + Node.js backend, Vue + Laravel backend, Python Flask API).
• Features: Customizable templates, dependency installation (npm/yarn/pip), basic Git initialization, environment variable setup (.env).
• Target Audience: Developers who frequently start new projects and want a consistent, fast setup.

Example Bash Script Snippet (Basic Scaffolding)

#!/bin/bash

# ProjectForge - Simple Project Scaffolding CLI

# --- Configuration ---
DEFAULT_TEMPLATE="react-node-api"
TEMPLATES_DIR="$HOME/.projectforge/templates" # User-specific templates

# --- Functions ---
usage() {
  echo "Usage: projectforge <project-name> [<template-name>]"
  echo "  <project-name>: The name of the new project directory."
  echo "  <template-name>: Optional. The template to use (default: $DEFAULT_TEMPLATE)."
  echo ""
  echo "Available templates (in $TEMPLATES_DIR):"
  ls -1 "$TEMPLATES_DIR" | sed 's/^/  - /'
  exit 1
}

# Function to copy template files
scaffold_project() {
  local project_name="$1"
  local template_name="$2"
  local source_dir="$TEMPLATES_DIR/$template_name"

  if [ ! -d "$source_dir" ]; then
    echo "Error: Template '$template_name' not found in $TEMPLATES_DIR."
    exit 1
  fi

  if [ -d "$project_name" ]; then
    echo "Error: Directory '$project_name' already exists."
    exit 1
  fi

  echo "Creating project '$project_name' using template '$template_name'..."
  cp -r "$source_dir" "$project_name"
  cd "$project_name" || exit

  # --- Post-scaffolding actions ---
  # Example: Replace placeholder names (if templates use them)
  # find . -type f -exec sed -i '' "s/PROJECT_NAME_PLACEHOLDER/$project_name/g" {} +

  # Example: Initialize Git
  if command -v git &> /dev/null; then
    git init
    git add .
    git commit -m "Initial commit from ProjectForge"
    echo "Git repository initialized."
  else
    echo "Warning: Git not found. Skipping git init."
  fi

  # Example: Install dependencies (detect package managers)
  if [ -f "package.json" ]; then
    if command -v yarn &> /dev/null; then
      yarn install
    elif command -v npm &> /dev/null; then
      npm install
    else
      echo "Warning: npm or yarn not found. Skipping dependency installation."
    fi
  elif [ -f "requirements.txt" ]; then
     if command -v pip &> /dev/null; then
       pip install -r requirements.txt
     else
       echo "Warning: pip not found. Skipping Python dependency installation."
     fi
  fi

  echo "Project '$project_name' created successfully!"
  echo "Navigate to your project directory: cd $project_name"
}

# --- Main Execution ---
PROJECT_NAME="$1"
TEMPLATE_NAME="${2:-$DEFAULT_TEMPLATE}" # Use second argument or default

if [ -z "$PROJECT_NAME" ]; then
  usage
fi

# Ensure templates directory exists (create if not)
mkdir -p "$TEMPLATES_DIR"
if [ ! -d "$TEMPLATES_DIR" ]; then
    echo "Error: Could not create or access templates directory: $TEMPLATES_DIR"
    exit 1
fi

# Check if any templates exist, provide guidance if not
if [ -z "$(ls -A $TEMPLATES_DIR)" ]; then
    echo "No templates found in $TEMPLATES_DIR."
    echo "Please create template directories (e.g., $TEMPLATES_DIR/$DEFAULT_TEMPLATE) with your project structure."
    exit 1
fi

scaffold_project "$PROJECT_NAME" "$TEMPLATE_NAME"

exit 0

5. API as a Service (AaaS)

Expose a specific, valuable functionality via a well-documented API. This could be anything from a complex data processing service, an image manipulation API, a natural language processing endpoint, or even a service that aggregates data from multiple sources. The key is that the underlying logic is complex or time-consuming to implement yourself, making your API a valuable shortcut.

Monetization: Typically tiered subscription plans based on API call volume, features, or data access. Think of services like Twilio (SMS API), OpenWeatherMap (weather data API), or Algolia (search API).

Example: Image Resizing & Optimization API

API Functionality

• Endpoint: `POST /resize`
• Input: Image file (multipart/form-data), desired width, height, format (JPEG, PNG, WEBP), quality settings, optimization level.
• Output: Processed image file, metadata (original dimensions, new dimensions).
• Technology: Python (FastAPI/Flask) backend, Pillow/ImageMagick for image processing, Redis for caching, potentially S3 for temporary storage.

Example FastAPI Endpoint (Python)

from fastapi import FastAPI, File, UploadFile, HTTPException, Query
from fastapi.responses import StreamingResponse
from PIL import Image
import io
import uuid
import os
from typing import Optional

app = FastAPI(title="Image Processing API")

# In-memory cache for simplicity; use Redis/Memcached in production
image_cache = {}

def process_image(image_bytes: bytes, width: Optional[int] = None, height: Optional[int] = None, format: str = 'JPEG', quality: int = 85, optimize: bool = True) -> bytes:
    """Processes and optimizes an image."""
    try:
        img = Image.open(io.BytesIO(image_bytes))
        img_format = img.format # Store original format

        # Convert to RGB if necessary for JPEG saving
        if format.upper() == 'JPEG' and img.mode in ('RGBA', 'P'):
            img = img.convert('RGB')

        # Resize
        if width or height:
            img.thumbnail((width or img.width, height or img.height), Image.Resampling.LANCZOS)

        # Save to bytes buffer
        buffer = io.BytesIO()
        save_options = {'format': format, 'quality': quality}
        if optimize and format.upper() in ['JPEG', 'PNG']:
             # Pillow's optimize flag is basic; more advanced optimization might need external tools
            save_options['optimize'] = True
            if format.upper() == 'PNG':
                save_options['compress_level'] = 6 # Example compression level

        img.save(buffer, **save_options)
        buffer.seek(0)
        return buffer.read()

    except Exception as e:
        raise HTTPException(status_code=500, detail=f"Image processing failed: {str(e)}")

@app.post("/process/")
async def process_image_endpoint(
    file: UploadFile = File(...),
    width: Optional[int] = Query(None, description="Target width"),
    height: Optional[int] = Query(None, description="Target height"),
    format: str = Query("JPEG", description="Output format (JPEG, PNG, WEBP)"),
    quality: int = Query(85, description="Image quality (1-100 for JPEG/WEBP)"),
    optimize: bool = Query(True, description="Apply basic optimization")
):
    if not file.content_type.startswith("image/"):
        raise HTTPException(status_code=400, detail="Invalid file type. Please upload an image.")

    contents = await file.read()
    processed_bytes = process_image(contents, width, height, format, quality, optimize)

    # Generate a unique filename for the response
    unique_id = uuid.uuid4()
    output_filename = f"{unique_id}.{format.lower()}"

    return StreamingResponse(io.BytesIO(processed_bytes), media_type=f"image/{format.lower()}", headers={"Content-Disposition": f"attachment; filename={output_filename}"})

# Example of how to run this with uvicorn:
# uvicorn your_script_name:app --reload

6. Curated Content Platforms & Newsletters

If you have a deep understanding of a specific niche (e.g., AI in healthcare, WebAssembly development, sustainable web design), you can build a business around curating and delivering valuable content. This could be a highly focused newsletter, a curated list of resources, or a blog featuring expert interviews and analysis.

Monetization: Sponsorships, affiliate marketing (for relevant tools/books), premium content tiers, or selling your own digital products (eBooks, courses) related to the niche.

Example: Newsletter for Web Performance Optimization

Newsletter Focus

• Content: Weekly digest of new tools, techniques, case studies, and research related to website speed and performance.
• Target Audience: Frontend developers, DevOps engineers, SEO specialists.
• Unique Value: Deep dives into complex topics (e.g., Core Web Vitals analysis, advanced caching strategies, image optimization techniques) with actionable advice.

Example Email Snippet (using a service like Mailchimp/SendGrid API)

# Example using SendGrid Python library (conceptual)
import sendgrid
import os
from sendgrid.helpers.mail import Mail, Email, To, Subject, PlainTextContent, HtmlContent

def send_performance_newsletter(subscriber_email, subject, html_content):
    sg = sendgrid.SendGridAPIClient(api_key=os.environ.get('SENDGRID_API_KEY'))
    from_email = Email("[email protected]") # Replace with your verified sender
    to_email = To(subscriber_email)
    subject = subject
    html_content = HtmlContent(html_content)
    message = Mail(from_email, to_email, subject, html_content)

    try:
        response = sg.client.mail.send.post(request_body=message.get())
        print(f"Email sent to {subscriber_email}. Status Code: {response.status_code}")
        return response.status_code
    except Exception as e:
        print(f"Error sending email to {subscriber_email}: {e}")
        return None

# --- Newsletter Content Generation (Simplified) ---
def generate_newsletter_html(issue_number):
    # Fetch latest articles, tools, etc. from your database/curation source
    featured_article_title = "Deep Dive: Optimizing Image Loading with AVIF"
    featured_article_link = "https://yourdomain.com/blog/avif-optimization"
    tool_highlight_name = "SpeedVitals CLI"
    tool_highlight_link = "https://github.com/your-org/speedvitals"

    html = f"""
    <h2>Web Performance Weekly - Issue #{issue_number}</h2>
    <p>Your weekly dose of insights to make the web faster.</p>

    <h3>Featured Article:</h3>
    <p><a href="{featured_article_link}">{featured_article_title}</a></p>
    <p>A comprehensive look at leveraging the AVIF format for significant file size reductions...</p>

    <h3>Tool Spotlight:</h3>
    <p><a href="{tool_highlight_link}">{tool_highlight_name}</a></p>
    <p>A new command-line tool to automate performance audits...</p>

    <p>Stay fast,<br>
    The Web Performance Team</p>
    """
    return html

# --- Sending Logic ---
# Assume you have a list of subscriber emails
# subscribers = ["[email protected]", "[email protected]"]
# current_issue = 123
# newsletter_subject = f"Web Performance Weekly - Issue #{current_issue}"

# for email in subscribers:
#     html = generate_newsletter_html(current_issue)
#     send_performance_newsletter(email, newsletter_subject, html)

7. Digital Assets Marketplace (Niche)

Instead of a generic marketplace, focus on a specific type of digital asset relevant to developers or designers. This could be UI kits for a particular framework (e.g., React Native UI components), icon sets for specific use cases, code snippets for complex algorithms, or even 3D models for game development.

Monetization: Commission on sales, direct sales of your own assets, or subscription access to a library of assets.

Example: React Component Library for Dashboards

Asset Type

• Components: Reusable, customizable React components specifically designed for building administrative dashboards (e.g., data tables with sorting/filtering, charts, forms, navigation elements).
• Framework: Built with React, potentially using a UI library like Material UI or Chakra UI as a base, or fully custom.
• Target Audience: Developers building SaaS products, internal tools, or any application requiring a robust admin interface.

Example Component Snippet (React)

// src/components/DataTable.jsx
import React, { useState, useMemo } from 'react';
import PropTypes from 'prop-types';

const DataTable = ({ data, columns }) => {
  const [sortConfig, setSortConfig] = useState({ key: null, direction: 'ascending' });
  const [filterText, setFilterText] = useState('');

  const sortedData = useMemo(() => {
    let sortableItems = [...data];
    if (sortConfig.key !== null) {
      sortableItems.sort((a, b) => {
        if (a[sortConfig.key] < b[sortConfig.key]) {
          return sortConfig.direction === 'ascending' ? -1 : 1;
        }
        if (a[sortConfig.key] > b[sortConfig.key]) {
          return sortConfig.direction === 'ascending' ? 1 : -1;
        }
        return 0;
      });
    }
    return sortableItems;
  }, [data, sortConfig]);

  const filteredData = useMemo(() => {
    if (!filterText) return sortedData;
    return sortedData.filter(item =>
      Object.values(item).some(val =>
        String(val).toLowerCase().includes(filterText.toLowerCase())
      )
    );
  }, [sortedData, filterText]);

  const requestSort = (key) => {
    let direction = 'ascending';
    if (sortConfig.key === key && sortConfig.direction === 'ascending') {
      direction = 'descending';
    }
    setSortConfig({ key, direction });
  };

  const getClassNamesFor = (name) => {
    if (!sortConfig.key) {
      return;
    }
    return sortConfig.key === name ? sortConfig.direction : undefined;
  };

  return (
    <div className="data-table-container">
      <input
        type="text"
        placeholder="Filter table..."
        value={filterText}
        onChange={(e) => setFilterText(e.target.value)}
        className="filter-input"
      />
      <table className="data-table">
        <thead>
          <tr>
            {