Add multilevel column grouping support

[npokc123]

Add multilevel column grouping support

Summary

This PR introduces multilevel (nested) column grouping functionality to
mantine-datatable, allowing to create more complex and hierarchical table
headers.

Background

Hi! I'm relatively new to React (coming from Vue background), but I absolutely love
Mantine and mantine-datatable. While working on a project, I found myself needing
multilevel column grouping functionality and I try to implement it by myself.

Changes

• Extended DataTableColumnGroup type to support nested groups via optional groups
  property
• Added utility functions for handling multilevel groups
• Updated DataTableHeader to render multiple header rows based on group depth
• Modified DataTableColumnGroupHeaderCell to handle rowSpan for leaf groups
• Added example demonstrating 3-level column grouping

Example

groups={[
      {
        id: 'personal-info',
        title: 'Personal Information',
        groups: [
          {
            id: 'name-group',
            title: 'Name',
            columns: [
              {
                accessor: 'firstName',
                title: 'First Name',
                width: 120,
              },
              {
                accessor: 'lastName',
                title: 'Last Name',
                width: 120,
              },
            ],
          },
          {
            id: 'demographics',
            title: 'Demographics',
            columns: [
              {
                accessor: 'sex',
                title: 'Gender',
                width: 80,
              },
              {
                accessor: 'birthDate',
                title: 'Birth Date',
                width: 120,
                render: ({ birthDate }) => new Date(birthDate).toLocaleDateString(),
              },
            ],
          },
        ],
      },
      {
        id: 'contact-info',
        title: 'Contact Information',
        groups: [
          {
            id: 'email-group',
            title: 'Email',
            columns: [
              {
                accessor: 'email',
                title: 'Email Address',
                width: 250,
                ellipsis: true,
              },
            ],
          },
        ],
      },
      {
        id: 'work-info',
        title: 'Work Information',
        groups: [
          {
            id: 'identifiers',
            title: 'IDs',
            columns: [
              {
                accessor: 'id',
                title: 'Employee ID',
                width: 100,
                ellipsis: true,
              },
              {
                accessor: 'department.id',
                title: 'Department ID',
                width: 100,
                ellipsis: true,
              },
            ],
          },
        ],
      },
    ]}

I would really appreciate your feedback on this implementation. As I mentioned, I'm
new to React, Mantine and Mantine-datatable, so please let me know if there are any improvements I should make or edge-cases to mention.

[codesandbox]

Review or Edit in CodeSandbox

Open the branch in Web Editor • VS Code • Insiders

Open Preview