title: React-table: how to use getCellProps, getHeaderProps etc.?
body: <p>The documentation of React Table is really sparse and I can't make sense of the examples.</p>
  <p>For example here: <a href="https://react-table.tanstack.com/docs/examples/data-driven-classes-and-styles" rel="noreferrer">https://react-table.tanstack.com/docs/examples/data-driven-classes-and-styles</a>, we see this code:</p>
  <pre><code>{row.cells.map(cell =&gt; {
                  return (
                    &lt;td
                      // Return an array of prop objects and react-table will merge them appropriately
                      {...cell.getCellProps([
                        {
                          className: cell.column.className,
                          style: cell.column.style,
                        },
                        getColumnProps(cell.column),
                        getCellProps(cell),
                      ])}
                    &gt;
                      {cell.render('Cell')}
                    &lt;/td&gt;
  </code></pre>
  <p>It's not clear to me what's happening.</p>
  <p><code>GetCellProps</code> is called, and provided an array as argument. This array contains 1. an object with two properties, and 2. a call to <code>getColumnProps</code> (what does this do?), and then 3. another call to <code>getCellProps</code> but now with the cell as an argument.</p>
  <p>The result of this call is then operated on with the spread-operator (...).</p>
  <p>If anyone can help me understand all of this, much appreciated.</p>