react-virtualized , where to call forceUpdateGrid to update table data?

Question

On sorting table data, I can't seem to call forceUpdateGrid to update table data as mentioned in the original docs

I am getting this error

'forceUpdateGrid' is not defined

I need to update table data when user clicks table header, currently it is updating after page scroll. I have 3 columns in table which I need to sort and update table by each column header

import React from 'react';
import { Column, Table, SortDirection, SortIndicator } from 'react-virtualized';
import AutoSizer from 'react-virtualized/dist/commonjs/AutoSizer';
import _ from 'underscore';
import 'react-virtualized/styles.css';

import { fakeJson } from './Data/fakeJson';

const datalist  = fakeJson;
const list = datalist; 
class TableComponent2 extends React.Component {

  constructor(){
    super();
     this.state = {
       sortBy: 'username',
       sortDirection: SortDirection.DESC,
       sortedList: list
     }
   }

   sort({ sortBy, sortDirection }) {
     console.log(list)
    const tempList = _.sortBy(list, item => item[sortBy]);
    console.log(tempList);
    const sortedList = tempList.update(
        list =>
          sortDirection === SortDirection.DESC ? list.reverse() : list
      );

    this.setState({ sortBy, sortDirection, sortedList });
    this.forceUpdateGrid;
  }

    render() {
      return (
        <AutoSizer disableHeight>
          {({ width }) => (
            <Table
              headerHeight={20}
              height={740}
              rowCount={datalist.length}
              rowGetter={({ index }) => this.state.sortedList[index]}
              rowHeight={60}
              width={width}
              sort={this.sort}
              sortBy={this.state.sortBy}
              sortDirection={this.state.sortDirection}
            >
              <Column
                dataKey='id'
                width={200}
                flexGrow={1}
                label='ID'
              />
              <Column
                dataKey='name'
                width={200}
                flexGrow={1}
                label='NAME'
              />
              <Column
                dataKey='username'
                width={200}
                flexGrow={1}
                label='USERNAME'
              />
            </Table>
          )}
        </AutoSizer>
      );
    }
  }

  export default TableComponent2;

Welcome to StackOverflow! Please, [make sure you read this guide about how to ask a good question](https://stackoverflow.com/help/how-to-ask), and edit yours accordingly. Currently it is quite hard to help you without any specific code. — ForestG, Feb 01 '19 at 08:24

Shubham Khatri · Accepted Answer · 2019-02-01T09:37:31.753

forceUpdateGrid is a Public method exposed by Table component which you can use my defining a ref on the Table like this.tableRef.forceUpdateGrid

import React from 'react';
import { Column, Table, SortDirection, SortIndicator } from 'react-virtualized';
import AutoSizer from 'react-virtualized/dist/commonjs/AutoSizer';
import _ from 'underscore';
import 'react-virtualized/styles.css';

import { fakeJson } from './Data/fakeJson';

const datalist  = fakeJson;
const list = datalist; 
class TableComponent2 extends React.Component {

  constructor(){
    super();
     this.state = {
       sortBy: 'username',
       sortDirection: SortDirection.DESC,
       sortedList: list
     }
   }

   sort({ sortBy, sortDirection }) {
     console.log(list)
    const tempList = _.sortBy(list, item => item[sortBy]);
    console.log(tempList);
    const sortedList = tempList.update(
        list =>
          sortDirection === SortDirection.DESC ? list.reverse() : list
      );

    this.setState({ sortBy, sortDirection, sortedList });
    this.tableRef.forceUpdateGrid();
  }

    render() {
      return (
        <AutoSizer disableHeight>
          {({ width }) => (
            <Table
              ref={(ref) => this.tableRef = ref}
              headerHeight={20}
              height={740}
              rowCount={datalist.length}
              rowGetter={({ index }) => this.state.sortedList[index]}
              rowHeight={60}
              width={width}
              sort={this.sort}
              sortBy={this.state.sortBy}
              sortDirection={this.state.sortDirection}
            >
              <Column
                dataKey='id'
                width={200}
                flexGrow={1}
                label='ID'
              />
              <Column
                dataKey='name'
                width={200}
                flexGrow={1}
                label='NAME'
              />
              <Column
                dataKey='username'
                width={200}
                flexGrow={1}
                label='USERNAME'
              />
            </Table>
          )}
        </AutoSizer>
      );
    }
  }

  export default TableComponent2;

on line `this.tableRef.forceUpdateGrid` the Error: `Expected an assignment or function call and instead saw an expression` What is missing — Engineer, Feb 01 '19 at 09:29
forceUpdateGrid is a method, you need to call it. Updated my answer — Shubham Khatri, Feb 01 '19 at 09:37

react-virtualized , where to call forceUpdateGrid to update table data?

1 Answers1