Issue with Displaying Data in ShadCN Data Table Using JavaScript in Next.js

I’m working on a Next.js project where I’m trying to implement a data table using ShadCN’s Data Table component. The examples provided are in TypeScript, but since I’m not familiar with TypeScript, I tried to convert the logic into JavaScript. However, I’m running into some issues.

Initially, I encountered the error: TypeError: Cannot destructure property 'columns' of 'data' as it is undefined. To resolve this, I added a ternary operator to handle undefined data, which removed the error, but now I’m facing a new issue: the table displays a message saying No data available, even though I’ve defined the data.

Here are the relevant code snippets:

./data/data.js

export const data = {
  columns: [
    {
      Header: "ID",
      accessor: "id",
    },
    // other headers and accessors
  ],
  data: [
    {
      fullName: "Morlee Tapson",
      email: "[email protected]",
      salary: 30000.0,
      currency: "INR",
    },
    // other data here
  ],
};

/components/ReusableTable.jsx

import {
  Table,
  TableCaption,
  TableHeader,
  TableCell,
} from "@/components/ui/table";
import {
  flexRender,
  getCoreRowModel,
  useReactTable,
} from "@tanstack/react-table";
import Link from "next/link";

export default function ReusableTable({
  data,
  captionLink = "",
  captionText = "",
}) {
  const { columns, rows } = data || {}; //data mentioned

  console.log("columns:", columns); // returns undefined
  console.log("rows:", rows); // returns undefined

  const table = useReactTable({
    columns: columns || [], // Fallback to empty array if undefined
    data: rows || [], // Fallback to empty array if undefined
    getCoreRowModel: getCoreRowModel(),
  });

  return (
    <>
      <Table className="mt-5">
        <TableCaption className="text-left">
          <Link href={captionLink}>{captionText}</Link>
        </TableCaption>
        <TableHeader>
          {table.getHeaderGroups().map((headerGroup) => (
            <tr key={headerGroup.id}>
              {headerGroup.headers.map((header) => (
                <TableCell key={header.id}>
                  {flexRender(
                    header.column.columnDef.header,
                    header.getContext()
                  )}
                </TableCell>
              ))}
            </tr>
          ))}
        </TableHeader>
        <tbody>
          {table.getRowModel().rows.map((row) => (
            <tr key={row.id}>
              {row.getVisibleCells().map((cell) => (
                <TableCell key={cell.id}>
                  {flexRender(cell.column.columnDef.cell, cell.getContext())}
                </TableCell>
              ))}
            </tr>
          ))}
        </tbody>
      </Table>
    </>
  );
}

./app/page.jsx

import ReusableTable from "@/components/ReusableTable";
import { columns, data as rewardsData } from "@/data/data";
// other imports here

export default function Dashboard() {
  return (
    <>
      <div>
    {/* terneary operator*/}
        {rewardsData ? (
          <ReusableTable
            data={rewardsData}
            captionLink="/rewards-center"
            captionText="View More"
          />
        ) : (
          <p>No data available</p>
        )} 
      </div>
    </>
  );
}

Problem:

• The console logs for columns and rows return undefined.
• The table displays “No data available” even though data is defined in
  data.js.

What could be causing this issue, and how can I correctly pass the data to the table so that it displays as expected?