Column sorting feature breaks if the initial columns array doesn't have sort field

Relates to #1233

When using BootstrapTable, if you first initialize the columns array without sort property and later update it to a different columns array with sort property, sorting doesn’t work.

To Reproduce Steps to reproduce the behaviour:

1. Create a React component with BootstrapTable
2. Initialize the the properties as follows

   keyField='id',
   columns=[{
       dataField: 'id',
       text: 'ID Column'
   }]
   

3. And then update the properties: e.g.

   keyField='first',
   columns=[{
       dataField: 'first',
       text: 'First Column',
       sort: true
   },
   {
       dataField: 'second',
       text: 'Second Column',
       sort: true
   }]
   

4. Try sorting either of the columns and you will see the a console error

   header-cell.js:123 Uncaught TypeError: onSort is not a function
       at cellAttrs.onClick (header-cell.js:123)
       at HTMLUnknownElement.callCallback (react-dom.development.js:336)
       at Object.invokeGuardedCallbackDev (react-dom.development.js:385)
       at invokeGuardedCallback (react-dom.development.js:440)
       at invokeGuardedCallbackAndCatchFirstError (react-dom.development.js:454)
       at executeDispatch (react-dom.development.js:584)
       at executeDispatchesInOrder (react-dom.development.js:609)
       at executeDispatchesAndRelease (react-dom.development.js:713)
       at executeDispatchesAndReleaseTopLevel (react-dom.development.js:722)
       at forEachAccumulated (react-dom.development.js:694)
   

I suspect this happens due to the BootstrapTableContainer context initializing the SortContext state on the constructor rather than doing it on the render. I’m referring specifically to BootstrapTableContainer class constructor

constructor(props) {
    ...
    if (props.columns.filter(col => col.sort).length > 0) {
        this.SortContext = createSortContext(
          dataOperator, this.isRemoteSort, this.handleRemoteSortChange);
    }
    ...
}

Suggestion Since the SortContext is dependent on the columns array and the columns array property can be updated at any given time, I suggest we move the above sort context initialization to the render method.

[daweifeng]

@AllenFang Hi Allen! I am experiencing a similar issue. After digging into the code, I believe there is a problem with https://github.com/react-bootstrap-table/react-bootstrap-table2/blob/master/packages/react-bootstrap-table2/src/contexts/index.js#L87-L93 It is the first if condition in UNSAFE_componentWillReceiveProps.

Let’s say if the nextProps.columns.filter(col => col.sort).length > 0 is true and this.SortContext is not null, (nextProps.columns.filter(col => col.sort).length > 0 && !this.SortContext) will be false, which will cause this.SortContext set to null. In fact, this.SortContext should not be set to null because in the nextProps, we want our columns to be sorted. Setting this.SortContext will remove the sorting providers.

[seare-kidane]

https://react-bootstrap-table.github.io/react-bootstrap-table2/blog/2020/02/16/version-bump.html

try the newest version and let me know if the issue still remain, thanks!

@AllenFang Sorry for the late response, I now got a chance to verify the fix and I’m able to confirm sorting works after columns array update!

And @daweifeng thank you for quickly fixing submitting a fix!