title: Resizing a responsive DataTable is very slow, how can I speed it up?
body: <p>I have a DataTable which has a couple of thousand records in it.</p>
  
  <p>I have the responsive plugin for it, and the responsive option is enabled.</p>
  
  <p>I also tried enabling the deferRender option, but this appeared to have no impact on the time taken.</p>
  
  <p>When I resize the browser there is a delay of 1s - 2s. This happens in IE11, and MS Edge. The performance in chrome isn't fantastic, but at 0.5s it's tolerable.</p>
  
  <p><a href="https://i.stack.imgur.com/U0opO.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/U0opO.png" alt="Profiler 1"></a></p>
  
  <p>I am using custom ordering functions, but those functions are omitted for brevity. I'm fairly sure I know where the issue is, and it's not in them. I can provide them if required.</p>
  
  <p>Here's my initialisation code:</p>
  
  <pre><code>this._dataTable = $("#listtable").DataTable({
      paging: true,
      responsive: true,
      deferRender: true,
      columns: [{
          title: "Name",
          data: "thing.name"
      }, {
          title: "State 1",
          data: "state1",
          type: "state1",
          render: (data, type, row, meta) =&gt; {
              return this._renderState1(data, meta);
          }
      }, {
          title: "State 2",
          data: "state2",
          type: "state2",
          render: (data, type, row, meta) =&gt; {
              return this._renderState2(data, meta);
          }
      }]
  });
  </code></pre>
  
  <p>I load the data by calling dataTable.row.add for each item, and then calling dataTable.draw at the end.</p>
  
  <p>The performance issues occur after all the data has been successfully loaded, so I don't think it's to do with that.</p>
  
  <p>Digging further in to the profiler information I found that it was the rendering of the rows that was the issue:</p>
  
  <p><a href="https://i.stack.imgur.com/1pvc9.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/1pvc9.png" alt="Profiler 2"></a></p>
  
  <p>By commenting out code in my custom render functions shown in the initalisation code, I found that the issue lay with finding the containing cell to set the background colour:</p>
  
  <pre><code>var cell = this._dataTable
      .cell({ row: meta.row, column: meta.col })
      .node();
  </code></pre>
  
  <p>Here's the rest of the code for setting the background colour:</p>
  
  <pre><code>var cellClass = this._getStateClass(state);
  $(cell).addClass(cellClass);
  </code></pre>
  
  <p>If I comment the cell retrieval line out then the performance isn't amazing, but it is acceptable.</p>
  
  <p><a href="https://i.stack.imgur.com/3JLo0.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/3JLo0.png" alt="Profiler 3"></a></p>
  
  <p>So my question is how can I have a custom background colour for cells while maintaing the responsive performance?</p>
  
  <p>A fast alternative to dataTable.cell would do, as would an alternative approach to setting the background colour.</p>