template-133.html

<h1 id="right-side-column-pinningfreezing">Right Side Column Pinning/Freezing</h1>
<p>When Grid contains controls or buttons on the right side you should freeze or pin these columns, as they should not be part of the scrollable content. To do this use the <code>rightPinned</code> property on the column configuration object.</p>
<h2 id="example">Example</h2>
<code-sandbox hash="7d63042b"><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 buttonFormatter = function(e) {
    var cell = e.cell;
    var btn = cell.getContent();
    if(!btn) {
        btn = document.createElement(&quot;button&quot;);
    }
    btn.textContent = e.data;
    cell.setContent(btn);
};

var fields = [&quot;companyName&quot;, &quot;market&quot;, &quot;CF_LAST&quot;, &quot;CF_NETCHNG&quot;, &quot;industry&quot;, &quot;id&quot;];
var records = DataGenerator.generateRecords(fields, { numRows: 10 });
var configObj = {
    columns: [
        {name: &quot;Company&quot;, field: fields[0], width: 250},
        {name: &quot;Market&quot;, field: fields[1], width: 100},
        {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], width: 300},
        {name: &quot;Op.1&quot;, field: fields[5], width: 60, rightPinned: true, binding: buttonFormatter, alignment: &quot;center&quot;},
        {name: &quot;Op.2&quot;, field: fields[5], width: 60, rightPinned: true, binding: buttonFormatter, alignment: &quot;center&quot;},
        {name: &quot;Op.3&quot;, field: fields[5], width: 60, rightPinned: true, binding: buttonFormatter, alignment: &quot;center&quot;}
    ],
    staticDataRows: records
};

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