Sencha.com

Enterprise React Data Grid Checklist: Locking, Pivoting, Export and Server-Side Data

Team Sencha

Four features decide most enterprise React data grid evaluations: column locking, pivoting, export and server-side data. They’re the features users ask for once an app is in real use, the ones vendors most often keep in paid tiers, and the ones that are hardest to build yourself.

They’re also the features most likely to break when combined. A grid can lock columns perfectly in a demo, then misalign rows once grouping and editing are switched on. Export can work on 500 rows and fail on 200,000. That’s why a feature list isn’t enough: you need to test each feature properly, and together.

This checklist gives you concrete pass/fail checks for each of the four features, the pitfalls to watch for, and working examples from ReExt, which brings the Ext JS grid into React. Use it during a proof of concept, and tick each box only when you’ve seen it work with your own data.

How to run this checklist

A checklist is only as good as the test behind it. Before you start:

1. Column locking

Locked (or frozen, or pinned) columns stay in view while the rest of the grid scrolls horizontally. In wide grids, such as financial statements, order books or audit logs, locking the ID and name columns is what keeps the data readable.

Checklist

In ReExt

Set locked: true on any column to lock it, and enableLocking: true on the grid to give users Lock and Unlock options in each column’s menu. Making the grid stateful saves the result:


    <ReExt
      xtype="grid"
      style={{ height: 480 }}
      config={{
        enableLocking: true,          // users can lock/unlock from the column menu
        stateful: true,               // save each user's layout, including locks
        stateId: 'orders-grid',
        store: { data: orders, groupField: 'region' },
        features: [{ ftype: 'groupingsummary' }],
        plugins: [{ ptype: 'cellediting', clicksToEdit: 1 }],
        columns: [
          { text: 'Order ID', dataIndex: 'id', width: 90, locked: true },
          { text: 'Customer', dataIndex: 'customer', width: 180, locked: true },
          { text: 'Region', dataIndex: 'region', width: 110 },
          { text: 'Amount', dataIndex: 'amount', width: 130, xtype: 'numbercolumn',
            format: '$0,000', summaryType: 'sum', editor: 'numberfield' },
          { text: 'Order date', dataIndex: 'orderDate', width: 130, xtype: 'datecolumn' },
          { text: 'Status', dataIndex: 'status', width: 110 },
          // ...more columns that scroll horizontally
        ],
      }}
    />

For stateful to persist across sessions, set a state provider once after Ext JS loads, for example Ext.state.Manager.setProvider(Ext.create(‘Ext.state.LocalStorageProvider’)).

Pitfalls to watch for

2. Pivoting

A pivot grid turns rows of records into a summary table: revenue by region down the side and quarter across the top, with totals in every direction. It lets analysts answer questions inside the app instead of exporting to Excel first.

Checklist

In ReExt

The pivot grid is its own React UI Component, configured with axes and aggregates. The configurator plugin gives users a drag-and-drop panel for rearranging fields, and the pivot exporter plugin adds Excel export. The pivot grid and exporter are part of the Enterprise plan, and their packages must be enabled in ReExtData.


    <ReExt
      xtype="pivotgrid"
      style={{ height: 480 }}
      config={{
        store: { data: sales },
        plugins: [
          { ptype: 'pivotconfigurator' },   // drag-and-drop field panel
          { ptype: 'pivotexporter' },       // export the pivot to Excel
        ],
        matrix: {
          leftAxis: [
            { dataIndex: 'region', header: 'Region' },
            { dataIndex: 'customer', header: 'Customer' },
          ],
          topAxis: [{ dataIndex: 'quarter', header: 'Quarter' }],
          aggregate: [
            { dataIndex: 'revenue', aggregator: 'sum', header: 'Revenue', align: 'right' },
            { dataIndex: 'revenue', aggregator: 'count', header: 'Orders', align: 'right' },
          ],
        },
      }}
    />

For datasets too large to aggregate in the browser, Ext JS also offers a remote matrix that sends the pivot definition to your server and renders the aggregated result.

Pitfalls to watch for

3. Export to Excel and CSV

Export is how grid data reaches finance, auditors and everyone who works in spreadsheets. The difference between a good and a poor export shows up in the file: are numbers still numbers, are dates still dates, and are the groups and totals users saw on screen still there?

Checklist

In ReExt

The grid exporter plugin adds a saveDocumentAs method that you can call from any React button, using the grid reference from the ready callback. Columns can set an Excel style with exportStyle, or be left out with ignoreExport. The exporter is part of the Enterprise plan.


    const gridRef = useRef(null);

    <ReExt
      xtype="grid"
      style={{ height: 480 }}
      ready={(cmp) => { gridRef.current = cmp; }}
      config={{
        store: { data: orders, groupField: 'region' },
        features: [{ ftype: 'groupingsummary' }],
        plugins: [{ ptype: 'gridexporter' }],
        columns: [
          { text: 'Customer', dataIndex: 'customer', flex: 1 },
          { text: 'Amount', dataIndex: 'amount', xtype: 'numbercolumn', format: '$0,000.00',
            summaryType: 'sum', exportStyle: { format: 'Currency' } },
          { text: 'Order date', dataIndex: 'orderDate', xtype: 'datecolumn', format: 'M j, Y',
            exportStyle: { format: 'Medium Date' } },
          { text: 'Notes', dataIndex: 'notes', ignoreExport: true },
        ],
      }}
    />

    <button onClick={() =>
      gridRef.current.saveDocumentAs({ type: 'excel07', title: 'Orders', fileName: 'orders.xlsx' })
    }>Export to Excel</button>

    <button onClick={() =>
      gridRef.current.saveDocumentAs({ type: 'csv', fileName: 'orders.csv' })
    }>Export to CSV</button>

