Nested Headers in React: How Simple Table Simplifies Complex Tables

Nested headers, also known as hierarchical or grouped headers, allow you to create multi-level column structures in your data tables. Instead of having a flat list of columns, you can group related columns under parent headers, creating a logical hierarchy that makes complex data easier to understand and navigate.

Imagine you're building a student grade tracking system. Instead of having columns like "Math Score", "Science Score", "History Score" scattered across your table, you can group them under a parent header called "Test Scores". This creates a cleaner, more organized view that users can quickly comprehend.

Common Use Cases for Nested Headers:

• • Financial Reports: Group columns by quarters (Q1, Q2, Q3, Q4) with subcategories for revenue, expenses, profit
• • Analytics Dashboards: Organize metrics by time periods or data sources
• • Employee Management: Group personal information, contact details, and performance metrics
• • Product Catalogs: Organize specifications, pricing, and availability data
• • Survey Results: Group questions by categories or survey sections

Most React table libraries make implementing nested headers unnecessarily complicated. You often need to:

• • Write complex configuration objects with deeply nested structures
• • Manually calculate colspan and rowspan values for proper header rendering
• • Handle header-specific styling and event handling separately
• • Deal with complicated APIs that don't follow intuitive patterns
• • Struggle with maintaining responsive behavior across different screen sizes

Simple Table makes nested headers incredibly straightforward. The key insight is that nested headers should work exactly like you'd expect: just add a `children` array to any header object, and it becomes a parent header with child columns.

Here's how simple it is:

const headers = [
  {
    accessor: "name",
    label: "Name",
    width: "1fr",
    isSortable: true,
    type: "string",
  },
  {
    accessor: "score",
    label: "Test Scores", // This becomes the parent header
    width: 300,
    children: [ // Simply add children array
      {
        accessor: "mathScore",
        label: "Math",
        width: 100,
        isSortable: true,
        type: "number",
      },
      {
        accessor: "scienceScore",
        label: "Science",
        width: 100,
        isSortable: true,
        type: "number",
      },
      {
        accessor: "historyScore",
        label: "History",
        width: 100,
        isSortable: true,
        type: "number",
      },
    ],
  },
];

Key Benefits of Simple Table's Approach:

Let's look at a complete example of a student grade tracking table with nested headers. This example shows how you can group test scores under a single parent header while maintaining full functionality for each individual score column.

import { SimpleTable, HeaderObject } from "simple-table-core";
import "simple-table-core/styles.css";

const headers: HeaderObject[] = [
  {
    accessor: "id",
    label: "ID",
    width: 80,
    isSortable: true,
    type: "number",
  },
  {
    accessor: "name",
    label: "Name",
    width: "1fr",
    isSortable: true,
    type: "string",
  },
  {
    accessor: "score",
    label: "Test Scores",
    width: 300,
    isSortable: false, // Parent headers typically don't sort
    type: "number",
    children: [
      {
        accessor: "mathScore",
        label: "Math",
        width: 100,
        isSortable: true,
        type: "number",
        align: "right",
        // Custom renderer to highlight high scores
        cellRenderer: ({ row, accessor }) => {
          const score = row[accessor] as number;
          return score >= 90 ? 
            <span className="text-green-600 font-bold">{score}</span> : 
            score;
        },
      },
      {
        accessor: "scienceScore",
        label: "Science",
        width: 100,
        isSortable: true,
        type: "number",
        align: "right",
        cellRenderer: ({ row, accessor }) => {
          const score = row[accessor] as number;
          return score >= 90 ? 
            <span className="text-green-600 font-bold">{score}</span> : 
            score;
        },
      },
      {
        accessor: "historyScore",
        label: "History",
        width: 100,
        isSortable: true,
        type: "number",
        align: "right",
        cellRenderer: ({ row, accessor }) => {
          const score = row[accessor] as number;
          return score >= 90 ? 
            <span className="text-green-600 font-bold">{score}</span> : 
            score;
        },
      },
    ],
  },
  {
    accessor: "grade",
    label: "Overall Grade",
    width: 120,
    isSortable: true,
    type: "string",
    align: "center",
  },
];

export default function StudentGradeTable() {
  return (
    <SimpleTable
      defaultHeaders={headers}
      rows={studentData}
      theme="light"
      height="400px"
      columnResizing
    />
  );
}

Notice how each child column (Math, Science, History) has its own custom renderer to highlight scores above 90 in green. This demonstrates that nested columns have full access to all the same features as regular columns.

Design Guidelines:

• • Logical Grouping: Only group columns that are truly related - users should immediately understand why columns are grouped together
• • Parent Header Names: Use clear, descriptive names for parent headers that accurately represent the grouped data
• • Consistent Width: Ensure child column widths add up to make the parent header look balanced
• • Sorting Logic: Parent headers usually shouldn't be sortable since they don't represent actual data

Technical Considerations:

• • Performance: Nested headers don't impact performance - they're just a display organization tool
• • Responsive Design: Consider how nested headers will look on mobile devices and smaller screens
• • Accessibility: Screen readers will understand the hierarchical structure automatically
• • Styling: Parent and child headers can be styled independently using CSS classes

Nested headers don't have to be complicated. Simple Table's intuitive approach with the `children` array pattern makes it easy to create well-organized, hierarchical table structures that users can quickly understand and navigate.

Whether you're building financial dashboards, student management systems, or any application with complex data relationships, nested headers can significantly improve the user experience without adding development complexity.