T
TanStack•2y ago
rare-sapphire

row.getCanExpand() always false on expanding table

Im trying to make a expandable table but when I try customizing the cell for the expandable column, the row.getCanExpand() always returns false. I find no way to make it return true This is my comun def 
export type BaseOrderData = {
    id?: string | null;
    createdAt?: string | null;
    status?: string | null;
    shippingMethod?: string | null;
    address?: string | null;
    totalProducts?: number | null;
    total?: number | null;
};

export const columns: ColumnDef<BaseOrderData>[] = [
    {
        accessorKey: "id",
        header: "ID",
        cell: ({ row }) => {
            return (row.getCanExpand() ? (
                <button
                    {...{
                        onClick: row.getToggleExpandedHandler(),
                        style: { cursor: 'pointer' },
                    }}
                >
                    {row.getIsExpanded() ? '👇' : '👉'}
                </button>) : 'nope')
        }
    },
    {
        accessorKey: "createdAt",
        header: "Fecha",
    },
    {
        accessorKey: "status",
        header: "Estado",
    },
    {
        accessorKey: "shippingMethod",
        header: "Método de envío",
    },
    {
        accessorKey: "address",
        header: "Dirección",
    },
    {
        accessorKey: "totalProducts",
        header: "Total productos",
    },
    {
        accessorKey: "total",
        header: "Total",
    },
];
export type BaseOrderData = {
    id?: string | null;
    createdAt?: string | null;
    status?: string | null;
    shippingMethod?: string | null;
    address?: string | null;
    totalProducts?: number | null;
    total?: number | null;
};

export const columns: ColumnDef<BaseOrderData>[] = [
    {
        accessorKey: "id",
        header: "ID",
        cell: ({ row }) => {
            return (row.getCanExpand() ? (
                <button
                    {...{
                        onClick: row.getToggleExpandedHandler(),
                        style: { cursor: 'pointer' },
                    }}
                >
                    {row.getIsExpanded() ? '👇' : '👉'}
                </button>) : 'nope')
        }
    },
    {
        accessorKey: "createdAt",
        header: "Fecha",
    },
    {
        accessorKey: "status",
        header: "Estado",
    },
    {
        accessorKey: "shippingMethod",
        header: "Método de envío",
    },
    {
        accessorKey: "address",
        header: "Dirección",
    },
    {
        accessorKey: "totalProducts",
        header: "Total productos",
    },
    {
        accessorKey: "total",
        header: "Total",
    },
];
And this is what I am passing to my useReactTable method 
    const [expanded, setExpanded] = useState<ExpandedState>({});

    const table = useReactTable({
        data,
        columns,
        getCoreRowModel: getCoreRowModel(),
        getExpandedRowModel: getExpandedRowModel(),
        onExpandedChange: setExpanded,
        state: {
            expanded,
        },
        debugTable: true
    });
    const [expanded, setExpanded] = useState<ExpandedState>({});

    const table = useReactTable({
        data,
        columns,
        getCoreRowModel: getCoreRowModel(),
        getExpandedRowModel: getExpandedRowModel(),
        onExpandedChange: setExpanded,
        state: {
            expanded,
        },
        debugTable: true
    });
3 Replies
rare-sapphire
rare-sapphireOP•2y ago
I also tried setting manualExpanding: true and enableExpanding: true, but nothing changed
dependent-tan
dependent-tan•2y ago
how are your subrows accessed?
other-emerald
other-emerald•2y ago
Hi, I am also facing the same problem. i am getting the subrows in this way: const table = useReactTable({ data: updatedTableData, columns, state: { expanded }, onExpandedChange: setExpanded, getSubRows: (row) => row?.subRows, getCoreRowModel: getCoreRowModel(), manualExpanding: true, getExpandedRowModel: getExpandedRowModel(), autoResetExpanded: false, }); And I am recursively updating the table data in the tanstack table v8. if I Recursively update data in react-table version 7, it works fine.

Did you find this page helpful?