Skip to main content

Data with loader

Loading#

When loading is "true" it shows spinner or loading content, and when it's "false" it shows data.

<>
<DataWithLoader data="This is data" loading objective />
</>
Loading...
<>
<DataWithLoader data="This is data" loading loadingContent="Loading..." />
</>
This is data
<>
<DataWithLoader data="This is data" loading={false} />
</>

Count#

When count is "0" it shows empty content or empty state.

Empty content#

This is empty content
<>
<DataWithLoader data="This is data" loading={false} emptyContent="This is empty content" count={0} />
</>

Empty state#

Icon#

You can costumize the empty state by giving text (with emptyText), icon (with emptyIcon). And also change the icon size with size prop.

Empty state
<>
<DataWithLoader data="This is data" loading={false} emptyText="Empty state" emptyIcon="info-circle" count={0} size="small" />
</>

Image#

You can costumize the empty state by giving text (with emptyText), image (with emptyImage).

Empty stateEmpty state
<>
<DataWithLoader data="This is data" loading={false} emptyText="Empty state" emptyImage="https://erxes.io/static/images/logo/logo_dark.svg" count={0} />
</>

API#

import DataWithLoader from "erxes-ui/lib/components/DataWithLoader";

* required prop

NameTypeDefaultDescription
data*anyDefine data
countanyDefine count
loading*booleanLoading state
emptyTextstringThere is no dataDefine text of emptyState
emptyIconstringDefine icon of emptyState
emptyImagestringDefine image of emptyState
sizestringfullDefine size of icon in emptyState
objectivebooleanfalseMake the spinner objective
emptyContentReact.ReactNodeDefine content when count is "0"
loadingContentReact.ReactNodeDefine content when loading is "true"
Last updated on by enkhzule