Column Visibility

import {useState} from "react"

import {CodeHighlight} from "@qui/mdx-docs"
import {QCheckbox} from "@qui/react"
import {
  ColumnDef,
  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 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 ColumnVisibility() {
  const [columnVisibility, setColumnVisibility] = useState({})

  const table = useReactTable({
    columns: defaultColumns,
    data: defaultData,
    getCoreRowModel: getCoreRowModel(),
    onColumnVisibilityChange: setColumnVisibility,
    state: {
      columnVisibility,
    },
  })

  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="mt-4 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}>
                    {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>

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