grid-js / gridjs

Advanced table plugin
https://gridjs.io
MIT License
4.39k stars 240 forks source link

Sort and pagination buttons don't work in Salesforce's LWC #247

Open sjurgis opened 4 years ago

sjurgis commented 4 years ago

Describe the bug Clicking on header or Next doesn't do anything. Enabling "Pause on caught exceptions" reveals:

TypeError: this.l[l.type] is not a function
At 

    function z(l) {
      this.l[l.type](n.event ? n.event(l) : l);
    }

To Reproduce You'll have to setup Salesforce environment which is quite a few steps:

  1. Go to developer.salesforce.com to open new account. You'll get a signup link in your email. Once you create a password
  2. Install sfdx which is Salesforce's CLI tool for interacting with their "orgs" aka environments.
  3. Clone this repo and run
    # opens a browser where you'll have to use credentials from step 1
    sfdx force:auth:web:login 
    # create another env
    sfdx force:org:create -s -f config/project-scratch-def.json
    # push repo content onto new env
    sfdx force:source:push
    # disable code minification salesforce does
    echo "update new User(Id = UserInfo.getUserId(), UserPreferencesUserDebugModePref=true);" | sfdx force:apex:execute
    # open gridjs component in browser
    sfdx force:org:open -p /lightning/cmp/c__testGridjs

If my steps were correct it should open page like this:

Screen Shot 2020-09-11 at 12 00 17 AM

Other info

I suspect this is due to LockerService which is Salesforce's security technology to prevent developers from shooting themselves in the foot (or using most libraries :D). Most often there's certain API that's disabled (see Locker API Viewer and Locker Console), trying to query DOM outside of your component namespace or trying extend some browser API. The main goal of locker service is to prevent third party components from accessing sibling components.

Note there's lwc-oss which does not require setting up remote environment, but bug there does not exist as the open source of lwc doesn't implement Locker Service.

afshinm commented 4 years ago

thanks @sjurgis. I'm not entirely sure if this is a Grid.js bug, but I'm happy to spend some time and debug. Is is possible to get a free trial of Salesforce's LWC (never used it before)?

sjurgis commented 4 years ago

Yes, step 1 will get you free trial of Salesforce, where LWC is just one of the frameworks they have. I don't think the trial ever expires.

The bug comes from a minified part of code, I assume it's going to be TS or Babel or whatever is in your build chain that adds that. Is it possible to get a build that doesn't have minified code at all?

afshinm commented 4 years ago

@sjurgis absolutely: https://unpkg.com/gridjs@1.17.0/dist/gridjs.development.js

sjurgis commented 4 years ago

@afshinm as I said, the exception traces to the part that's minified (starting ~40th line)

afshinm commented 4 years ago

Oh I see, I believe that's tslib minified code. thanks for clarifying, I will look into it.