rendering slow if data is provided by web sockets which are polling every sec.

[bollarampavan]

i am feeding the mui data table with the data from web sockets( every sec 400 rows of data is being fed to table) and data table is performing very slow. not sure if it is because of column filters( filters will be calculated dynamically so this might be an issue i assume)

Below is the code i am using.

{stableSort(rowsData, getSorting(order,orderBy)) .slice() .map((row,index) => { return ( {cols.map((column,index) => {row[column.id]} )} ); }) }

[gabrielliwerant]

The table is not really set up at the moment to handle this kind of data polling, so I wouldn't use any polling without doing something like first checking for redundant data and filtering it out before adding it to the table, or increasing the polling interval. Is this new data every second? If so, you might also be better off by allowing data to collect first, running any necessary transformations, then adding to the table all at once after you have a large enough set to start with.

[bollarampavan]

this data may not be new every sec but definitely changes over time. let say if i have only changed data then i am not sure how i can append it to muidatatable without changing previous data. also if i feed data continuously i can use features like search, filters as well because every new data re renders the component and search box is getting reset on each render.

[gabrielliwerant]

If your data changes, then the components need to re-render to reflect the changes, which is just the way react works. There are issues currently with maintaining state, but you'd actually not want to maintain state to reflect real time changes, as the various table features would need to update to accommodate them (filters need to be aware of what the data is and would be obsolete the moment new data is added if they did not update again accordingly). I'm not sure real time use like you're attempting can work in this library without major changes, but if you have any ideas, I'm open to hearing them.

[bollarampavan]

i get it completely if this doesn't support real time as this table computes all filter values for each column of data which is definitely a time consuming process and again with real time data as well as re rendering of react, the table performance will sure shot run into turbulence. just to support real time my ideas would be

1. having an option to disable filters.
2. Not all real world projects require filters on each column so this way some computation can be avoided. These are just my opinion, pretty sure you would be knowing more. Thank you again for the discussion.

[gabrielliwerant]

Disabling certain various features at a deep level is not a bad idea at all, but the table is not architected to support that at the moment, and the changes necessary to do so would be major. Functionality like that is not likely to happen any time soon, but I appreciate you giving your thoughts.

[romelgomez]

Hi @gabrielliwerant, Please review this integration with Algolia

import { SearchBox } from 'react-instantsearch-dom';
import { SearchBox, connectHits } from 'react-instantsearch-dom';

const Hits = ({ object[] hits }) => {

  // columns and options logic here

  return (
    <React.Fragment>
      <MUIDataTable
        data={[...hits]}
        columns={columns}
        options={options}
      />
    </React.Fragment>
  );
};

// 2. Connect the component using the connector
const CustomHits = connectHits(Hits);

const View = () => {

  return (
    <SearchBox />
    <CustomHits />
  )
}

The previous example demo code, represents a simple search input box and the table. 

Every time that the user types some text, they trigger an http search to the Algolia API or to the cache in the browser that the library has, that interaction re-render the table, I experiment very low performance here, the view is blocked and even not represent the current typing after 1 second more or less.

Also for the columns that are filtered,  the values that are provided by the search engine add more lancency for the final render, because I wait for the data, to rebuild the custom filter with the data, If I try to pass an custom component that have they own state and subscription logic to the API the filters view doesn't even open, to work I have to pass the component with the data already available, and that mean that the data in the filters can’t be async.

So I need a strong argument in order to propose to the team the implementation of the search engine without the table. Please.

Thanks 

PD:

This is an example of React with Algolia

https://react-instantsearch.netlify.app/examples/e-commerce/search/