Adding an HTML element to body

[c6p]

I try to use glide-data-grid with taipy. I have created a dynamic element, though the page is blank. Because, the grid depends on there being a root level "portal" div in your HTML.

How can I add a html div element to body?

[FlorianJacta]

Could you share the code you have written?

[c6p]

npm i @glideapps/glide-data-grid lodash marked react-responsive-carousel

Skipping data passing and CSS. Modifying Element.tsx from guiext-template does not render DataEditor.

import { useDynamicProperty } from "taipy-gui";
import * as React from "react";
import DataEditor, { DataEditorProps, GridCellKind, GridColumn, Item, GridCell } from "@glideapps/glide-data-grid";

const data = [
  {
    firstName: "John",
    lastName: "Doe"
  },
  {
    firstName: "Maria",
    lastName: "Garcia"
  },
  {
    firstName: "Nancy",
    lastName: "Jones"
  },
  {
    firstName: "James",
    lastName: "Smith"
  }
];

const columns: GridColumn[] = [
  { title: "First Name", width: 100 },
  { title: "Last Name", width: 100 }
];

function getData([col, row]: Item): GridCell {
  const person = data[row];

  if (col === 0) {
    return {
      kind: GridCellKind.Text,
      data: person.firstName,
      allowOverlay: false,
      displayData: person.firstName
    };
  } else if (col === 1) {
    return {
      kind: GridCellKind.Text,
      data: person.lastName,
      allowOverlay: false,
      displayData: person.lastName
    };
  } else {
    throw new Error();
  }
}

interface ElementProps {
  text?: string;
}

export default function Element({ text }: ElementProps) {
  const textProperty = useDynamicProperty(text, "<empty>", "");

  if (!textProperty) {
    return <span />
  }
  return (
    <>
      <span>
        {textProperty.split("").reverse().join("")}
      </span>
      <DataEditor columns={columns} getCellContent={getData} rows={data.length} />
    </>
  );
}

[FredLL-Avaiga]

I read that you need to import the css ...
import "@glideapps/glide-data-grid/dist/index.css";

the root div is the base of the rendered react app and shouldn't be an issue

Could the issue be linked to the !textProperty test ?

[c6p]

It seems the issue was related to peer dependencies of glide-data-grid, and not related to taipy at all. Re-installing with --legacy-peer-deps resolved the issue.

Thanks