Element Detail Page

For creating detail pages of models, we can use ItemDetailComponent which has all the required features. First of all, we need to set dataModel which is the Article model we defined in "Defining Data Model" section. After that you can define id proprety which will use the id of item we want to show details. In general we fetch it from route:

const { id } = router.query;

<ItemDetailComponent
    extraDataComponent={<ArticleDetailsExtra articleId={id!} />}
    headerComponent={
        <ArticleDetailsHeader
            id={id!}
            tableName={tableName}
            dataModel={ArticleModel}
        />
    }
    id={id!}
    dataModel={ArticleModel}
/>

Header Component

In this example, since we want to add more functionality in details page, we created custom component in ArticleDetailsHeader.tsx.
This component basicly contains headerComponent in the rendering function. However it has some custom functions such as updatingBoxQuantity and deleting.

 <HeaderContent
        title={`${t('common:article')} ${props.id}`}
        routes={breadsCrumb}
        onBack={() => router.push('/articlesv2')}
        actionsRight={
            modes.length > 0 || !modes.includes(ModeEnum.Write) ? (
                <Space>
                    <Button onClick={updateBoxQuantity} type="primary">
                        {t('actions:update-quantity')}
                    </Button>
                    <LinkButton
                        title={t('actions:edit')}
                        path={`/articlev2/edit/${props.id}`}
                        type="primary"
                    />
                    <Button loading={deleteLoading} onClick={() => deleteArticle(props.id)}>
                        {t('actions:delete')}
                    </Button>
                </Space>
            ) : (
                <></>
            )
        }
    />

Extra Component

If you want to add aditional components under the detail table, you can use extraDataComponent props. Whatever you put in this props, will be rendered under the details table.

Accessing Data within the Parent Page.

• If you need the access data inside the component from the parent page, you can use setData property. You can pass state object to there and use that variable.

const [data, setData] = useState<any>();
<ItemDetailComponent setData={setData} />