title: How to refresh Material-Table (Material-ui) component in ReactJS when data changes
body: <p>I am using material-table in my ReactJS project, and I checked it documentation and I don't have a clue how to refresh the table when the data is continuously changing (like every 500ms or so). I appreciate any information. </p>
  
  <p>The below code is of the data table that I am trying to use. After creating the data table as below, I want to update the values of the elements in rows from incoming UDP messages in a periodical manner. I will be receiving new values in a UDP message in 500 ms periods and I have to update the values.</p>
  
  <pre><code>import React from 'react';
  import { forwardRef } from 'react';
  import MaterialTable from 'material-table';
  
  import AddBox from '@material-ui/icons/AddBox';
  import ArrowDownward from '@material-ui/icons/ArrowDownward';
  import Check from '@material-ui/icons/Check';
  import ChevronLeft from '@material-ui/icons/ChevronLeft';
  import ChevronRight from '@material-ui/icons/ChevronRight';
  import Clear from '@material-ui/icons/Clear';
  import DeleteOutline from '@material-ui/icons/DeleteOutline';
  import Edit from '@material-ui/icons/Edit';
  import FilterList from '@material-ui/icons/FilterList';
  import FirstPage from '@material-ui/icons/FirstPage';
  import LastPage from '@material-ui/icons/LastPage';
  import Remove from '@material-ui/icons/Remove';
  import SaveAlt from '@material-ui/icons/SaveAlt';
  import Search from '@material-ui/icons/Search';
  import ViewColumn from '@material-ui/icons/ViewColumn';
  
  const tableIcons = {
      Add: forwardRef((props, ref) =&gt; &lt;AddBox {...props} ref={ref} /&gt;),
      Check: forwardRef((props, ref) =&gt; &lt;Check {...props} ref={ref} /&gt;),
      Clear: forwardRef((props, ref) =&gt; &lt;Clear {...props} ref={ref} /&gt;),
      Delete: forwardRef((props, ref) =&gt; &lt;DeleteOutline {...props} ref={ref} /&gt;),
      DetailPanel: forwardRef((props, ref) =&gt; &lt;ChevronRight {...props} ref={ref} /&gt;),
      Edit: forwardRef((props, ref) =&gt; &lt;Edit {...props} ref={ref} /&gt;),
      Export: forwardRef((props, ref) =&gt; &lt;SaveAlt {...props} ref={ref} /&gt;),
      Filter: forwardRef((props, ref) =&gt; &lt;FilterList {...props} ref={ref} /&gt;),
      FirstPage: forwardRef((props, ref) =&gt; &lt;FirstPage {...props} ref={ref} /&gt;),
      LastPage: forwardRef((props, ref) =&gt; &lt;LastPage {...props} ref={ref} /&gt;),
      NextPage: forwardRef((props, ref) =&gt; &lt;ChevronRight {...props} ref={ref} /&gt;),
      PreviousPage: forwardRef((props, ref) =&gt; &lt;ChevronLeft {...props} ref={ref} /&gt;),
      ResetSearch: forwardRef((props, ref) =&gt; &lt;Clear {...props} ref={ref} /&gt;),
      Search: forwardRef((props, ref) =&gt; &lt;Search {...props} ref={ref} /&gt;),
      SortArrow: forwardRef((props, ref) =&gt; &lt;ArrowDownward {...props} ref={ref} /&gt;),
      ThirdStateCheck: forwardRef((props, ref) =&gt; &lt;Remove {...props} ref={ref} /&gt;),
      ViewColumn: forwardRef((props, ref) =&gt; &lt;ViewColumn {...props} ref={ref} /&gt;)
    };
  
  
  export default function ElementsTable() {
    const [state, setState] = React.useState({
      columns: [
        { title: 'Element Name', field: 'elmName' },
        { title: 'Value', field: 'elmVal' },
        { title: 'Direction', field: 'msgDirection',
          lookup: { 1: 'INCOMING', 2: 'OUTGOING' }
        },
        {
          title: 'Value Type',
          field: 'valType',
          lookup: { 1: 'Engineering', 2: 'Raw' },
        },
      ],
      data: [
        { elmName: 'Elem1', elmVal: 'STATUS_ON', msgDirection: 1, valType: 1 },
        { elmName: 'Elem2', elmVal: 'STATUS_OFF', msgDirection: 2, valType: 2 },
        { elmName: 'Elem2', elmVal: 'STATUS_ON', msgDirection: 1, valType: 1 },
      ],
    });
  
    return (
      &lt;MaterialTable
        title="Element List"
        icons={tableIcons}
        columns={state.columns}
        data={state.data}
        editable={{
          onRowAdd: newData =&gt;
            new Promise(resolve =&gt; {
              setTimeout(() =&gt; {
                resolve();
                setState(prevState =&gt; {
                  const data = [...prevState.data];
                  data.push(newData);
                  return { ...prevState, data };
                });
              }, 600);
            }),
          onRowUpdate: (newData, oldData) =&gt;
            new Promise(resolve =&gt; {
              setTimeout(() =&gt; {
                resolve();
                if (oldData) {
                  setState(prevState =&gt; {
                    const data = [...prevState.data];
                    data[data.indexOf(oldData)] = newData;
                    return { ...prevState, data };
                  });
                }
              }, 600);
            }),
          onRowDelete: oldData =&gt;
            new Promise(resolve =&gt; {
              setTimeout(() =&gt; {
                resolve();
                setState(prevState =&gt; {
                  const data = [...prevState.data];
                  data.splice(data.indexOf(oldData), 1);
                  return { ...prevState, data };
                });
              }, 600);
            }),
        }}
      /&gt;
    );
  }
  </code></pre>