Advanced Tables

import "@blocknote/core/fonts/inter.css";
import { BlockNoteView } from "@blocknote/mantine";
import "@blocknote/mantine/style.css";
import { useCreateBlockNote } from "@blocknote/react";
 
export default function App() {
  // Creates a new editor instance.
  const editor = useCreateBlockNote({
    // This enables the advanced table features
    tables: {
      splitCells: true,
      cellBackgroundColor: true,
      cellTextColor: true,
      headers: true,
    },
    initialContent: [
      {
        id: "7e498b3d-d42e-4ade-9be0-054b292715ea",
        type: "heading",
        props: {
          textColor: "default",
          backgroundColor: "default",
          textAlignment: "left",
          level: 2,
        },
        content: [
          {
            type: "text",
            text: "Advanced Tables",
            styles: {},
          },
        ],
        children: [],
      },
      {
        id: "cbf287c6-770b-413a-bff5-ad490a0b562a",
        type: "table",
        props: {
          textColor: "default",
        },
        content: {
          type: "tableContent",
          columnWidths: [199, 148, 201],
          headerRows: 1,
          rows: [
            {
              cells: [
                {
                  type: "tableCell",
                  content: [
                    {
                      type: "text",
                      text: "This row has headers",
                      styles: {},
                    },
                  ],
                  props: {
                    colspan: 1,
                    rowspan: 1,
                    backgroundColor: "default",
                    textColor: "default",
                    textAlignment: "center",
                  },
                },
                {
                  type: "tableCell",
                  content: [
                    {
                      type: "text",
                      text: "This is ",
                      styles: {},
                    },
                    {
                      type: "text",
                      text: "RED",
                      styles: {
                        bold: true,
                      },
                    },
                  ],
                  props: {
                    colspan: 1,
                    rowspan: 1,
                    backgroundColor: "red",
                    textColor: "default",
                    textAlignment: "center",
                  },
                },
                {
                  type: "tableCell",
                  content: [
                    {
                      type: "text",
                      text: "Text is Blue",
                      styles: {},
                    },
                  ],
                  props: {
                    colspan: 1,
                    rowspan: 1,
                    backgroundColor: "default",
                    textColor: "blue",
                    textAlignment: "center",
                  },
                },
              ],
            },
            {
              cells: [
                {
                  type: "tableCell",
                  content: [
                    {
                      type: "text",
                      text: "This spans 2 columns\nand 2 rows",
                      styles: {},
                    },
                  ],
                  props: {
                    colspan: 2,
                    rowspan: 2,
                    backgroundColor: "yellow",
                    textColor: "default",
                    textAlignment: "left",
                  },
                },
                {
                  type: "tableCell",
                  content: [
                    {
                      type: "text",
                      text: "Sooo many features",
                      styles: {},
                    },
                  ],
                  props: {
                    colspan: 1,
                    rowspan: 1,
                    backgroundColor: "gray",
                    textColor: "default",
                    textAlignment: "left",
                  },
                },
              ],
            },
            {
              cells: [
                {
                  type: "tableCell",
                  content: [],
                  props: {
                    colspan: 1,
                    rowspan: 1,
                    backgroundColor: "gray",
                    textColor: "purple",
                    textAlignment: "left",
                  },
                },
              ],
            },
            {
              cells: [
                {
                  type: "tableCell",
                  content: [
                    {
                      type: "text",
                      text: "A cell",
                      styles: {},
                    },
                  ],
                  props: {
                    colspan: 1,
                    rowspan: 1,
                    backgroundColor: "default",
                    textColor: "default",
                    textAlignment: "left",
                  },
                },
                {
                  type: "tableCell",
                  content: [
                    {
                      type: "text",
                      text: "Another Cell",
                      styles: {},
                    },
                  ],
                  props: {
                    colspan: 1,
                    rowspan: 1,
                    backgroundColor: "default",
                    textColor: "default",
                    textAlignment: "right",
                  },
                },
                {
                  type: "tableCell",
                  content: [
                    {
                      type: "text",
                      text: "Aligned center",
                      styles: {},
                    },
                  ],
                  props: {
                    colspan: 1,
                    rowspan: 1,
                    backgroundColor: "default",
                    textColor: "default",
                    textAlignment: "center",
                  },
                },
              ],
            },
          ],
        },
        children: [],
      },
      {
        id: "16e76a94-74e5-42e2-b461-fc9da9f381f7",
        type: "paragraph",
        props: {
          textColor: "default",
          backgroundColor: "default",
          textAlignment: "left",
        },
        content: [
          {
            type: "text",
            text: "Featuring:",
            styles: {},
          },
        ],
        children: [
          {
            id: "785fc9f7-8554-47f4-a4df-8fe2f1438cac",
            type: "bulletListItem",
            props: {
              textColor: "default",
              backgroundColor: "default",
              textAlignment: "left",
            },
            content: [
              {
                type: "text",
                text: "Cell background & foreground coloring",
                styles: {},
              },
            ],
            children: [],
          },
          {
            id: "1d0adf08-1b42-421a-b9ea-b3125dcc96d9",
            type: "bulletListItem",
            props: {
              textColor: "default",
              backgroundColor: "default",
              textAlignment: "left",
            },
            content: [
              {
                type: "text",
                text: "Splitting & merging cells",
                styles: {},
              },
            ],
            children: [],
          },
          {
            id: "99991aa7-9d86-4d06-9073-b1a9c0329062",
            type: "bulletListItem",
            props: {
              textColor: "default",
              backgroundColor: "default",
              textAlignment: "left",
            },
            content: [
              {
                type: "text",
                text: "Header row & column",
                styles: {},
              },
            ],
            children: [],
          },
        ],
      },
      {
        id: "c7bf2a7c-8972-44f1-acd8-cf60fa734068",
        type: "paragraph",
        props: {
          textColor: "default",
          backgroundColor: "default",
          textAlignment: "left",
        },
        content: [],
        children: [],
      },
    ],
  });
 
  // Renders the editor instance using a React component.
  return <BlockNoteView editor={editor}></BlockNoteView>;
}