Closed vegarringdal closed 1 year ago
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);
todo: update this when I release 5.0.0
see https://github.com/vegarringdal/simple-html/issues/54
GridWrapper
Need to import css before you useut
To use it add wrapper and darktheme helper
Darktheme
Simple gridinterface used in sample above