Column Groups

import {useState} from "react"

import {
  createColumnHelper,
  flexRender,
  getCoreRowModel,
  QTable,
  QTbody,
  QTd,
  QTfoot,
  QTh,
  QThead,
  QTr,
  useReactTable,
} from "@qui/react-table"

type Person = {
  age: number
  firstName: string
  lastName: string
  progress: number
  status: string
  visits: number
}

const defaultData: Person[] = [
  {
    age: 24,
    firstName: "tanner",
    lastName: "linsley",
    progress: 50,
    status: "In Relationship",
    visits: 100,
  },
  {
    age: 40,
    firstName: "tandy",
    lastName: "miller",
    progress: 80,
    status: "Single",
    visits: 40,
  },
  {
    age: 45,
    firstName: "joe",
    lastName: "dirte",
    progress: 10,
    status: "Complicated",
    visits: 20,
  },
]

const columnHelper = createColumnHelper<Person>()

const columns = [
  columnHelper.group({
    // footer: props => props.column.id,
    columns: [
      columnHelper.accessor("firstName", {
        cell: (info) => info.getValue(),
        footer: (props) => props.column.id,
        header: () => <span>First Name</span>,
      }),
      columnHelper.accessor("lastName", {
        cell: (info) => info.getValue(),
        footer: (props) => props.column.id,
        header: "Last Name",
      }),
    ],
    header: () => <span>User Name</span>,
    id: "userName",
  }),
  columnHelper.group({
    columns: [
      columnHelper.accessor("age", {
        footer: (props) => props.column.id,
        header: "Age",
      }),
      columnHelper.accessor("visits", {
        footer: (props) => props.column.id,
        header: "Visits",
      }),
      columnHelper.accessor("status", {
        footer: (props) => props.column.id,
        header: "Status",
      }),
      columnHelper.accessor("progress", {
        footer: (props) => props.column.id,
        header: "Profile Progress",
      }),
    ],
    footer: (props) => props.column.id,
    header: "Info",
  }),
]

export default function ColumnGroupsTable() {
  const [data] = useState(() => [...defaultData])

  const table = useReactTable({
    columns,
    data,
    filterFns: {},
    getCoreRowModel: getCoreRowModel(),
  })

  return (
    <div className="overflow-x-auto p-2">
      <QTable>
        <QThead>
          {table.getHeaderGroups().map((headerGroup) => (
            <QTr key={headerGroup.id}>
              {headerGroup.headers.map((header) => (
                <QTh key={header.id} colSpan={header.colSpan}>
                  {header.isPlaceholder
                    ? null
                    : flexRender(
                        header.column.columnDef.header,
                        header.getContext(),
                      )}
                </QTh>
              ))}
            </QTr>
          ))}
        </QThead>
        <QTbody>
          {table.getRowModel().rows.map((row) => (
            <QTr key={row.id}>
              {row.getVisibleCells().map((cell) => (
                <QTd key={cell.id}>
                  {flexRender(cell.column.columnDef.cell, cell.getContext())}
                </QTd>
              ))}
            </QTr>
          ))}
        </QTbody>
        <QTfoot>
          {table.getFooterGroups().map((footerGroup) => (
            <QTr key={footerGroup.id}>
              {footerGroup.headers.map((header) => (
                <QTh key={header.id} colSpan={header.colSpan}>
                  {header.isPlaceholder
                    ? null
                    : flexRender(
                        header.column.columnDef.footer,
                        header.getContext(),
                      )}
                </QTh>
              ))}
            </QTr>
          ))}
        </QTfoot>
      </QTable>
    </div>
  )
}