I am not able to figure out how to use the table component. I have following categories defined for the email editor:

import { BlockManager, BasicType, AdvancedType, JsonToMjml } from 'easy-email-core';
import { EmailEditor, EmailEditorProvider } from 'easy-email-editor';
import {
  StandardLayout,
  BlockAttributeConfigurationManager,
} from 'easy-email-extensions';

const categories = [
  {
    label: 'Content',
    active: true,
    blocks: [
      {
        type: AdvancedType.TEXT,
      },
      {
        type: AdvancedType.IMAGE,
        payload: { attributes: { padding: '0px 0px 0px 0px' } },
      },
      {
        type: AdvancedType.BUTTON,
      },
      {
        type: 'WORKFLOW_BLOCK',
        // payload: { data: { value: { approveBtnText: 'Appr' } } },
      },
      {
        type: 'LINK_BLOCK',
        // payload: { data: { value: { approveBtnText: 'Appr' } } },
      },
      {
        type: 'SMILEY_BLOCK',
      },
      {
        type: BasicType.TABLE,
      },
{
        type: AdvancedType.SOCIAL,
        payload: {
          data: {
            value: {
              elements: [
                {
                  href: '#',
                  target: '_blank',
                  src: FacebookIcon,
                  content: 'Facebook',
                },
                {
                  href: '',
                  target: '_blank',
                  src: TwitterIcon,
                  content: 'Twitter',
                },
                {
                  href: '#',
                  target: '_blank',
                  src: InstaIcon,
                  content: 'Instagram',
                },
                {
                  href: '#',
                  target: '_blank',
                  src: YoutubeIcon,
                  content: 'Youtube',
                },
                {
                  href: '#',
                  target: '_blank',
                  src: LinkedinIcon,
                  content: 'Linkedin',
                },
              ],
            },
          },
          attributes: {
            align: 'center',
            color: '#333333',
            mode: 'horizontal',
            'font-size': '13px',
            'font-weight': 'normal',
            'border-radius': '3px',
            padding: '10px 25px 10px 25px',
            'inner-padding': '4px 4px 4px 4px',
            'line-height': '22px',
            'text-padding': '4px 4px 4px 0px',
            'icon-padding': '0px',
            'icon-size': '20px',
          },
          children: [],
        },
      },
      {
        type: AdvancedType.DIVIDER,
      },
      {
        type: AdvancedType.SPACER,
      },
      {
        type: AdvancedType.HERO,
      },
      {
        type: AdvancedType.WRAPPER,
      },
    ],
  },
  {
    label: 'Layout',
    active: true,
    displayType: 'column',
    blocks: [
      {
        title: '2 columns',
        payload: [
          ['50%', '50%'],
          ['33%', '67%'],
          ['67%', '33%'],
          ['25%', '75%'],
          ['75%', '25%'],
        ],
      },
      {
        title: '3 columns',
        payload: [
          ['33.33%', '33.33%', '33.33%'],
          ['25%', '25%', '50%'],
          ['50%', '25%', '25%'],
        ],
      },
      {
        title: '4 columns',
        payload: [['25%', '25%', '25%', '25%']],
      },
    ],
  },
];

<EmailEditorProvider
        data={templateData}
        height={'calc(100vh - 72px)'}
        autoComplete
        dashed={false}
        onSubmit={onSubmit}
        mergeTags={mergeTags}
        fontList={defaultWebFonts}
      >
        {({ values }, { submit }) => {
          return (
            <>
              <StandardLayout compact={false} showSourceCode={true} categories={categories}>
                <EmailEditor />
              </StandardLayout>
            </>
          );
        }}
      </EmailEditorProvider>

Dragging the table component does not draw any table. Please suggest what is the correct way to use it.

Thankyou!

I added it in the categories object. But it seems it does not have direct usage