Pitfalls to watch for

4. Server-side data

Once datasets reach hundreds of thousands of rows, or contain data users shouldn’t download in full, the server has to do the heavy lifting: sorting, filtering and paging, with the grid requesting only what’s on screen.

Checklist

In ReExt

Server-side behavior is configuration on the grid’s store. For paged data with grouping:


    store: {
      pageSize: 100,
      remoteSort: true,
      remoteFilter: true,
      groupField: 'region',
      proxy: {
        type: 'ajax',
        url: '/api/orders',
        reader: { type: 'json', rootProperty: 'data', totalProperty: 'total' },
      },
      autoLoad: true,
      listeners: {
        load: (store, records, successful, operation) => {
          if (!successful) showError(operation.getError());
        },
      },
    },
    bbar: { xtype: 'pagingtoolbar', displayInfo: true },

For infinite scrolling through very large datasets, use a buffered store, which loads pages on demand as users scroll:


    store: {
      type: 'buffered',
      pageSize: 200,
      leadingBufferZone: 600,
      proxy: {
        type: 'ajax',
        url: '/api/orders',
        reader: { type: 'json', rootProperty: 'data', totalProperty: 'total' },
      },
      autoLoad: true,
    },

Your API needs to accept these parameters and return { data: […], total: n }:

Parameter Example Meaning
start, limit start=200&limit=100 Which rows to return
sort [{“property”:”amount”,”direction”:”DESC”}] Sort order, one entry per column
filter [{“property”:”region”,”value”:”EMEA”}] Filters, one entry per column
group {“property”:”region”,”direction”:”ASC”} Group field; sort by it first

Pitfalls to watch for

The combined test: all four features together

Each feature can pass on its own and still fail in combination. Before deciding, run one realistic scenario that uses all four at once:

  1. Load a server-side grid with your production data volume.
  2. Lock the ID and name columns, and group by a business field such as region.
  3. Sort by one column and filter by two others; confirm the requests reach the server.
  4. Edit a value in a scrolling column, then tab back into a locked column.
  5. Export the current view to Excel and open the file: check formats, groups, filters and totals.
  6. Open a pivot view of the same data and export it.
  7. Reload the page and confirm the user’s locked columns and layout are restored.

If a grid passes this sequence on your data, it’s very likely ready for production.

Which tier includes each feature

The four features in this checklist are the ones vendors most often reserve for paid tiers. As of October 2026:

Feature AG Grid MUI X Data Grid KendoReact Grid ReExt
Column locking or pinning Free Pro Check tier Pro
Pivoting Enterprise Premium Separate component; check tier Enterprise
Excel export Enterprise Premium Premium Enterprise
Server-side data Free (basic); Enterprise (server-side row model) Check tier Check tier Pro

ReExt is included in the Ext JS Pro and Enterprise plans, alongside the rest of the Ext JS component library. For the full feature-by-tier matrix across six grids, see Enterprise React Data Grid: The Features Enterprise Teams Need, and What Each Grid Includes.

Frequently asked questions

What should an enterprise React data grid checklist include?

At minimum: column locking, pivoting, Excel and CSV export, and server-side data, each tested with your real data and in combination. Add grouping, editing, accessibility and the license tier each feature requires.

How do I lock columns in a React data grid?

Most enterprise grids let you mark columns as locked or pinned in their configuration. In ReExt, set locked: true on a column, and enableLocking: true on the grid to let users lock columns from the column menu.

Can a React data grid export to Excel with formatting?

Yes, in grids with native Excel export. Check that numbers and dates export as real values with formats, and that groups and totals are kept. In ReExt, the grid exporter writes XLSX files with column styles; it’s part of the Enterprise plan.

How do I handle millions of rows in a React data grid?

Use server-side data: let the server sort, filter and page, and have the grid request only visible rows through paging or infinite scrolling. In ReExt, a buffered store loads pages on demand as users scroll.

Does ReExt include pivoting?

Yes. The Ext JS pivot grid, with a drag-and-drop configurator and Excel export, is available in ReExt with the Enterprise plan.

Tick the boxes with your own data

Locking, pivoting, export and server-side data are where enterprise React data grids prove themselves, or fall short. Work through each checklist with production-sized data, run the combined test, and record which tier every feature needed. The result will tell you more than any feature page.

ReExt brings all four to React through the Ext JS grid: locking and server-side data in the Pro plan, pivoting and export in Enterprise, plus 140+ components for everything around the grid.

Run the checklist on ReExt: start a 30-day trial, follow the Ext JS grid in React tutorial, or compare grids in How to Choose a React Grid Component: 12 Features Enterprise Apps Need.

Sencha CTA Banner: Try Sencha ReExt

Exit mobile version