What about data table? Is data table in plan?

[Stupidism]

Is data table in plan? Or I guess this is doable via slateJS plugin? I'm not familiar with it yet. Just want to know for sure it's doable.

[Stupidism]

bump it up

[jmikrut]

Hey @Stupidism — tables are totally possible right now to build on your own with Slate, but I do think it'd be a valuable addition to Payload over the longer term.

I just did a bit of Googling and found this Slate plugin to add tables:
https://github.com/whatever-company/slate-tables

Here is another link within SlateJS' own examples that shows how a table could work:
https://www.slatejs.org/examples/tables

This could get you going. I haven't dug into either example too far, but you might be able to learn some things from those examples and / or reach out to the author(s) and ask if they would be interested in helping port it to Payload.

In any case, I think we should definitely support tables within the RTE.

[itspers]

@jmikrut is it moved somehow?
i just tried to copy and inject this thing https://github.com/lqs469/slate-table - and its crazy outdated - just unreal to make it work

https://github.com/whatever-company/slate-tables maybe could work, but there is no way to insert slatejs plugin in payload?

so far looks like simpler would be not to use slate, but already spent a lot of time implementing thing slike

---

..

[Stupidism]

@itspers We ended up implementing everything by our own. Here's a gist:

1. slate element file:

import type { RichTextCustomElement } from 'payload/types';

import { RteTableButton } from './RteTableButton';
import {
  TableElement,
  TableBodyElement,
  TableCellElement,
  TableHeaderCellElement,
  TableHeaderElement,
  TableRowElement,
} from './RteTableElement';

export const tableElements: RichTextCustomElement[] = [
  {
    name: 'table',
    Button: RteTableButton,
    Element: TableElement,
  },
  {
    name: 'table-header',
    Button: () => null,
    Element: TableHeaderElement,
  },
  {
    name: 'table-body',
    Button: () => null,
    Element: TableBodyElement,
  },
  {
    name: 'table-row',
    Button: () => null,
    Element: TableRowElement,
  },
  {
    name: 'table-header-cell',
    Button: () => null,
    Element: TableHeaderCellElement,
  },
  {
    name: 'table-cell',
    Button: () => null,
    Element: TableCellElement,
  },
];

2. react button file:

import { useModal } from '@faceless-ui/modal';
import { MinimalTemplate, X } from 'payload/components';
import { Form } from 'payload/components/forms';
import Button from 'payload/dist/admin/components/elements/Button';
import Number from 'payload/dist/admin/components/forms/field-types/Number';
import ElementButton from 'payload/dist/admin/components/forms/field-types/RichText/elements/Button';
import Submit from 'payload/dist/admin/components/forms/Submit';
import type { FC } from 'react';
import { Fragment, useCallback, useEffect, useState } from 'react';
import type { Editor } from 'slate';
import { Transforms } from 'slate';
import { useSlate, ReactEditor } from 'slate-react';

import { TableIcon } from './assets/TableIcon';
import { initTableNode } from './const.RteTable';
import { S } from './styled.RteTable';

const insertTableNode = (editor: Editor, tableNode) => {
  Transforms.insertNodes(editor, [
    tableNode,
    {
      children: [{ text: '' }],
    },
  ]);
};

export const RteTableButton: FC<{ path: string }> = ({ path }) => {
  const { openModal, closeModal } = useModal();
  const [renderModal, setRenderModal] = useState(false);
  const modalSlug = `${path}-add-button`;
  const editor = useSlate();

  useEffect(() => {
    ReactEditor.focus(editor as ReactEditor);
  }, []);

  useEffect(() => {
    if (renderModal) {
      openModal(modalSlug);
    }
  }, [renderModal, openModal, modalSlug]);

  const handleAddTable = useCallback(
    (_, { col, row }) => {
      insertTableNode(editor, initTableNode({ maxCol: col, maxRow: row }));
      closeModal(modalSlug);
      setRenderModal(false);
    },
    [modalSlug]
  );

  return (
    <Fragment>
      <ElementButton
        format="button"
        onClick={() => {
          setRenderModal(true);
        }}
      >
        <TableIcon />
      </ElementButton>
      {renderModal && (
        <S.AddTableModal slug={modalSlug}>
          <MinimalTemplate>
            <header className="AddTableModal-header">
              <h3>Add Table</h3>
              <Button
                buttonStyle="none"
                onClick={() => {
                  closeModal(modalSlug);
                  setRenderModal(false);
                }}
              >
                <X />
              </Button>
            </header>
            <Form onSubmit={handleAddTable} initialData={{}}>
              <Number label="Number of rows" name="row" required defaultValue={2} min={2} max={100} />
              <Number label="Number of columns" name="col" required defaultValue={1} min={1} max={10} />
              <Submit>Add Table</Submit>
            </Form>
          </MinimalTemplate>
        </S.AddTableModal>
      )}
    </Fragment>
  );
};

