Actualmente estoy reescribiendo mi componente de cuadrícula de datos para nosotros Material UI, todos mis componentes hasta ahora son componentes de clase (debido al alcance del proyecto). Una cosa en la que estoy estancado es cómo hacer que DataGrid tenga la primera fila seleccionada de forma predeterminada. Ya tengo una forma de obtener el ID de fila y transmitirlo, pero no estoy seguro de cómo implementar esa función en mi proyecto. Estaba viendo esto como un ejemplo, pero es un componente funcional. https://material-ui-x.netlify.app/storybook/?path=/story/x-grid-tests-selection--api-pre-selected-rows&globals=measureEnabled:false

apiRef en DataGrid usa UseGridApiRef con selectRow() / selectRows() . El problema es que es un enlace funcional y no se puede usar directamente en una clase. ¿Cuál sería la mejor manera de implementar tal función en mi código actual? Encontré documentación muy mínima sobre este tema específico con la cuadrícula de datos de MUI.

 import React from 'react'; import {DataGrid} from "@mui/x-data-grid"; 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) => { 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 !== "default" ? this.props.rowHeight : 56; return ( <div style={{height: 200, width: '100%'}}> <DataGrid columns={this.props.displayColumns} rows={this.state.ownerDatabaseRows} onRowClick={this.rowSelectionData} hideFooter={this.props.hideFooter} headerHeight={headerHeight} rowHeight={rowHeight} /> </div> ); }; } export default UniversalDataGrid;

Puedo pasar fácilmente otra propiedad para que el ID de fila se seleccione de forma predeterminada, ya que hay un código que se ejecuta dondequiera que este componente se llame un nivel superior. Solo necesito una forma de usar apiRef y UseGridApiRef. Tengo muy poca experiencia con componentes funcionales, por lo que no estoy seguro de cómo proceder en este caso.