HEYTOB

    Design Table in Ticket Platform: Complete Guide

    Learn how to design an effective data table for a ticket management platform with best practices, UI patterns, and real-world implementation tips.

    Tob

    Tob

    Backend Developer

    8 min readTutorials
    Design Table in Ticket Platform: Complete Guide

    Building a ticket platform? The data table is often the centerpiece of your application. Users spend most of their time browsing, filtering, and managing tickets here. Getting the table design right is crucial for usability and user satisfaction.

    In this guide, we'll explore how to design an effective table for a ticket management platform, covering UI patterns, functionality, and implementation best practices.

    Why Tables Matter in Ticket Platforms

    A ticket table is where support teams live. They need to:

    • Quickly scan hundreds or thousands of tickets
    • Identify high-priority issues at a glance
    • Filter and sort by multiple criteria
    • Take quick actions without navigating away
    • Understand ticket status visually

    Poor table design can cripple productivity. Great table design can make a massive difference.

    Key Features of a Great Ticket Table

    1. Essential Columns

    Keep your default columns focused and scannable:

    text
    [Checkbox] | Ticket ID | Subject | Status | Priority | Assigned To | Created | Updated

    Best practices:

    • Ticket ID: Clickable, links to detail view
    • Subject: Truncated with tooltip for long text
    • Status: Visual badge with color coding
    • Priority: Icon or color indicator (red=urgent, yellow=medium, green=low)
    • Assigned To: Avatar or name
    • Created/Updated: Relative time (e.g., "2 hours ago")

    2. Visual Status Indicators

    Use colors strategically but accessibly:

    StatusColorIconUse Case
    OpenBlue🔴New incoming tickets
    In ProgressYellow⚙️Being worked on
    On HoldGray⏸️Waiting for customer
    ResolvedGreen✅Fixed and closed
    ClosedNeutral❌Archived/old

    Accessibility tip: Never rely on color alone. Use icons and text labels alongside colors.

    3. Responsive Design

    Tables can break on mobile. Here are solutions:

    Option A: Horizontal Scroll

    text
    ────────────────────────────────────────────────
  Desktop: Full table visible
────────────────────────────────────────────────

Mobile: Scroll horizontally to see all columns
  [ID] [Subject] [Status] ───→ [Priority] [Assigned]

    Option B: Card Layout Switch to a card-based layout on mobile:

    text
    ┌─────────────────────────┐
│ #12345 - Login Issue    │
│ Status: Open            │
│ Priority: High          │
│ Assigned: John          │
└─────────────────────────┘

    Option C: Smart Column Hiding Hide low-priority columns on mobile, but keep them accessible in a details view.

    4. Sorting and Filtering

    Users need control over data:

    Sorting:

    • Click column headers to sort ascending/descending
    • Show visual indicator (↑/↓ arrows) for active sort
    • Support multi-column sorting (Shift+Click)

    Filtering:

    • Filter by Status, Priority, Assigned To, Date Range
    • Quick filters for common views: "My Tickets", "Unassigned", "Critical"
    • Advanced search with regex support for power users

    5. Row Actions

    Give users fast ways to interact with tickets:

    Option A: Right-click Context Menu

    text
    Right Click → Assign | Change Priority | Close | Delete | More

    Option B: Hover Actions

    text
    [Ticket Info] ────────────────────────── [✎ Edit] [→ Forward] [⋮ More]

    Option C: Inline Actions

    text
    [Ticket Info] [Status Dropdown] [Assigned Dropdown] [⋮ More]

    Best approach: Combine with keyboard shortcuts for power users:

    • A = Assign
    • P = Change Priority
    • C = Close Ticket
    • D = Delete

    6. Pagination or Infinite Scroll?

    Pagination (Better for ticket platforms):

    text
    ← Previous | 1 [2] 3 ... 100 | Next →
Showing 25 of 5,432 tickets

    Why pagination over infinite scroll?

    • Users can jump to specific pages
    • Predictable performance
    • Can set page size (25, 50, 100 per page)
    • Shows total count upfront

    7. Bulk Actions

    Support teams need to process multiple tickets:

    text
    [Checkbox] Subject    ────────────────────
  ☑️  Ticket 1
  ☑️  Ticket 2
  ☑️  Ticket 3

Selected 3 tickets: [Assign] [Change Priority] [Close] [Archive]

    Implementation Example (React)

    Here's a simplified example using React:

    typescript
    import React, { useState } from 'react';
import { ChevronUp, ChevronDown } from 'lucide-react';

interface Ticket {
  id: string;
  subject: string;
  status: 'open' | 'in-progress' | 'on-hold' | 'resolved';
  priority: 'low' | 'medium' | 'high' | 'urgent';
  assignedTo: string;
  createdAt: Date;
}