3. react renderer file:

import { useSlate } from 'slate-react';

import { AddIcon } from './assets/AddIcon';
import { RemoveIcon } from './assets/RemoveIcon';
import { addRow, addColumn, removeRow, removeColumn, containMergedCells } from './const.RteTable';
import { S } from './styled.RteTable';
import type { TableCellProps, TableProps } from './types.RteTable';

export const TableElement = (props: TableProps) => {
  const { attributes, children, element } = props;
  return (
    <S.Table disableEdit={containMergedCells(element)} {...attributes}>
      {children}
    </S.Table>
  );
};
export const TableHeaderElement = (props) => {
  const { attributes, children } = props;
  return <thead {...attributes}>{children}</thead>;
};
export const TableBodyElement = (props) => {
  const { attributes, children } = props;
  return <tbody {...attributes}>{children}</tbody>;
};
export const TableRowElement = (props) => {
  const { attributes, children } = props;
  return <tr {...attributes}>{children}</tr>;
};

const TableCellFragments = (props: TableCellProps) => {
  const { children } = props;
  const editor = useSlate();

  return (
    <>
      // insert other elements
      {children}
    </>
  );
};

export const TableHeaderCellElement = (props: TableCellProps) => {
  const { attributes, element } = props;
  const { rowSpan, colSpan } = element;
  return (
    <th rowSpan={rowSpan} colSpan={colSpan} {...attributes}>
      <TableCellFragments {...props} />
    </th>
  );
};
export const TableCellElement = (props: TableCellProps) => {
  const { attributes, element } = props;
  const { rowSpan, colSpan } = element;
  return (
    <td rowSpan={rowSpan} colSpan={colSpan} {...attributes}>
      <TableCellFragments {...props} />
    </td>
  );
};

[Grandnainconnu]

@itspers We ended up implementing everything by our own. Here's a gist:

1. slate element file:

import type { RichTextCustomElement } from 'payload/types';

import { RteTableButton } from './RteTableButton';
import {
  TableElement,
  TableBodyElement,
  TableCellElement,
  TableHeaderCellElement,
  TableHeaderElement,
  TableRowElement,
} from './RteTableElement';

export const tableElements: RichTextCustomElement[] = [
  {
    name: 'table',
    Button: RteTableButton,
    Element: TableElement,
  },
  {
    name: 'table-header',
    Button: () => null,
    Element: TableHeaderElement,
  },
  {
    name: 'table-body',
    Button: () => null,
    Element: TableBodyElement,
  },
  {
    name: 'table-row',
    Button: () => null,
    Element: TableRowElement,
  },
  {
    name: 'table-header-cell',
    Button: () => null,
    Element: TableHeaderCellElement,
  },
  {
    name: 'table-cell',
    Button: () => null,
    Element: TableCellElement,
  },
];

2. react button file:

import { useModal } from '@faceless-ui/modal';
import { MinimalTemplate, X } from 'payload/components';
import { Form } from 'payload/components/forms';
import Button from 'payload/dist/admin/components/elements/Button';
import Number from 'payload/dist/admin/components/forms/field-types/Number';
import ElementButton from 'payload/dist/admin/components/forms/field-types/RichText/elements/Button';
import Submit from 'payload/dist/admin/components/forms/Submit';
import type { FC } from 'react';
import { Fragment, useCallback, useEffect, useState } from 'react';
import type { Editor } from 'slate';
import { Transforms } from 'slate';
import { useSlate, ReactEditor } from 'slate-react';

import { TableIcon } from './assets/TableIcon';
import { initTableNode } from './const.RteTable';
import { S } from './styled.RteTable';

const insertTableNode = (editor: Editor, tableNode) => {
  Transforms.insertNodes(editor, [
    tableNode,
    {
      children: [{ text: '' }],
    },
  ]);
};

