Column Sizing

import {useState} from "react"

import {clsx} from "@qui/base"
import {CodeHighlight} from "@qui/mdx-docs"
import {QRadio, QRadioGroup} from "@qui/react"
import {
  ColumnDef,
  ColumnResizeDirection,
  ColumnResizeMode,
  flexRender,
  getCoreRowModel,
  QTable,
  QTbody,
  QTd,
  QTh,
  QThead,
  QTr,
  useReactTable,
} from "@qui/react-table"

import {Person} from "~utils/data"

import styles from "./resizer.module.css"

const defaultData: Person[] = [
  {
    age: 24,
    firstName: "tanner",
    lastName: "linsley",
    progress: 50,
    status: "relationship",
    userId: "1",
    visits: 100,
  },
  {
    age: 40,
    firstName: "tandy",
    lastName: "miller",
    progress: 80,
    status: "single",
    userId: "2",
    visits: 40,
  },
  {
    age: 45,
    firstName: "joe",
    lastName: "dirte",
    progress: 10,
    status: "complicated",
    userId: "3",
    visits: 20,
  },
]

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

export default function ColumnSizing() {
  const [columnResizeMode, setColumnResizeMode] =
    useState<ColumnResizeMode>("onChange")

  const [columnResizeDirection, setColumnResizeDirection] =
    useState<ColumnResizeDirection>("ltr")

  const table = useReactTable({
    columnResizeDirection,
    columnResizeMode,
    columns: defaultColumns,
    data: defaultData,
    getCoreRowModel: getCoreRowModel(),
  })

  const isLtr = table.options.columnResizeDirection === "ltr"

  return (
    <div className="overflow-x-auto p-2">
      <div className="mb-3 flex gap-4">
        <QRadioGroup
          className="flex flex-col gap-1"
          onChange={(event, value) => setColumnResizeMode(value)}
          value={columnResizeMode}
        >
          <span className="q-heading-xxs">Resize</span>
          <QRadio label="onChange" value="onChange" />
          <QRadio label="onEnd" value="onEnd" />
        </QRadioGroup>

        <QRadioGroup
          className="flex flex-col gap-1"
          onChange={(event, value) => setColumnResizeDirection(value)}
          value={columnResizeDirection}
        >
          <span className="q-heading-xxs">Direction</span>
          <QRadio label="ltr" value="ltr" />
          <QRadio label="rtl" value="rtl" />
        </QRadioGroup>
      </div>

      <div style={{direction: table.options.columnResizeDirection}}>
        <div className="overflow-x-auto">
          <QTable isResizable style={{width: table.getCenterTotalSize()}}>
            <QThead>
              {table.getHeaderGroups().map((headerGroup) => (
                <QTr key={headerGroup.id}>
                  {headerGroup.headers.map((header) => (
                    <QTh
                      key={header.id}
                      className="relative"
                      colSpan={header.colSpan}
                      style={{width: header.getSize()}}
                    >
                      {header.isPlaceholder
                        ? null
                        : flexRender(
                            header.column.columnDef.header,
                            header.getContext(),
                          )}

                      <div
                        className={clsx(styles.overlay)}
                        style={{
                          left: isLtr ? "unset" : -5,
                          right: isLtr ? -5 : "unset",
                        }}
                      >
                        <div
                          className={clsx(styles.resizer, {
                            [styles.isResizing]: header.column.getIsResizing(),
                          })}
                          onDoubleClick={() => header.column.resetSize()}
                          onMouseDown={(event) =>
                            header.getResizeHandler()(event)
                          }
                          onTouchStart={(event) =>
                            header.getResizeHandler()(event)
                          }
                          style={{
                            left: isLtr ? "unset" : 2,
                            right: isLtr ? 2 : "unset",
                            transform:
                              columnResizeMode === "onEnd" &&
                              header.column.getIsResizing()
                                ? `translateX(${
                                    (table.options.columnResizeDirection ===
                                    "rtl"
                                      ? -1
                                      : 1) *
                                    (table.getState().columnSizingInfo
                                      .deltaOffset ?? 0)
                                  }px)`
                                : "",
                          }}
                          suppressHydrationWarning
                        />
                      </div>
                    </QTh>
                  ))}
                </QTr>
              ))}
            </QThead>
            <QTbody>
              {table.getRowModel().rows.map((row) => (
                <QTr key={row.id}>
                  {row.getVisibleCells().map((cell) => (
                    <QTd
                      key={cell.id}
                      {...{
                        style: {
                          width: cell.column.getSize(),
                        },
                      }}
                    >
                      {flexRender(
                        cell.column.columnDef.cell,
                        cell.getContext(),
                      )}
                    </QTd>
                  ))}
                </QTr>
              ))}
            </QTbody>
          </QTable>
        </div>
      </div>

      <CodeHighlight
        className="mt-4 w-full"
        code={JSON.stringify(
          {
            columnSizing: table.getState().columnSizing,
            columnSizingInfo: table.getState().columnSizingInfo,
          },
          null,
          2,
        )}
        disableCopy
        language="json"
      />
    </div>
  )
}