Fully Controlled

import {useState} from "react"

import {QButton, QPagination, QProgressCircle} from "@qui/react"
import {
  ColumnDef,
  flexRender,
  getCoreRowModel,
  getPaginationRowModel,
  QTable,
  QTbody,
  QTd,
  QTfoot,
  QTh,
  QThead,
  QTr,
  useReactTable,
  useTablePagination,
} from "@qui/react-table"

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

const defaultColumns: 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 FullyControlled() {
  const {data = [], isFetching, refetch} = usePersonData(1000)

  const refreshData = () => refetch()

  // Create the table and pass your options
  const table = useReactTable({
    columns: defaultColumns,
    data,
    getCoreRowModel: getCoreRowModel(),
    getPaginationRowModel: getPaginationRowModel(),
  })

  // Manage your own state
  const [state, setState] = useState(table.initialState)

  // Override the state managers for the table to your own
  table.setOptions((prev) => ({
    ...prev,
    onStateChange: setState,
    state,
  }))

  const paginationProps = useTablePagination(table)

  return (
    <div className="flex flex-col overflow-x-auto p-2">
      <div className="mb-3 flex items-center gap-2">
        <QButton onClick={refreshData} variant="outline">
          Refresh Data
        </QButton>
        {isFetching ? <QProgressCircle size="xs" /> : null}
      </div>
      <div className="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.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>

        <QPagination
          {...paginationProps}
          className="mt-4"
          renderPageMeta={(context) =>
            `${context.currentPage} of ${context.totalPages}`
          }
          rowsPerPageLabel="Show"
          rowsPerPageOptions={[10, 20, 50]}
        />
      </div>
    </div>
  )
}