import type { ColumnDef } from "@/components/kibo-ui/table/index"import {  TableBody,  TableCell,  TableColumnHeader,  TableHead,  TableHeader,  TableHeaderGroup,  TableProvider,  TableRow,} from "@/components/kibo-ui/table/index"type User = {  name: string  email: string}const columns: ColumnDef<User, unknown>[] = [  {    accessorKey: "name",    header: ({ column }) => <TableColumnHeader column={column} title="Name" />,    cell: ({ getValue }) => String(getValue()),  },  {    accessorKey: "email",    header: ({ column }) => <TableColumnHeader column={column} title="Email" />,    cell: ({ getValue }) => String(getValue()),  },]const data: User[] = [  { name: "Ada Lovelace", email: "ada@example.com" },  { name: "Grace Hopper", email: "grace@example.com" },  { name: "Alan Turing", email: "alan@example.com" },  { name: "Katherine Johnson", email: "katherine@example.com" },]export default function TableDemo() {  return (    <div className="w-full max-w-lg">      <TableProvider columns={columns} data={data}>        <TableHeader>          {({ headerGroup }) => (            <TableHeaderGroup headerGroup={headerGroup}>              {({ header }) => <TableHead header={header} />}            </TableHeaderGroup>          )}        </TableHeader>        <TableBody>          {({ row }) => (            <TableRow row={row}>              {({ cell }) => <TableCell cell={cell} />}            </TableRow>          )}        </TableBody>      </TableProvider>    </div>  )}