Cannot import components from monday-ui-react-core

[shahabgohar]

I was exploring the table component

Vibe Design System

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

[Matias.Monday (Matias)]

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