Skip to main content

I was exploring the table component

style.monday.com


Code:

imports:


import {
Flex,
Heading, Label,
Skeleton,
Table,
TableBody,
TableCell,
TableHeader,
TableHeaderCell,
TableRow
} from "monday-ui-react-core";
import {
TableAvatar,
TableErrorState,
TableEmptyState
} from "monday-ui-react-core/src/components/Table/Table/__stories__/Table.stories.helpers";

Table
columns={[
{
id: 'sentOn',
loadingStateType: 'medium-text',
title: 'Sent on',
width: 150
},
{
id: 'subject',
loadingStateType: 'long-text',
title: 'Subject'
},
{
id: 'sentBy',
infoContent: 'This is the sender',
loadingStateType: 'circle',
title: 'Sent by',
width: {
max: 200,
min: 120
}
},
{
id: 'status',
infoContent: 'Info content for the status column',
loadingStateType: 'medium-text',
title: 'Status',
width: 150
},
{
id: 'emailsSent',
loadingStateType: 'medium-text',
title: 'Emails sent',
width: 150
}
]}
emptyState={<TableEmptyState />}
errorState={<TableErrorState />}
>
<TableHeader>
<TableHeaderCell title="Sent on" />
<TableHeaderCell title="Subject" />
<TableHeaderCell title="Sent by" />
<TableHeaderCell title="Status" />
<TableHeaderCell title="Emails sent" />
</TableHeader>
<TableBody>
<TableRow>
<TableCell>
2020-01-01
</TableCell>
<TableCell>
Lorem ipsum dolor
</TableCell>
<TableCell>
<TableAvatar text="John Doe" />
</TableCell>
<TableCell>
<Label
color="positive"
isAnimationDisabled
text="Sent"
/>
</TableCell>
<TableCell>
100
</TableCell>
</TableRow>
<TableRow>
<TableCell>
2023-03-03
</TableCell>
<TableCell>
This is the subject This is the subject This is the subject This is the subject This is the subject This is the subject
</TableCell>
<TableCell>
<TableAvatar text="Some Person" />
</TableCell>
<TableCell>
<Label
color="positive"
isAnimationDisabled
text="Sent"
/>
</TableCell>
<TableCell>
999
</TableCell>
</TableRow>
<TableRow>
<TableCell>
2022-02-02
</TableCell>
<TableCell>
This is the subject
</TableCell>
<TableCell>
<TableAvatar text="Other Name" />
</TableCell>
<TableCell>
<Label
color="positive"
isAnimationDisabled
text="Sent"
/>
</TableCell>
<TableCell>
99
</TableCell>
</TableRow>
</TableBody>
</Table>

And the error i am getting


Now if i remove these



  • TableAvatar,

  • TableErrorState,

  • TableEmptyState

    Then the table gets displayed otherwise not.

    Where can i get the above mentioned react components?


Thank you

Hello there @shahabgohar,


I checked this with the Vibe team and they mentioned that those components are not exported from Vibe. The team discourages accessing “monday-ui-react-core/dist”.


The components mentioned are for documentation only, we’re aware of these components that are not exported from Vibe, and we will work to remove them.


Cheers,

Matias


Reply