export const RteTableButton: FC<{ path: string }> = ({ path }) => {
  const { openModal, closeModal } = useModal();
  const [renderModal, setRenderModal] = useState(false);
  const modalSlug = `${path}-add-button`;
  const editor = useSlate();

  useEffect(() => {
    ReactEditor.focus(editor as ReactEditor);
  }, []);

  useEffect(() => {
    if (renderModal) {
      openModal(modalSlug);
    }
  }, [renderModal, openModal, modalSlug]);

  const handleAddTable = useCallback(
    (_, { col, row }) => {
      insertTableNode(editor, initTableNode({ maxCol: col, maxRow: row }));
      closeModal(modalSlug);
      setRenderModal(false);
    },
    [modalSlug]
  );

  return (
    <Fragment>
      <ElementButton
        format="button"
        onClick={() => {
          setRenderModal(true);
        }}
      >
        <TableIcon />
      </ElementButton>
      {renderModal && (
        <S.AddTableModal slug={modalSlug}>
          <MinimalTemplate>
            <header className="AddTableModal-header">
              <h3>Add Table</h3>
              <Button
                buttonStyle="none"
                onClick={() => {
                  closeModal(modalSlug);
                  setRenderModal(false);
                }}
              >
                <X />
              </Button>
            </header>
            <Form onSubmit={handleAddTable} initialData={{}}>
              <Number label="Number of rows" name="row" required defaultValue={2} min={2} max={100} />
              <Number label="Number of columns" name="col" required defaultValue={1} min={1} max={10} />
              <Submit>Add Table</Submit>
            </Form>
          </MinimalTemplate>
        </S.AddTableModal>
      )}
    </Fragment>
  );
};

3. react renderer file:

import { useSlate } from 'slate-react';

import { AddIcon } from './assets/AddIcon';
import { RemoveIcon } from './assets/RemoveIcon';
import { addRow, addColumn, removeRow, removeColumn, containMergedCells } from './const.RteTable';
import { S } from './styled.RteTable';
import type { TableCellProps, TableProps } from './types.RteTable';

export const TableElement = (props: TableProps) => {
  const { attributes, children, element } = props;
  return (
    <S.Table disableEdit={containMergedCells(element)} {...attributes}>
      {children}
    </S.Table>
  );
};
export const TableHeaderElement = (props) => {
  const { attributes, children } = props;
  return <thead {...attributes}>{children}</thead>;
};
export const TableBodyElement = (props) => {
  const { attributes, children } = props;
  return <tbody {...attributes}>{children}</tbody>;
};
export const TableRowElement = (props) => {
  const { attributes, children } = props;
  return <tr {...attributes}>{children}</tr>;
};

const TableCellFragments = (props: TableCellProps) => {
  const { children } = props;
  const editor = useSlate();

  return (
    <>
      // insert other elements
      {children}
    </>
  );
};

export const TableHeaderCellElement = (props: TableCellProps) => {
  const { attributes, element } = props;
  const { rowSpan, colSpan } = element;
  return (
    <th rowSpan={rowSpan} colSpan={colSpan} {...attributes}>
      <TableCellFragments {...props} />
    </th>
  );
};
export const TableCellElement = (props: TableCellProps) => {
  const { attributes, element } = props;
  const { rowSpan, colSpan } = element;
  return (
    <td rowSpan={rowSpan} colSpan={colSpan} {...attributes}>
      <TableCellFragments {...props} />
    </td>
  );
};

There are missing files. Could you make a full git out of it please?

[Stupidism]

You can remove the addColumn addRow part. And the S is just a styled component. You can ignore it as well

[Grandnainconnu]

Still missing initTableNode from const.Retable file.

[Stupidism]

@Grandnainconnu Here it is. Just the data structure of slate table.

export function initTableNode(options: Pick<InitTableOptions, 'maxCol' | 'maxRow'>): TableNode {
  const { maxCol, maxRow } = options;
  return {
    type: 'table',
    children: [
      {
        type: 'table-header',
        children: [
          {
            type: 'table-row',
            children: range(0, maxCol).map(initTableHeaderCell),
          },
        ],
      },
      {
        type: 'table-body',
        children: range(1, maxRow).map(() => initTableRow({ maxCol })),
      },
    ],
  };
}

[MarvinVrdoljak]

@Stupidism would we awesome if you could post a repo with your full code. Not getting your code running like this. Cheers :)