Column Ordering

import {useState} from "react"

import {faker} from "@faker-js/faker"

import {CodeHighlight} from "@qui/mdx-docs"
import {QButton, QCheckbox, QProgressCircle} from "@qui/react"
import {
  ColumnDef,
  ColumnOrderState,
  flexRender,
  getCoreRowModel,
  QTable,
  QTbody,
  QTd,
  QTfoot,
  QTh,
  QThead,
  QTr,
  useReactTable,
} from "@qui/react-table"

import {Person, usePersonData} from "~utils/data"

const columns: ColumnDef<Person>[] = [
  {
    columns: [
      {
        accessorKey: "firstName",
        cell: (info) => info.getValue(),
        footer: (props) => props.column.id,
        header: "First Name",
      },
      {
        accessorFn: (row) => row.lastName,
        cell: (info) => info.getValue(),
        footer: (props) => props.column.id,
        header: "Last Name",
        id: "lastName",
      },
    ],
    footer: (props) => props.column.id,
    header: "Name",
  },
  {
    columns: [
      {
        accessorKey: "age",
        footer: (props) => props.column.id,
        header: "Age",
      },
      {
        accessorKey: "visits",
        footer: (props) => props.column.id,
        header: "Visits",
      },
      {
        accessorKey: "status",
        footer: (props) => props.column.id,
        header: "Status",
      },
      {
        accessorKey: "progress",
        footer: (props) => props.column.id,
        header: "Profile Progress",
      },
    ],
    footer: (props) => props.column.id,
    header: "Info",
  },
]

export default function ColumnOrdering() {
  const [columnVisibility, setColumnVisibility] = useState({})
  const [columnOrder, setColumnOrder] = useState<ColumnOrderState>([])

  const {data = [], isFetching, refetch} = usePersonData(20)

  const rerender = () => refetch()

  const table = useReactTable({
    columns,
    data,
    getCoreRowModel: getCoreRowModel(),
    onColumnOrderChange: setColumnOrder,
    onColumnVisibilityChange: setColumnVisibility,
    state: {
      columnOrder,
      columnVisibility,
    },
  })

  const randomizeColumns = () => {
    table.setColumnOrder(
      faker.helpers.shuffle(table.getAllLeafColumns().map((d) => d.id)),
    )
  }

  return (
    <div className="p-2">
      <div className="q-border-default inline-flex flex-col gap-1 rounded border px-2 py-1">
        <QCheckbox
          checked={table.getIsAllColumnsVisible()}
          label={<span className="q-body-s strong">Toggle All</span>}
          onChange={table.getToggleAllColumnsVisibilityHandler()}
        />

        {table.getAllLeafColumns().map((column) => {
          return (
            <QCheckbox
              key={column.id}
              checked={column.getIsVisible()}
              label={column.id}
              onChange={column.getToggleVisibilityHandler()}
            />
          )
        })}
      </div>
      <div className="h-4" />
      <div className="flex flex-wrap items-center gap-2">
        <QButton onClick={rerender} variant="outline">
          Regenerate
        </QButton>
        <QButton onClick={randomizeColumns} variant="outline">
          Shuffle Columns
        </QButton>
        {isFetching ? <QProgressCircle size="xs" /> : null}
      </div>
      <div className="h-4" />

      <div className="min-w-[600px] overflow-x-auto">
        <QTable>
          <QThead>
            {table.getHeaderGroups().map((headerGroup) => (
              <QTr key={headerGroup.id}>
                {headerGroup.headers.map((header) => (
                  <QTh
                    key={header.id}
                    colSpan={header.colSpan}
                    style={{width: header.column.getSize()}}
                  >
                    {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 className="mt-4">
          <CodeHighlight
            className="w-fit"
            code={JSON.stringify(
              {columnOrder: table.getState().columnOrder},
              null,
              2,
            )}
            disableCopy
            language="json"
          />
        </div>
      </div>
    </div>
  )
}