template-142.html

<h1 id="default-sort">Default Sort</h1>
<p>You can sort data in the grid automatically after initialization by specifying the <code>initialSort</code> option, which receives the following two options: <code>colIndex</code> and <code>sortOrder</code>.</p>
<p>The possible values of <code>sortOrder</code> are:</p>
<ul>
<li><em>a</em> for Ascending</li>
<li><em>d</em> for Descending</li>
<li><em>n</em> for Neutral</li>
</ul>
<p>You can see all possible values for the sort order <a href="#/apis/core/sortabletitleplugin#~SortOrder">here</a>.</p>
<pre><code class="language-js">var config = {
    // any other grid&#39;s options
    sorting: {
        sortableColumns: true,
        initialSort: {
            colIndex: 0,
            sortOrder: &quot;d&quot;
        }
    }
}
</code></pre>
<h2 id="example">Example</h2>
<code-sandbox hash="6f4d02b1"><pre><code class="language-css">efx-grid {
    height: 200px;
}
</code></pre>
<pre><code class="language-html">&lt;efx-grid id=&quot;grid&quot;&gt;&lt;/efx-grid&gt;
</code></pre>
<pre><code class="language-javascript">import { halo } from &#39;./theme-loader.js&#39;; // This line is only required for demo purpose. It is not relevant for your application.
await halo(); // This line is only required for demo purpose. It is not relevant for your application.

/* ---------------------------------- Note ----------------------------------
  DataGenerator, Formatters and extensions are exposed to global scope
  in the bundle file to make it easier to create live examples.
  Importing formatters and extensions is still required in your application. 
  Please see the document for further information.
---------------------------------------------------------------------------*/
var fields = [&quot;companyName&quot;, &quot;market&quot;, &quot;CF_LAST&quot;, &quot;CF_NETCHNG&quot;, &quot;industry&quot;];
var records = DataGenerator.generateRecords(fields, { numRows: 10 });
var configObj = {
    sorting: {
        sortableColumns: true,
        initialSort: {
            colIndex: 0, // Column index
            sortOrder: &quot;d&quot;
        }
    },
    columns: [
        {name: &quot;Company&quot;, field: fields[0]},
        {name: &quot;Market&quot;, field: fields[1], width: 120},
        {name: &quot;Last&quot;, field: fields[2], width: 100},
        {name: &quot;Net. Chng&quot;, field: fields[3], width: 100},
        {name: &quot;Industry&quot;, field: fields[4]}
    ],
    staticDataRows: records
};

var grid = document.getElementById(&quot;grid&quot;);
grid.config = configObj;
</code></pre>
</code-sandbox>