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-sapphireOP•2y ago

I also tried setting manualExpanding: true and enableExpanding: true, but nothing changed

helpful-purple•2y ago

how are your subrows accessed?

stormy-gold•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.

Gaming

Programming

row.getCanExpand() always false on expanding table

Did you find this page helpful?