Curd List

You can use the following code example to list the data.

import { FC } from "react";
import { useTable } from "@refinedev/react-table";
import {
    Shadcn,
    List,
    Table,
    TableFilterProps,
} from "@ferdiunal/refinedev-shadcn-ui";

import { Edit, Eye, Trash2 } from "lucide-react";

export const PostList: FC = () => {
    const table = useTable({
        columns: [],
    });

    return (
        <List>
            <Table table={table}>
                <Table.Column
                    accessorKey="id"
                    id={"select"}
                    header={({ table }) => (
                        <Table.CheckAll table={table}>
                            <Shadcn.CommandItem
                                onSelect={() => alert("Delete Selected")}
                            >
                                Delete Selected (
                                {table.getSelectedRowModel().rows.length}){" "}
                                {friendly(
                                    "Row",
                                    table.getSelectedRowModel().rows.length > 1
                                        ? "plural"
                                        : "singular",
                                )}
                            </Shadcn.CommandItem>
                        </Table.CheckAll>
                    )}
                    cell={({ row }) => (
                        <Shadcn.Checkbox
                            className="translate-y-[2px]"
                            checked={row.getIsSelected()}
                            onCheckedChange={(value) =>
                                row.toggleSelected(!!value)
                            }
                            aria-label="Select row"
                            key={`checkbox-${row.original.id}`}
                        />
                    )}
                />
                <Table.Column header={"ID"} id={"id"} accessorKey="id" />
                <Table.Column
                    header={"Title"}
                    id={"title"}
                    accessorKey="title"
                />
                <Table.Column
                    header={"Status"}
                    id={"status"}
                    accessorKey="status"
                />
                <Table.Column
                    header={"CreatedAt"}
                    id={"createdAt"}
                    accessorKey="createdAt"
                />
                <Table.Column
                    id={"actions"}
                    accessorKey={"id"}
                    cell={({ row: { original } }) => (
                        <Table.Actions>
                            <Table.ShowAction
                                title="Detail"
                                row={original}
                                resource="posts"
                                icon={<Eye size={16} />}
                            />
                            <Table.EditAction
                                title="Edit"
                                row={original}
                                resource="posts"
                                icon={<Edit size={16} />}
                            />
                            <Table.DeleteAction
                                title="Delete"
                                row={original}
                                withForceDelete={true}
                                resource="posts"
                                icon={<Trash2 size={16} />}
                            />
                        </Table.Actions>
                    )}
                />
            </Table>
        </List>
    );
};