Binding Error in Custom Component

[kausik10]

Hi, With sorting, I want the flexibility to sort on descending order for clients with files and for clients without file, I need to sort them in ascending order. I want to be able to use something like this:

<DataGrid
                    entities="Client[isActive=true]"
                    initialSorting={
                        statsValue !== 0
                            ? { "stats.count": "desc" }
                            : { companyName: "asc" }
                    }
                >

I have a default export like this

export default () => {
    return (
        <>
            <Binding>
                <div className="flex flex-col gap-12">
                    <div>
                        <Slots.RightActions>
                            <HasRole role="admin">
                                <Link to="clientCreate">
                                    <Button>Vytvořit klienta</Button>
                                </Link>
                            </HasRole>
                        </Slots.RightActions>
                        <div>
                            <ClientLists />
                        </div>
                    </div>
                </div>
            </Binding>
        </>
    );
};

In which ClientLists is defined as:

const ClientLists = Component(
    () => {
        const entity = useEntity();
        const statsValue = entity.getEntity("stats").getField("count").value;
        console.log("Entity", entity.name);
        return (
            <>
                <DataGrid
                    entities="Client[isActive=true]"
                    initialSorting={
                        statsValue !== 0
                            ? { "stats.count": "desc" }
                            : { companyName: "asc" }
                    }
                >
                    ...
                                <Link to="clientDetail(id: $entity.id)">
                                    <button>
                                        <ClientCard />
                                    </button>
                                </Link>
                           ...
                </DataGrid>
            </>
        );
    },
    () => <></>
);

I get this error

Trying to use a data bound component outside a correct parent. You likely forgot to use <DataBindingProvider /> or a SubTree.

The ClientCard inside the ClientLists was initially defined to be used with the default export. All the DataGrid logic was inside the default export.

I think I ran into this error because both ClientCard and ClientLists use a useEntity hook and maybe ClientCard expects to be wrapped in a component with Binding directly and not like how I have set it up. (Please correct me if I am wrong).

So, I tried to rewrite the entire logic inside ClientCard inside the ClientLists. Thus, my newest ClientLists looks like this:

const ClientLists = Component(
    () => {
        const clientEntity = useEntity();
        const files = Array.from(
            clientEntity.getEntityList("files[folder.id=null]")
        );

        const statsValue = clientEntity
            .getEntity("stats")
            .getField("count").value;
            
      
        return (
            <>
                <DataGrid
                    entities="Client[isActive=true]"
                    initialSorting={
                        statsValue !== 0
                            ? { "stats.count": "desc" }
                            : { companyName: "asc" }
                    }
                >
                    ....
                                <Link to="clientHome(id: $entity.id)">
                                    <button>
                                        <>
                                            <div className="rounded-lg flex flex-col bg-white min-h-52 p-4 hover:bg-white/50 text-left justify-center items-center relative">
                                                {files.length > 0 && (
                                                    <div className="absolute -top-2 -right-2 bg-red-500 w-8 h-8 rounded-full flex items-center justify-center text-md text-white">
                                                        {files.length}
                                                    </div>
                                                )}
                                                 <div className="text-xl font-semibold pb-2 text-center">
//                                                     <Field field="companyName" />
//                                                 </div>
//                                                 <div className="text-gray-500 text-sm">
//                                                     <Field field="phone" />
//                                                 </div>
//                                                 <div className="text-gray-500 text-sm text-center">
//                                                     <Field field="address" />
//                                                 </div>
                                                <Link
                                                    to={`clientEdit(id: $entity.id)`}
                                                >
                                                    <Button
                                                        variant="tabInactive"
                                                        size="md"
                                                    >
                                                        <FilePenIcon className="h-4 w-4 mr-1" />
                                                        Upravit
                                                    </Button>
                                                </Link>
                                            </div>
                                        </>
                                    </button>
                                </Link>
                            
                </DataGrid>
            </>
        );
    },
    () => (
        <>
            <HasMany field="files[folder.id=null]" />
            <Field field="id" />
            <Field field="companyName" />
            <Field field="phone" />
            <Field field="address" />
            <Field field="businessId" />
            <Field field="taxId" />
            <HasOne field="stats">
                <Field field="count" />
            </HasOne>
        </>
    )
);

My export default remains the same. However, I get this error.

Could you help me identify what is the problem with my code structure while having the flexibility to

1. Sort on descending order for clients with files
2. for clients without file, I need to sort them in ascending order

If I have ABC, BCD, DEF, GHI, EFG clients with 4, 5 , 0 , 0 files, My Datagrid should list the Clients in the order:

1. BCD
2. ABC
3. DEF
4. EFG
5. GHI

Thank you!

[jonasnobile]

Hi,

you probably want to use just:

<DataGrid
  entities="Client[isActive=true]"
  initialSorting={{ "stats.count": "desc", companyName: "asc" }}
>