export function TicketTable({ tickets }: { tickets: Ticket[] }) {
  const [sortBy, setSortBy] = useState<string>('createdAt');
  const [sortOrder, setSortOrder] = useState<'asc' | 'desc'>('desc');
  const [selectedIds, setSelectedIds] = useState<Set<string>>(new Set());

  const handleSort = (column: string) => {
    if (sortBy === column) {
      setSortOrder(sortOrder === 'asc' ? 'desc' : 'asc');
    } else {
      setSortBy(column);
      setSortOrder('asc');
    }
  };

  const statusColors: Record<string, string> = {
    'open': 'bg-blue-100 text-blue-800',
    'in-progress': 'bg-yellow-100 text-yellow-800',
    'on-hold': 'bg-gray-100 text-gray-800',
    'resolved': 'bg-green-100 text-green-800',
  };

  const priorityColors: Record<string, string> = {
    'low': 'text-green-600',
    'medium': 'text-yellow-600',
    'high': 'text-orange-600',
    'urgent': 'text-red-600',
  };

  return (
    <div className="overflow-x-auto">
      <table className="w-full border-collapse">
        <thead>
          <tr className="border-b-2 border-gray-200 bg-gray-50">
            <th className="px-4 py-3 text-left">
              <input type="checkbox" />
            </th>
            {[
              { key: 'id', label: 'Ticket ID' },
              { key: 'subject', label: 'Subject' },
              { key: 'status', label: 'Status' },
              { key: 'priority', label: 'Priority' },
              { key: 'assignedTo', label: 'Assigned To' },
              { key: 'createdAt', label: 'Created' },
            ].map(col => (
              <th
                key={col.key}
                onClick={() => handleSort(col.key)}
                className="px-4 py-3 text-left cursor-pointer hover:bg-gray-100"
              >
                <div className="flex items-center gap-2">
                  {col.label}
                  {sortBy === col.key && (
                    sortOrder === 'asc' ? <ChevronUp size={16} /> : <ChevronDown size={16} />
                  )}
                </div>
              </th>
            ))}
          </tr>
        </thead>
        <tbody>
          {tickets.map(ticket => (
            <tr key={ticket.id} className="border-b border-gray-200 hover:bg-gray-50">
              <td className="px-4 py-3">
                <input type="checkbox" />
              </td>
              <td className="px-4 py-3 font-mono text-sm text-blue-600 cursor-pointer hover:underline">
                {ticket.id}
              </td>
              <td className="px-4 py-3 max-w-xs truncate">{ticket.subject}</td>
              <td className="px-4 py-3">
                <span className={`px-2 py-1 rounded text-sm font-medium ${statusColors[ticket.status]}`}>
                  {ticket.status}
                </span>
              </td>
              <td className={`px-4 py-3 font-semibold ${priorityColors[ticket.priority]}`}>
                {ticket.priority}
              </td>
              <td className="px-4 py-3">{ticket.assignedTo}</td>
              <td className="px-4 py-3 text-gray-500 text-sm">
                {new Date(ticket.createdAt).toLocaleDateString()}
              </td>
            </tr>
          ))}
        </tbody>
      </table>
    </div>
  );
}

    Performance Considerations

    For large datasets (thousands of tickets), consider:

    Virtual Scrolling

    Render only visible rows to improve performance:

    typescript
    import { FixedSizeList } from 'react-window';

<FixedSizeList
  height={600}
  itemCount={tickets.length}
  itemSize={48}
  width="100%"
>
  {({ index, style }) => (
    <div style={style}>
      <TicketRow ticket={tickets[index]} />
    </div>
  )}
</FixedSizeList>

    Server-Side Sorting & Filtering

    Don't process everything in the browser. Let your backend handle:

    • Sorting large result sets
    • Advanced filtering with complex queries
    • Pagination

    Accessibility Best Practices

    • Use semantic HTML (, , )
    • Add aria-label and aria-sort attributes
    • Ensure color contrast meets WCAG AA standards
    • Support keyboard navigation (Tab, Enter, Arrow keys)
    • Provide screen reader friendly status labels

      • Example:

      html
      <th aria-label="Status" aria-sort="ascending">
  Status ↑
</th>

      Common Mistakes to Avoid

      ❌ Too many columns - Users get overwhelmed ✅ Start with 6-8 essential columns, hide rest in detail view

      ❌ No loading states - Users don't know if the page is working ✅ Show skeleton loaders while fetching data

      ❌ Horizontal scroll on desktop - Bad UX ✅ Use responsive design to adapt to screen size

      ❌ No keyboard shortcuts - Power users hate you ✅ Implement common keyboard shortcuts

      ❌ Unclear visual hierarchy - Hard to scan ✅ Use font sizes, colors, and spacing strategically

      Conclusion

      A well-designed ticket table is the backbone of a great support platform. Focus on:

      1. Clarity - Users can scan and understand ticket status instantly
      2. Control - Sorting, filtering, and bulk actions
      3. Performance - Handles thousands of tickets smoothly
      4. Accessibility - Works for all users, including keyboard and screen reader users
      5. Responsiveness - Works great on desktop, tablet, and mobile

      Remember: Every second saved in the table is multiplied across hundreds of support agents per day. Small improvements compound into massive productivity gains.

      Happy designing!

      UI DesignTicket ManagementData TablesUX Best PracticesFrontend

      Related Blog

      How to Start Development with Agentic Workflow - HeyTobi

      How to Start Development with Agentic Workflow

      Tutorials · 12 min read

      Design Table in Ticket Platform: Complete Guide | Tob