Table

import {Table, Tbody, Td, Th, Thead, Tr} from "@qui/react-vscode"

export default function SimpleTable() {
  return (
    <Table>
      <Thead>
        <Tr>
          <Th align="left">Asset Name</Th>
          <Th align="left">Asset Type</Th>
          <Th align="left">Target OS</Th>
          <Th align="left">Agreement Type</Th>
        </Tr>
      </Thead>
      <Tbody>
        <Tr>
          <Td>Qualcomm® Telematics SDK</Td>
          <Td>Software Tool</Td>
          <Td>Any</Td>
          <Td>Public</Td>
        </Tr>
        <Tr>
          <Td>TPS Location SDK v5.15.3 for Android</Td>
          <Td>Software Package</Td>
          <Td>Any</Td>
          <Td>Public</Td>
        </Tr>
        <Tr>
          <Td>QCS6490 Linux</Td>
          <Td>Software Tool Product</Td>
          <Td>Any</Td>
          <Td>Public</Td>
        </Tr>
      </Tbody>
    </Table>
  )
}

import {useState} from "react"

import {clsx} from "@qui/base"
import {
  createColumnHelper,
  flexRender,
  getCoreRowModel,
  getSortedRowModel,
  SortingState,
  useReactTable,
} from "@qui/react-table"
import {Icon, Table, Tbody, Td, Th, Thead, Tr} from "@qui/react-vscode"

interface Software {
  agreementType: string
  assetType: string
  name: string
  targetOs: string
}

const defaultData: Software[] = [
  {
    agreementType: "Public",
    assetType: "Software Tool",
    name: "Qualcomm® Telematics SDK",
    targetOs: "Any",
  },
  {
    agreementType: "Public",
    assetType: "Software Package",
    name: "TPS Location SDK v5.15.3 for Android",
    targetOs: "Any",
  },
  {
    agreementType: "Public",
    assetType: "Software Tool Product",
    name: "QCS6490 Linux",
    targetOs: "Any",
  },
]

const columnHelper = createColumnHelper<Software>()

const columns = [
  columnHelper.accessor("name", {
    cell: (info) => info.getValue(),
    footer: (info) => info.column.id,
    header: () => "Asset Name",
  }),
  columnHelper.accessor("assetType", {
    cell: (info) => info.getValue(),
    footer: (info) => info.column.id,
    header: "Asset Type",
  }),
  columnHelper.accessor("targetOs", {
    footer: (info) => info.column.id,
    header: "Target OS",
  }),
  columnHelper.accessor("agreementType", {
    footer: (info) => info.column.id,
    header: "Agreement Type",
    minSize: 200,
  }),
]

export default function Utilities() {
  const [data] = useState(() => [...defaultData])
  const [sortingState, setSortingState] = useState<SortingState>([])
  const table = useReactTable({
    columns,
    data,
    getCoreRowModel: getCoreRowModel(),
    getSortedRowModel: getSortedRowModel(),
    onSortingChange: setSortingState,
    state: {
      sorting: sortingState,
    },
  })

  return (
    <div className="overflow-x-auto">
      <Table>
        <Thead>
          {table.getHeaderGroups().map((headerGroup) => (
            <Tr key={headerGroup.id}>
              {headerGroup.headers.map((header) => {
                if (header.isPlaceholder) {
                  return (
                    <Th
                      key={header.id}
                      colSpan={header.colSpan}
                      style={{width: header.getSize()}}
                    />
                  )
                }
                const canSort = header.column.getCanSort()
                const sorted = header.column.getIsSorted()
                return (
                  <Th
                    key={header.id}
                    align="left"
                    colSpan={header.colSpan}
                    style={{width: header.getSize()}}
                  >
                    <div className="inline-flex items-center gap-2">
                      {flexRender(
                        header.column.columnDef.header,
                        header.getContext(),
                      )}
                      {canSort ? (
                        <Icon
                          as="button"
                          className={clsx(
                            "transition-[transform] ease-in-out",
                            {
                              "rotate-90": !sorted,
                              "rotate-180": sorted === "desc",
                            },
                          )}
                          icon={sorted ? "arrow-up" : "arrow-swap"}
                          onClick={header.column.getToggleSortingHandler()}
                          size={14}
                        />
                      ) : null}
                    </div>
                  </Th>
                )
              })}
            </Tr>
          ))}
        </Thead>
        <Tbody>
          {table.getRowModel().rows.map((row) => {
            return (
              <Tr key={row.id}>
                {row.getVisibleCells().map((cell) => {
                  return (
                    <Td key={cell.id}>
                      {flexRender(
                        cell.column.columnDef.cell,
                        cell.getContext(),
                      )}
                    </Td>
                  )
                })}
              </Tr>
            )
          })}
        </Tbody>
      </Table>
    </div>
  )
}