use grid in react

[vegarringdal]

GridWrapper

Need to import css before you useut

import '@simple-html/grid/dist/grid.css';

To use it add wrapper and darktheme helper

render() {
return (
<ActivateGridDarkTheme enabled={state.darkTheme} />
<SimpleHtmlGrid
    interface={personInterface}
    style={{ height: "500px", width: "600px" }}
  />)
}

import { GridInterface } from "@simple-html/grid";

import React from "react";

export class SimpleHtmlGrid extends React.Component {
  myRef: any;
  declare props: any;
  constructor(props: any) {
    super(props);
    this.myRef = React.createRef();
  }

  shouldComponentUpdate() {
    // we dont want this to automatically update
    return true;
  }

  componentDidMount() {
    this.myRef.current.resizeInit = true; // just to override internals of grid, else we will get double the events
    this.myRef.current.interface = (this.props as any).interface;
    this.myRef.current.connectedCallback();
  }

  render() {
    return (
      //@ts-ignore
      <simple-html-grid
        ref={this.myRef}
        style={{
          width: this.props.style.width,
          height: this.props.style.height,
        }}
        class="simple-html-grid"
      />
    );
  }
}

Darktheme

import React from "react";

export class ActivateGridDarkTheme extends React.Component {
  constructor(props) {
    super(props);
    this.enabled = props.enabled;
    this.myRef = React.createRef();
  }

  shouldComponentUpdate(props) {
    console.log("componentDidUpdate", props.enabled);
    this.enabled = props.enabled ? true : false;
    return true;
  }

  componentDidMount() {
    this.componentDidUpdate();
  }

  componentDidUpdate() {
    if (!this.enabled) {
      let children = this.myRef.current.childNodes;
      while (children.length) {
        children[0]?.parentNode.removeChild(children[0]);
        children = this.myRef.current.childNodes;
      }
    } else {
      this.myRef.current.append(
        document.createTextNode(`
        body,
        .simple-html-grid-menu,
        .simple-html-grid {
            --simple-html-grid-main-bg-color: #374151;
            --simple-html-grid-sec-bg-color: #4b5563;
            --simple-html-grid-alt-bg-color: #4b5563;
            --simple-html-grid-main-bg-border: #1f2937;
            --simple-html-grid-sec-bg-border: #1f2937;
            --simple-html-grid-main-bg-selected: #234882;
            --simple-html-grid-main-font-color: #f9f7f7;
            --simple-html-grid-sec-font-color: #979494;
            --simple-html-grid-dropzone-color: #979494;
            --simple-html-grid-grouping-border: #1f2937;
            --simple-html-grid-boxshadow: #4b5563;
            --simple-html-grid-main-hr-border: #4b5563;
        }

        .simple-html-grid ul.dialog-row {
            box-shadow: none;
            border-top: 1px solid #3b3b3c;
        }
        .simple-html-grid li.dialog-row {
            border-color: #374151;
            border-left: 1px dotted rgb(100, 100, 100);
        }
        .simple-html-grid .grid-edit-button {
            border-color: #374151;
        }

        `)
      );
    }
  }

  render() {
    return <style ref={this.myRef}></style>;
  }
}

Simple gridinterface used in sample above

export const personInterface = new GridInterface<{ name: string }>({
    cellHeight: 20,
    panelHeight: 25,
    footerHeight: 40,
    readonly: true,
    selectionMode: "multiple",
    groups: [
      {
        width: 200,
        rows: [
          {
            header: "Name",
            attribute: "name",
            filterable: {},
          },
        ],
      },
    ],
  });

  personInterface.loadSettings(null);
  const data = [];
  for (let i = 0; i < 300; i++) {
    data.push({ name: "person" + i });
  }
  personInterface.getDatasource().setData(data);

[vegarringdal]

todo: update this when I release 5.0.0

[vegarringdal]

see https://github.com/vegarringdal/simple-html/issues/54