[BUG] Documentation broken

[nandox5]

Describe the bug

https://refine.dev/blog/shadcn-ui/#refine--shadcn-building-a-reusable-datatable--component-with-shadcn

This doc does not seem to work, i followed the instructions and i get an error after implementing the Datatable component.

Uncaught TypeError: Cannot read properties of undefined (reading 'categoryData')

checking the table object from

{
id: "category",
header: "Category",
accessorKey: "category.id",
cell: function render({ getValue, table }) {
const meta = table.options.meta as {
categoryData: GetManyResponse;
};
const category = meta.categoryData?.data?.find(
(item: ICategory) => item.id === getValue()
);

      return category?.title ?? "";
      // console.log(table);
    },
  },

this column section, i can see that table does not have a meta under options object..

is this document outdated?

Steps To Reproduce

Follow the instructions on the documentation.

Expected behavior

should work. instead i get an error and nothing is shown on the page.

Packages

simple-rest and shadcnui

Additional Context

import React from "react";
import {
  IResourceComponentsProps,
  useNavigation,
  useMany,
  GetManyResponse,
} from "@refinedev/core";

import { useTable } from "@refinedev/react-table";
import { ColumnDef, flexRender } from "@tanstack/react-table";

import { Button } from "@/components/ui/button";
import { DataTable } from "@/components/ui/data-table";
import {
  ArrowLeftToLine,
  ArrowRightToLine,
  ChevronLeftIcon,
  ChevronRightIcon,
  LucideEdit,
  LucideEye,
} from "lucide-react";
import {
  Table,
  TableBody,
  TableCell,
  TableHead,
  TableHeader,
  TableRow,
} from "@/components/ui/table";
import {
  Pagination,
  PaginationContent,
  PaginationItem,
  PaginationLink,
  PaginationNext,
  PaginationPrevious,
} from "@/components/ui/pagination";
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from "@/components/ui/select";

interface ICategory {
  id: number;
  title: string;
}

interface IBlogPost {
  id: number;
  title: string;
  content: string;
  status: "published" | "draft" | "rejected";
  category: {
    id: number;
  };
}

export const BlogPostList: React.FC<IResourceComponentsProps> = () => {
  const columns = React.useMemo<ColumnDef<IBlogPost>[]>(
    () => [
      {
        id: "id",
        accessorKey: "id",
        header: "ID",
      },
      {
        id: "title",
        accessorKey: "title",
        header: "Title",
      },
      {
        id: "content",
        accessorKey: "content",
        header: "Content",
      },
      {
        id: "category",
        header: "Category",
        accessorKey: "category.id",
        cell: function render({ getValue, table }) {
          const meta = table.options.meta as {
            categoryData: GetManyResponse<ICategory>;
          };
          const category = meta.categoryData?.data?.find(
            (item: ICategory) => item.id === getValue()
          );

          return category?.title ?? "";
          // console.log(table);
        },
      },
      {
        id: "status",
        accessorKey: "status",
        header: "Status",
      },
      {
        id: "actions",
        accessorKey: "id",
        header: "Actions",
        cell: function render({ getValue }) {
          return (
            <div className="flex flex-row flex-nowrap gap-0">
              <Button
                variant="ghost"
                size="icon"
                onClick={() => {
                  show("blog_posts", getValue() as string);
                }}
              >
                <LucideEye size={16} />
              </Button>
              <Button
                variant="ghost"
                size="icon"
                onClick={() => {
                  edit("blog_posts", getValue() as string);
                }}
              >
                <LucideEdit size={16} />
              </Button>
            </div>
          );
        },
      },
    ],
    []
  );

  const { edit, show, create } = useNavigation();

  const tableProps = useTable({
    columns,
    refineCoreProps: {
      meta: {
        populate: ["category"],
      },
    },
  });

  return (
    <div className="p-2">
      <div className="flex justify-between items-center my-2 mx-2">
        <h1 className="scroll-m-20 text-2xl font-extrabold tracking-tight">
          Blog Posts
        </h1>
        <div className="p-2">
          <Button onClick={() => create("blog_posts")}>Create</Button>
        </div>
      </div>
      <DataTable {...tableProps} />
    </div>
  );
};

[necatiozmen]

Hi @nandox5,
Thanks for letting us know. We'll check it out.

[aliemir]

Hey @nandox5, just opened a PR to fix this issue. The required lines are already present in the previous section for the blog-post/list.tsx file and it includes the lines about meta property but they got left out in the next section about the refactoring component.