title: Material UI DataGrid set default selected row in a class?
body: <p>I'm currently rewriting my datagrid component to us Material UI, all of my components so far are class components (due to project scope).
  One thing that I am at a standstill on is how to have the DataGrid have the first row selected by default.
  I already have a way to get the ID Of row and pass it down, but I am unsure how to implement that function in my project.
  I was looking at this as an example, but it is a functional component. <a href="https://material-ui-x.netlify.app/storybook/?path=/story/x-grid-tests-selection--api-pre-selected-rows&amp;globals=measureEnabled:false" rel="nofollow noreferrer">https://material-ui-x.netlify.app/storybook/?path=/story/x-grid-tests-selection--api-pre-selected-rows&amp;globals=measureEnabled:false</a></p>
  <p>the <code>apiRef</code> in <code>DataGrid</code> uses <code>UseGridApiRef</code> with <code>selectRow()</code>/<code>selectRows()</code> . The problem is, that is a functional hook, and cannot be used in a class directly. What would be the best way for me to implement such a function in my current code? I found very minimal documentation on this specific topic with MUI's datagrid.</p>
  <pre><code>import React from 'react';
  import {DataGrid} from &quot;@mui/x-data-grid&quot;;
  
  class UniversalDataGrid extends React.Component {
      constructor(props) {
          super(props);
          this.state = {
              ownerDatabaseRows: [],
              ownerDatabaseColumns: this.props.displayColumns,
              selectionModel: [],
          };
  
      }
  
      componentDidMount() {
          if (this.props.sourceData !== 0) {
              let rowData = this.props.sourceData;
              this.setState({ownerDatabaseRows: rowData});
          }
      }
  
      rowSelectionData = (selectedRow) =&gt; {
          this.setState({selectionModel: selectedRow.row});
          this.props.onRowClick(selectedRow);         
      };
  
  
      render() {
          let headerHeight = this.props.headerHeight === 'default' ? 56 : this.props.headerHeight;
          let rowHeight = this.props.rowHeight !== &quot;default&quot; ? this.props.rowHeight : 56;
          return (
              &lt;div style={{height: 200, width: '100%'}}&gt;
                  &lt;DataGrid
                      columns={this.props.displayColumns}
                      rows={this.state.ownerDatabaseRows}
                      onRowClick={this.rowSelectionData}
                      hideFooter={this.props.hideFooter}
                      headerHeight={headerHeight}
                      rowHeight={rowHeight}
                  /&gt;
              &lt;/div&gt;
          );
      };
  
  
  }
  
  export default UniversalDataGrid;
  </code></pre>
  <p>I can easily pass another prop for the rowID to be selected by default, as there is code that runs wherever this component is called one level higher. I just need a way to use apiRef and UseGridApiRef.
  I've had very little experience with functional components, so I'm not sure how to proceed in this case.</p>