rowclick with ajax initial sort bug

[doraemonxxx]

rowclick event with ajax initial sorting

• bug: when setting up the options with ajax sorting + initial sort and row click will reload the table

Environment Details

• react-tabulator version: "react-tabulator": "^0.15.0"
• OS: windows 10

Long Description

• I have a tabulator with options of ajax sorting and I set the initial sort into by column name and direction as desc. I have also a row click event to set the state of my class constructor. e.g this.setState({ selectedRow: row._row.data });

sample code:

class InventoryItem extends React.Component {

constructor(props) { super(props); this.state = { data: [], selectedRow: '', }; this.rowClick = this.rowClick.bind(this); }

rowClick(e, row) { e.preventDefault(); // if tabulatr options has ajax/server sorting and initialSort and i have the setState. it will reload the table this.setState({ selectedRow: row._row.data }); };

render() {

const options = {
  height: 500,
  tooltips: true,
  layout: 'fitDataTable',
  placeholder: 'No records',
  // filtering
  ajaxFiltering: true, // tabulator version 5
  filterMode: 'remote', // tabulator version 4
  //sorting
  sortMode: 'remote', // not working even tabulator version is 5
  ajaxSorting: true, // working sort tabulator version 4

  // if rowlick event has setState and when i remove this, it wont reload the table
  initialSort: [
    { column: 'id', dir: 'desc' }, //sort by this first
  ],


  //pagination
  pagination: 'remote',
  paginationDataSent: {
    page: 'page',
    size: 'per_page', // change 'size' param to 'per_page'
  },
  paginationDataReceived: {
    last_page: 'total_pages',
    size: 'totalCount',
  },
  current_page: 0,
  paginationSize: 50,
  history: true,
  movableColumns: true,
  resizableRows: true,
  selectable: true,
  rowContextMenu: this.tableRowContextMenu,
  clipboard: 'copy',
  clipboardCopyRowRange: 'selected',
  printAsHtml: true,
  printStyled: true,
  printHeader: '<h1>Start</h1>',
  printFooter: '<h2>End</h2>',
  ajaxURL: `${constants.HOST_URL}/item/`,
  ajaxConfig: 'GET',
  ajaxContentType: {
    headers: {
      'Content-Type': 'application/json',
      'Access-Control-Allow-Origin': '*',
    },
  },
  ajaxRequesting: function (url, params, response) {
    if (params.sorters.length > 0) {
      params.orderBy = params.sorters[0]['field'];
      params.dir = params.sorters[0]['dir'];
    }
    // delete sorters params
    delete params.sorters
    // return params to call in ajax
    return params;
  },
  ajaxResponse: function (url, params, response) {
    if (response.success) {
      return response;
    } else {
    }
    // error callback here - from backend
  },
  ajaxError: function (error) {
    // ajax error here
    console.error('ajaxError', error);
    TrualliantLib.popupAlert(false, error.message, 3500);
  },

  return(
    <>

  <div className="custom-theme">
    <ReactTabulator
      columns={columns}
      data={[]}
      options={options}
      ref={ref => (this.ref = ref)}
      rowClick={this.rowClick}
      data-custom-attr="inventoryItem-custom-attribute"
      className="custom-css-class"
    />
  </div>
    </>
  );

};

}

Please help to fix. Thank you

[doraemonxxx]

UPDATE:

after some testing, found out that version 0.15.0 caused it. when I downgrade the version of react-tabulator to 0.14.5 the problems are fixed.

version 0.14.7 to higher is not compatible and has a bugs. especially the new version 0.16.1

Thanks

[doraemonxxx]

UPDATE:

using version 0.14.4 will have a bug also. the bug is the arrow direction and scroll will reset to initial state when clicking the row

thanks

[ivanmdh]

Init data as null

let data

data={data}

[doraemonxxx]

Hello @ivanmdh ,

Care to explain more and provide concrete or better solutions?

Btw, I'm not using state to set data for tabulator. Please disregard the data:[] in state because it is not use. I used tabulator ajax options instead.

Thanks!

[ivanmdh]

Hi

If you set [] in initial data, tabulator check details in the data that's pagination details, so you need set start data as null.

Tabulator as monitoring all states and redraw if detect any changes, so you need disable this functionality directly in library source.

Comment this lines:

if (!isSameArray(prevState.columns, this.state.columns)) { // only when data is really different: call this.table.setData (will re-render table) this.table && this.table.setColumns(this.state.columns); } if (!isSameObject(prevState.options, this.state.options)) { // console.log('options changed', this.state.options); this.initTabulator(); }

[ngduc]

the behavior was: when "options" prop change, it will rerender the table. I've just added "checkOptions" prop, if set to true, then it will do that, otherwise it will not rerender the table when "options" prop change - new version 0.16.6.

Please check and let me know. Create a CodeSandbox link if it still doesn't work. Thanks.