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

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:

• Use realistic data. Load at least your expected production volume, with your real column count and data types.
• Use a real API, or a realistic mock. Server-side checks need actual sort, filter and paging requests. A mock that behaves like your API is fine for a first pass.
• Test on target hardware. Check on the laptops and browsers your users have, not only on developer machines.
• Time-box it. One to two weeks per candidate grid is usually enough to work through all four sections.
• Record the tier. For every box you tick, note which license tier the feature needed.

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

• One or more columns can be locked on the left from configuration.
• Users can lock and unlock columns themselves from the column menu.
• Rows on the locked and scrolling sides stay aligned, including with variable row heights.
• Vertical scrolling stays in sync between the two sides, including with large datasets.
• Locking works together with grouping: group headers and summaries span both sides correctly.
• Locking works together with editing: users can tab from a locked cell into a scrolling cell.
• Keyboard navigation moves naturally across the locked boundary.
• Users’ locked columns are saved with the rest of their layout and restored next session.

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

• Misaligned rows after wrapping text or loading new data. Test with long values in locked columns.
• Locking added late. In some grids, enabling locking changes the internal structure, which can affect custom renderers or plugins. Turn it on early in the proof of concept, not at the end.

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

• Row (left) and column (top) dimensions can be set from configuration.
• Users can rearrange dimensions and measures themselves, by drag and drop, without a developer.
• Common aggregations work: sum, count, average, min and max.
• Multiple measures can appear side by side, for example revenue and order count.
• Nested dimensions (region, then customer) expand and collapse, with subtotals at each level.
• Grand totals appear for rows and columns.
• The pivot result can be exported to Excel.
• Performance holds at your real data volume; for very large datasets, aggregation can run on the server.

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

• Browser-side aggregation at scale. Pivoting hundreds of thousands of rows in the browser can be slow. Decide early whether aggregation should run on the server.
• Exports that lose structure. Check that exported pivots keep their nested headers and totals, not just flat numbers.

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

• Export produces real XLSX files, not just CSV.
• CSV export is also available for system integrations.
• Numbers export as numbers and dates as dates, so they can be sorted and summed in Excel.
• Number and currency formats carry over into Excel.
• Grouping and summary rows are included when the grid is grouped.
• Export respects the current view: active filters, sort order and hidden columns.
• Specific columns, such as action buttons, can be excluded from export.
• The file name and a title row can be set.
• Exports of your largest realistic dataset complete without freezing the browser, or are handed to the server.

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

• Exporting only the loaded page. With server-side paging, the browser only has the current page. For a full export, generate the file on the server from the same sort and filter parameters.
• Formatted text instead of values. An export that writes “$12,500.00” as text can’t be summed in Excel. Open the file and check.

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

• Sorting is sent to the server, including multi-column sorts.
• Filters are sent to the server as structured parameters, not just a search string.
• Paged mode works, with a correct total count and page navigation.
• Infinite scrolling works, loading blocks of rows as users scroll, with no blank gaps.
• Grouping works with server data, with the server sorting by the group field so groups don’t split across pages.
• A loading indicator appears during requests.
• Failed requests show a clear error and don’t leave the grid in a broken state.
• Rapid filter changes don’t flood the server with requests.
• Edits save to the server and roll back on failure.
• The server enforces permissions; the grid never relies on hiding data client-side.

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 }:

Pitfalls to watch for

• Summaries from one page. With paging, client-side summaries only cover the loaded rows. If users need true totals, return them from the API and show them separately.
• Export from one page. The same applies to export: generate full exports on the server.
• No error path. Test what users see when the API is slow or fails, not only when it works.

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:

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.