revolist / react-datagrid Goto Github PK

Hi, I am trying to embed an SPFx People picker as a cell and have created this adapter:

    private peoplePickerAdapter(parent, props) {
        let wrapper;
        if (parent.childNodes.length) {
          wrapper = parent.childNodes[0];
          ReactDOM.unmountComponentAtNode(wrapper);
        } else {
          wrapper = document.createElement("span");
          parent.appendChild(wrapper);
        }
        ReactDOM.render(
        <PeoplePicker 
            context={this.props.context}
            groupName={""}
            showtooltip={false}
            personSelectionLimit={1}
            defaultSelectedUsers={[this.state.picsList[0]]}
            onChange={(items: any[]) => {
                if (items.length != 0) {
                props.model.PICFound.User = items[0];
                } else {
                props.model.PICFound.User = null;
                }
            }}
            principalTypes={[PrincipalType.User]} />
        // <button className='btn btn-primary' style={ {width: "225px"} } type='button' id='btnChangeView' onClick={ async () => { await this.setState( {peopleModalOpen: !this.state.peopleModalOpen} )} } >
        //     {props.model.PICFound.User ? props.model.PICFound.User.Title : "Select PIC"}
        // </button>
        , wrapper);
    }

However, this displays the component but when trying to type in the component it types within the cell. This will not work as the people picker relies on the input of the component to search the users. Is there a way to have the cell level typing turned off and the inputs sent to the component instead of the cell?

The strange thing is that the people picker just doesn't seem to show any sort of data when embeded in the cell.

this is the specific component I'd like to have the functionality of:
https://pnp.github.io/sp-dev-fx-controls-react/controls/PeoplePicker/

I believe an editor is the way however there is not much documentation on the usage of this. Or I am just not experienced enough to implement with the information given. Does anyone know how this could be achieved?

Sandbox with the sample code: https://codesandbox.io/s/vite-react-ts-forked-4xz68w

As per the CustomElement doc I have added @stencil/core and changed '@revolist/revogrid/loader' to '@revolist/revogrid/custom-element'

The same example when used with webpack works.

Hi, is there a straightforward way to use React components as cellTemplates?

or are we limited to vanilla html elements / web-components as in the docs?:
https://revolist.github.io/revogrid/guide/cell.renderer.html

I was able to work around this by doing the following:

  class TestElem extends HTMLElement {
    connectedCallback() {
      const mountPoint = document.createElement('span')
      this.attachShadow({ mode: 'open' }).appendChild(mountPoint)
      const value = this.childNodes[0].data
      ReactDOM.render(<SomeComponent value={value}/>, mountPoint)
    }
  }

  customElements.define('test-elem', TestElem)

and if I need access to a redux store, ContextAPI, or other it is possible to create something like this:

const registerComponent = (store) => {
  class TestElem extends HTMLElement {
    connectedCallback() {
      const mountPoint = document.createElement('span')
      this.attachShadow({ mode: 'open' }).appendChild(mountPoint)
      const value = this.childNodes[0].data
      ReactDOM.render(
        <Provider store={store}>
          <SomeComponent value={value}/>
        </Provider>,
        mountPoint,
      )
    }
  }
  customElements.define('test-elem', TestElem)
}

// and when the store is created:
...
registerComponent(store)
...

however, this is not ergonomic at all 😕

do you have plans to facilitate the implementation of react components as cell/header templates?

I think something like this could be a good way to do it, where the web-component definition would be abstracted from the user:

  <RevoGrid
    columns={columns}
    source={data}
    customComponents={{
        'test-elem': TestElem,
        'my-header': MyHeader
    }}
    componentWrappers={
        [StoreWrapper, SomeContext.Provider, etc]
    }
  />

what do you think?

vite console Unrestricted file system access to "/node_modules/.vite/revo-grid_11.entry.js"

Attempting to unsort a column (third click) throws a RangeError on [email protected]:

Uncaught (in promise) RangeError: Invalid array length

Click the "First" column three times in this sandbox to see the error.

Symptom

When trying to import @revolist/revogrid-react, I ran into the following error.

Cannot find module '@revolist/revogrid-react' or its corresponding type declarations.

As far as I investigated, it seems this package doesn't publish dist directory.

// package.json
{
  ...
  "main": "./dist/revogrid.js",
  "module": "./dist/revogrid.js",
  "types": "./dist/revogrid.d.ts",
  ...
}

Expected behavior

This package should publish dist directory.

Could you take care of it, please?

I want to use revoGrid in JSX.Component and Vite to build something,

it had got a 404 error, like this:

I think because Vite had rewrite defineCustomElements' import url path ...

Can help me to fix it?

Hi,

Events are not fired with the latest version, here is a Codesanbox example:

https://codesandbox.io/s/laughing-dan-hu4yly?file=/src/App.js

Hi, RevoGrid looks cool, and I'm looking to experiment with it.

However, just copying your example from the docs: https://revolist.github.io/revogrid.demo.js/?path=/docs/docs-frameworks-react--page

doesn't yield any result: https://codesandbox.io/s/muddy-dawn-jn9vp?file=/src/Grid.js

It should be clear that we need to execute defineCustomElements for the component to work:

import { defineCustomElements } from '@revolist/revogrid/loader';
defineCustomElements(); // let browser know new component registered