Header Groups

// children makes a column a header group. Only id, header, collapsed,
// collapseMode and headerGroupCell apply to the group itself; everything
// else belongs to the leaves. Nesting is unlimited.
const columns: ColumnDef<Person>[] = [
  {
    id: 'identity',
    header: 'Identity',
    children: [
      { id: 'name', header: 'Name', flex: 1, minWidth: 140 },
      { id: 'email', header: 'Email', flex: 1.4, minWidth: 200 }
    ]
  },
  {
    id: 'employment',
    header: 'Employment',
    children: [
      { id: 'team', header: 'Team', width: 120 },
      { id: 'role', header: 'Role', width: 120 },
      { id: 'salary', header: 'Salary', width: 130, align: 'right', type: 'currency' }
    ]
  }
];

// A group id shares the columns' namespace, so it needs one of its own: a
// group and a column that answer to the same id cannot both be addressed.

// Resizing a group distributes the change across the columns underneath it.

// A group folds when one of its children says what it is for.
// 'open' is the detail a closed group puts away, 'closed' the summary it
// folds down to, and a child that says neither is drawn either way.
const columns: ColumnDef<Person>[] = [
  { id: 'name', header: 'Name', flex: 1, pinned: 'left' },
  {
    id: 'pay',
    header: 'Pay',
    collapsed: false,              // its starting state
    children: [
      { id: 'salary', header: 'Total', columnGroupShow: 'closed', type: 'currency' },
      { id: 'base', header: 'Base', columnGroupShow: 'open', type: 'currency' },
      { id: 'bonus', header: 'Bonus', columnGroupShow: 'open', type: 'currency' },
      { id: 'currency', header: 'Ccy', width: 80 }   // neither: always drawn
    ]
  }
];

// The toggle sits at the trailing edge of the group's own header cell, and
// the column menu of every column in the group carries the same action.

// A toggle is only offered when the state it would switch to leaves a
// column of the group on screen: a group whose children are all 'open'
// would fold its own header away, and nothing would be left to click.

// The other way to fold: the whole group goes, header and cells alike,
// and a narrow drawer stands in its place with the group's name down its
// length. Nothing needs columnGroupShow, because the drawer is what
// unfolds the group again.
const columns: ColumnDef<Person>[] = [
  { id: 'name', header: 'Name', flex: 1 },
  {
    id: 'planning',
    header: 'Planning',
    collapseMode: 'rail',
    collapsed: true,               // opens folded
    children: [joined, rating]
  }
];

// The drawer runs the full height of the grid, header included, and the
// name starts at the top and stays there as the rows scroll. Clicking
// anywhere down it opens the group again, which is why no toggle sits in
// the header over it.

// The rail is a column the grid draws for itself, like the selection
// checkbox: it holds no data, so it is never exported, copied or filtered
// on. A pinned group folds to a pinned drawer, which stays at its edge
// while the rest scrolls.

// The other way to fold: the whole group goes, header and cells alike,
// and a narrow drawer stands in its place with the group's name down its
// length. Nothing needs columnGroupShow, because the drawer is what
// unfolds the group again.
const columns: ColumnDef<Person>[] = [
  { id: 'name', header: 'Name', flex: 1 },
  {
    id: 'planning',
    header: 'Planning',
    collapseMode: 'rail',
    collapsed: true,               // opens folded
    children: [joined, rating]
  }
];

// The drawer runs the full height of the grid, header included, and the
// name starts at the top and stays there as the rows scroll. Clicking
// anywhere down it opens the group again, which is why no toggle sits in
// the header over it.

// The rail is a column the grid draws for itself, like the selection
// checkbox: it holds no data, so it is never exported, copied or filtered
// on. A pinned group folds to a pinned drawer, which stays at its edge
// while the rest scrolls.

// columnGroupShow reads against the nearest group above the column, so a
// nested group's own children answer to it rather than to the outer one.
const columns: ColumnDef<Row>[] = [
  { id: 'name', header: 'Name', flex: 1 },
  {
    id: 'quarter',
    header: 'Q1',
    children: [
      { id: 'q1Total', header: 'Total', columnGroupShow: 'closed' },
      {
        id: 'months',
        header: 'By month',
        columnGroupShow: 'open',       // the whole nested group folds with Q1
        children: [
          { id: 'jan', header: 'Jan' },
          { id: 'feb', header: 'Feb', columnGroupShow: 'open' },
          { id: 'mar', header: 'Mar', columnGroupShow: 'open' }
        ]
      }
    ]
  }
];

// Folding Q1 puts the nested group away with everything under it. Folding
// By month keeps Jan, which declares nothing against that group, and puts
// Feb and Mar away.

<script lang="ts">
  import type { HeaderGroupContext } from '@sv5ui/datagrid';
</script>

<!-- headerGroupCell draws a group header the way headerCell draws a leaf
     one. The grid's own fold control stays beside whatever it draws, and
     \`header\` stays the label everything non-visual reads: the column menu,
     the announcer, and the name of the fold action. -->
{#snippet payHeader({ cell, toggle }: HeaderGroupContext)}
  <button onclick={toggle} class="flex items-center gap-1.5">
    <Icon name={cell.collapsed ? 'lucide:chevrons-right' : 'lucide:chevrons-left'} />
    {cell.header}
    <Badge label={String(cell.span)} size="xs" />
  </button>
{/snippet}

<!-- cell carries the group's id, header, span, the leaves under it, and
     whether it is collapsible and collapsed. toggle does nothing on a
     group that cannot fold. -->
{ id: 'pay', header: 'Pay', headerGroupCell: payHeader, children: [...] }