title: passing real data into Material-UI Data Grid Rows
body: <p>I'm currently using the ASP .NET Core with React to build a web-based portal and would like to create a table using Material-UI Data Grid. Below is the example of Data Grid implementation where rows are assigned with hard-coded data. My question is that if it's possible to pass real data from sql database through controller into rows.
  <div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;DataGrid
    columns={[{ field: 'name' }]}
    rows={[
      { id: 1, name: 'React' },
      { id: 2, name: 'Material-UI' },
    ]}
  /&gt;</code></pre>
  </div>
  </div>
  </p>
  <p>This is the Account component to generate a table which is made by standard table from React. Here I successfully retrieve the real data through accountsController and it can be reached through this.State.accounts.
  <div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>import React, { Component } from 'react';
  
  export class Account extends Component {
      static displayName = Account.name;
  
      constructor(props) {
          super(props);
          this.state = { accounts: [], loading: true };
         
      }
  
      componentDidMount() {
          this.accountData();
      }
  
      static renderAccountsTable(accounts) {
          return (
              &lt;table className='table table-striped' aria-labelledby="tabelLabel"&gt;
                  &lt;thead&gt;
                      &lt;tr&gt;
                          &lt;th&gt;AccountsID&lt;/th&gt;
                          &lt;th&gt;Name&lt;/th&gt;
                      &lt;/tr&gt;
                  &lt;/thead&gt;
                  &lt;tbody&gt;
                      {accounts.map(account =&gt;
                          &lt;tr key={account.accountsId}&gt;
                              &lt;td&gt;{account.accountsId}&lt;/td&gt;
                              &lt;td&gt;{account.name}&lt;/td&gt;
                          &lt;/tr&gt;
                      )}
                  &lt;/tbody&gt;
              &lt;/table&gt;
          );        
      }
  
      render() {
          let contents = this.state.loading
              ? &lt;p&gt;&lt;em&gt;Loading...&lt;/em&gt;&lt;/p&gt;
              : Account.renderAccountsTable(this.state.accounts);
  
          return (
              &lt;div&gt;
                  &lt;h1 id="tabelLabel" &gt;Account info&lt;/h1&gt;
                  &lt;p&gt;This component demostrates fetching data from sql server&lt;/p&gt;
                  {contents}
              &lt;/div&gt;
              );
      }
  
      async accountData() {
          const response = await fetch('Accounts');
          const data = await response.json();
          this.setState({ accounts: data, loading: false });
      }
  }</code></pre>
  </div>
  </div>
  </p>
  <p>Then I tried to pass data to rows. Below the controller class. Here I select only two columns in the table using anonymous type.</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>                    public IEnumerable&lt;Accounts&gt; Index()
      {
          var accounts = _context.Accounts.Select(x =&gt; new { x.AccountsId, x.Name });
          return (IEnumerable&lt;Accounts&gt;)accounts;
      }
              </code></pre>
  </div>
  </div>
  
  Then I tried to replace the renderAccountsTable with the following code .</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>static renderAccountsTable(accounts) {
    const columns = [
              { field: 'id', headerName: 'ID', width: 90 },
              {
                  field: 'name',
                  headerName: 'Name',
                  width: 150,
                  editable: false,
              }];
    const rows = accounts;
    return (
      &lt;div style={{ height: 400, width: '100%' }}&gt;
                      &lt;DataGrid
                          rows={rows}
                          columns={columns}
                          pageSize={5}
                          checkboxSelection
                          disableSelectionOnClick
                     /&gt;
                  &lt;/div&gt;
    );
   }</code></pre>
  </div>
  </div>
  </p>
  <p>It does not work. The browser shows a blank page. It seems that the data types don't match each other. Any idea how to fix it? Thanks in advance.</p>
  <p>Extra info: below the Accounts class</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>public partial class Accounts
      {
          public Guid AccountsId { get; set; }
          
          public string Name { get; set; }
          ...
      }</code></pre>
  </div>
  </div>
  </p>
  <p>And After seconds, the error message does appear in the browser:</p>
  <p>Unhandled Rejection (Error): Material-UI: The data grid component requires all rows to have a unique id property.
  A row was provided without id in the rows prop:</p>
  <p>I made a change. I changed <code>const rows = accounts;</code> to <code>const rows = accounts.map((obj, index) =&gt; ({ AccountsId: index, Name: obj.Name }));</code>. And added <code>getRowId={(r) =&gt; r.AccountsId}</code> inside <code>DataGrid</code>.
  The error disappears but the table does not show the Name data. See screenshot.<a href="https://i.stack.imgur.com/hHajY.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/hHajY.jpg" alt="enter image description here" /></a> And actually I want AccountsId columns could be filled out with real data instead of index count (from 0 to length)</p>