Skip to main content

Table Examples

This page demonstrates various types of tables that can be used in our documentation, including both Markdown and HTML approaches. Pure Markdown tables have some limitations which can be overcome by using HTML tables.

Markdown Table with Alignment​

Here's a basic markdown table showing different alignment options:

TechnologyDescriptionDifficultyStatus
Next.jsReact framework for productionEasy✅ Active
TypeScriptTyped superset of JavaScriptMedium✅ Active
Tailwind CSSUtility-first CSS frameworkEasy✅ Active
PrismaNext-generation ORMMedium🚧 Planned
DockerContainerization platformHard❌ Not Used
📋 Copy Code
| Technology | Description | Difficulty | Status |
|:-----------|:-----------:|:----------:|-------:|
| Next.js | React framework for production | Easy | ✅ Active |
| TypeScript | Typed superset of JavaScript | Medium | ✅ Active |
| Tailwind CSS | Utility-first CSS framework | Easy | ✅ Active |
| Prisma | Next-generation ORM | Medium | 🚧 Planned |
| Docker | Containerization platform | Hard | ❌ Not Used |

Markdown Table with Styling Classes​

This table uses CSS classes for enhanced styling:

ComponentPurposeBundle SizePerformance
ButtonUser interactions2.1 KB⭐⭐⭐⭐⭐
CardContent containers1.8 KB⭐⭐⭐⭐
ModalOverlay dialogs4.2 KB⭐⭐⭐
DataTableComplex data display12.5 KB⭐⭐
📋 Copy Code
| Component | Purpose | Bundle Size | Performance |
|-----------|---------|-------------|-------------|
| <span className="text-blue-600 font-bold">Button</span> | User interactions | 2.1 KB | ⭐⭐⭐⭐⭐ |
| <span className="text-green-600 font-bold">Card</span> | Content containers | 1.8 KB | ⭐⭐⭐⭐ |
| <span className="text-purple-600 font-bold">Modal</span> | Overlay dialogs | 4.2 KB | ⭐⭐⭐ |
| <span className="text-red-600 font-bold">DataTable</span> | Complex data display | 12.5 KB | ⭐⭐ |

HTML Table with Advanced Features​

This HTML table includes features not available in basic Markdown tables:

Framework

Performance Metrics

Recommendation

Load Time

Bundle Size

Memory Usage

Next.js 15

0.8s

125 KB

45 MB

✅ Recommended

Vite + React

0.5s

89 KB

32 MB

⚠️ Consider

Create React App

2.1s

245 KB

78 MB

❌ Deprecated

📋 Copy Code
```html
<table style={{borderCollapse: 'collapse', width: '100%', marginBottom: '1rem'}}>
  <thead>
    <tr style={{backgroundColor: '#f8fafc', borderBottom: '2px solid #e2e8f0'}}>
      <th rowSpan="2" style={{padding: '12px', textAlign: 'left', borderRight: '1px solid #e2e8f0'}}>
        Framework
      </th>
      <th colSpan="3" style={{padding: '12px', textAlign: 'center', borderBottom: '1px solid #e2e8f0'}}>
        Performance Metrics
      </th>
      <th rowSpan="2" style={{padding: '12px', textAlign: 'center'}}>
        Recommendation
      </th>
    </tr>
    <tr style={{backgroundColor: '#f8fafc', borderBottom: '1px solid #e2e8f0'}}>
      <th style={{padding: '8px', textAlign: 'center', borderRight: '1px solid #e2e8f0', fontSize: '0.875rem'}}>
        Load Time
      </th>
      <th style={{padding: '8px', textAlign: 'center', borderRight: '1px solid #e2e8f0', fontSize: '0.875rem'}}>
        Bundle Size
      </th>
      <th style={{padding: '8px', textAlign: 'center', borderRight: '1px solid #e2e8f0', fontSize: '0.875rem'}}>
        Memory Usage
      </th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td style={{padding: '12px', fontWeight: 'bold', borderRight: '1px solid #e2e8f0', backgroundColor: '#dbeafe'}}>
        Next.js 15
      </td>
      <td style={{padding: '12px', textAlign: 'center', borderRight: '1px solid #e2e8f0', color: '#059669'}}>
        0.8s
      </td>
      <td style={{padding: '12px', textAlign: 'center', borderRight: '1px solid #e2e8f0', color: '#059669'}}>
        125 KB
      </td>
      <td style={{padding: '12px', textAlign: 'center', borderRight: '1px solid #e2e8f0', color: '#dc2626'}}>
        45 MB
      </td>
      <td style={{padding: '12px', textAlign: 'center', backgroundColor: '#dcfce7'}}>
        ✅ <strong>Recommended</strong>
      </td>
    </tr>
    <tr style={{backgroundColor: '#f9fafb'}}>
      <td style={{padding: '12px', fontWeight: 'bold', borderRight: '1px solid #e2e8f0'}}>
        Vite + React
      </td>
      <td style={{padding: '12px', textAlign: 'center', borderRight: '1px solid #e2e8f0', color: '#059669'}}>
        0.5s
      </td>
      <td style={{padding: '12px', textAlign: 'center', borderRight: '1px solid #e2e8f0', color: '#d97706'}}>
        89 KB
      </td>
      <td style={{padding: '12px', textAlign: 'center', borderRight: '1px solid #e2e8f0', color: '#059669'}}>
        32 MB
      </td>
      <td style={{padding: '12px', textAlign: 'center', backgroundColor: '#fef3c7'}}>
        ⚠️ <strong>Consider</strong>
      </td>
    </tr>
    <tr>
      <td style={{padding: '12px', fontWeight: 'bold', borderRight: '1px solid #e2e8f0', backgroundColor: '#fee2e2'}}>
        Create React App
      </td>
      <td style={{padding: '12px', textAlign: 'center', borderRight: '1px solid #e2e8f0', color: '#dc2626'}}>
        2.1s
      </td>
      <td style={{padding: '12px', textAlign: 'center', borderRight: '1px solid #e2e8f0', color: '#dc2626'}}>
        245 KB
      </td>
      <td style={{padding: '12px', textAlign: 'center', borderRight: '1px solid #e2e8f0', color: '#dc2626'}}>
        78 MB
      </td>
      <td style={{padding: '12px', textAlign: 'center', backgroundColor: '#fecaca'}}>
        ❌ <strong>Deprecated</strong>
      </td>
    </tr>
  </tbody>
</table>
```

Complex Data Table with Nested Content​

This table demonstrates more complex content structure:

API EndpointMethodParametersResponseExample
/api/usersGETpage?: number
limit?: number
search?: string		json<br/>{<br/> "users": User[],<br/> "total": number<br/>}<br/>GET /api/users?page=1&limit=10
/api/users/:idGETid: string (path)json<br/>{<br/> "user": User | null<br/>}<br/>GET /api/users/123
/api/usersPOSTjson<br/>{<br/> "name": string,<br/> "email": string<br/>}<br/>json<br/>{<br/> "user": User,<br/> "success": true<br/>}<br/>POST /api/users
Body: {"name": "John", "email": "john@example.com"}
📋 Copy Code
```markdown
| API Endpoint | Method | Parameters | Response | Example |
|:-------------|:------:|:-----------|:---------|:--------|
| `/api/users` | `GET` | `page?: number`<br/>`limit?: number`<br/>`search?: string` | ```json<br/>{<br/>  "users": User[],<br/>  "total": number<br/>}<br/>``` | <code>GET /api/users?page=1&limit=10</code> |
| `/api/users/:id` | `GET` | `id: string` (path) | ```json<br/>{<br/>  "user": User \| null<br/>}<br/>``` | <code>GET /api/users/123</code> |
| `/api/users` | `POST` | ```json<br/>{<br/>  "name": string,<br/>  "email": string<br/>}<br/>``` | ```json<br/>{<br/>  "user": User,<br/>  "success": true<br/>}<br/>``` | <code>POST /api/users</code><br/>Body: `{"name": "John", "email": "john@example.com"}` |
```