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

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

Choosing a React data grid enterprise involves more than checking whether it supports sorting and filtering. Enterprise applications need reliable behavior when several advanced features are used together.

A grid may handle column locking in isolation but misalign rows after grouping is enabled. An Excel export may work for a small dataset but become unusable when users need hundreds of thousands of records. Client-side pagination may look responsive while quietly preventing users from exporting the complete dataset.
This guide covers four features worth validating during a grid evaluation and shows how ReExt can provide these capabilities inside a React application.

1. **Column Locking: **Test More Than the Visual Result Column locking, also called freezing or pinning, keeps important columns visible while the remaining grid scrolls horizontally. Typical examples include order IDs, customer names, account numbers, and product identifiers.

Your checklist should include:
Locking columns through configuration.
Allowing users to lock or unlock columns.
Keeping row heights and vertical scrolling synchronized.
Supporting grouping, summaries, and editing with locked columns.
Preserving keyboard navigation across locked and unlocked columns.
Saving the user's layout when required.
ReExt Coding Style for Locked Columns
ReExt uses the Ext JS component configuration inside a React component. Set locked: true on columns that should remain visible, and enable column locking on the grid.
import ReExt from "@sencha/reext";

function OrdersGrid({ orders }) {
  return (
    <ReExt
      xtype="grid"
      style={{ height: 420 }}
      config={{
        enableLocking: true,
        store: {
          data: orders,
          groupField: "region"
        },
        features: [
          { ftype: "groupingsummary" }
        ],
        columns: [
          {
            text: "Order ID",
            dataIndex: "id",
            width: 100,
            locked: true
          },
          {
            text: "Customer",
            dataIndex: "customer",
            width: 180,
            locked: true
          },
          {
            text: "Region",
            dataIndex: "region",
            width: 120
          },
          {
            text: "Amount",
            dataIndex: "amount",
            width: 140,
            xtype: "numbercolumn",
            format: "$0,000",
            summaryType: "sum"
          }
        ]
      }}
    />
  );
}

export default OrdersGrid;
This example illustrates the grid configuration pattern. A working application also needs the appropriate ReExtProvider, Ext JS resources, and license. To persist user layouts between sessions, configure an Ext JS state provider as described in the documentation.

1. Pivoting: Let Users Explore Data Without Writing New Reports Pivoting transforms records into a multidimensional summary. For example, sales can be grouped by region and quarter, with revenue and order counts shown as separate measures. Evaluate whether the grid supports: Configurable row and column dimensions. Drag-and-drop field rearrangement. Sum, count, average, minimum, and maximum aggregations. Multiple measures. Nested dimensions and subtotals. Grand totals. Exporting the pivot result. Server-side aggregation for very large datasets. ReExt Coding Style for Pivoting ReExt exposes the Ext JS pivot grid through its component configuration. The following example illustrates the general structure: import ReExt from "@sencha/reext";

function SalesPivot({ sales }) {

return (
    <ReExt
      xtype="pivotgrid"
      style={{ height: 420 }}
      config={{
        store: {
          data: sales
        },
        plugins: [
          { ptype: "pivotconfigurator" },
          { ptype: "pivotexporter" }
        ],
        matrix: {
          leftAxis: [
            {
              dataIndex: "region",
              header: "Region"
            }
          ],
          topAxis: [
            {
              dataIndex: "quarter",
              header: "Quarter"
            }
          ],
          aggregate: [
            {
              dataIndex: "revenue",
              aggregator: "sum",
              header: "Revenue"
            },
            {
              dataIndex: "revenue",
              aggregator: "count",
              header: "Orders"
            }
          ]
        }
      }}
    />
  );
}

export default SalesPivot;
The pivot grid, configurator, and exporter require the appropriate Ext JS Enterprise setup and packages. Confirm the supported configuration for your installed version before using this example in production.
For datasets too large to aggregate efficiently in the browser, evaluate server-side pivot processing.

1. Excel and CSV Export: Validate the Contents of the File Export is often a business-critical workflow for finance, operations, auditing, and reporting teams. A successful export should do more than create a downloadable file. Test whether: XLSX and CSV output are available. Numbers remain numeric values. Dates remain dates with appropriate formatting. Grouping and summary rows are handled correctly. The export respects the intended filters and sorting. Hidden or action-only columns can be excluded. Large exports complete without freezing the browser. ReExt Coding Style for Export ReExt can expose the underlying Ext JS grid instance through its ready callback. You can keep a reference and call saveDocumentAs from a React button.

import { useRef } from "react";
import ReExt from "@sencha/reext";

export default function ExportableGrid({ orders }) {
  const gridRef = useRef(null);

  return (
    <>
      <ReExt
        xtype="grid"
        style={{ height: 420 }}
        ready={(cmp) => {
          gridRef.current = cmp;
        }}
        config={{
          store: {
            data: orders
          },
          plugins: [
            { ptype: "gridexporter" }
          ],
          columns: [
            {
              text: "Customer",
              dataIndex: "customer",
              flex: 1
            },
            {
              text: "Amount",
              dataIndex: "amount",
              xtype: "numbercolumn",
              format: "$0,000.00",
              exportStyle: {
                format: "Currency"
              }
            }
          ]
        }}
      />

      <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 CSV
      </button>
    </>
  );
}

This is an illustrative implementation. The exporter is an Enterprise feature, and the relevant package must be enabled. For server-paginated data, consider a backend export endpoint when users need all matching records rather than only the rows loaded in the browser.

1. Server-Side Data: Let the Backend Handle Large Datasets When the dataset becomes large, downloading every record to the browser is inefficient and may expose data users do not need. A server-side grid should send sorting, filtering, and pagination information to the API and receive only the required page or block of data.

Validate that:
Multi-column sorting reaches the backend.
Filters are passed as structured parameters.
The API returns the correct total record count.
Pagination and infinite scrolling behave correctly.
Loading and error states are visible.
Rapid filter changes don't generate excessive requests.
Edits are persisted and failures are handled.
Authorization is enforced by the server.
ReExt Coding Style for Remote Data
A store can use an AJAX proxy to request data from the backend. A simplified configuration looks like this:

const remoteStore = {
  pageSize: 100,
  remoteSort: true,
  remoteFilter: true,
  proxy: {
    type: "ajax",
    url: "/api/orders",
    reader: {
      type: "json",
      rootProperty: "data",
      totalProperty: "total"
    }
  },
  autoLoad: true
};

Use this store configuration inside the grid's config property. The API must implement the corresponding query parameters and return a response with the configured data array and total count.
For continuous scrolling through large datasets, evaluate Ext JS buffered stores. For very large exports, use the same filter and sort criteria on the server to generate the complete file.

1. Test the Four Features Together
   Individual feature demos are not enough. A production proof of concept should combine them.
   Load realistic server-side data.
   Lock key columns and group by a business field.
   Sort and filter records.
   Edit a value and navigate between locked and scrolling columns.
   Export the filtered results and verify the data types and totals.
   Test a pivot view and export it.
   Reload the application and verify the saved layout.
   Record the required license tier for every feature you test.

2. How ReExt Fits Into the Decision
   ReExt lets React applications use Ext JS components, including the enterprise grid. Under the applicable Ext JS plans, the grid provides features such as grouping, summaries, editing, locked columns, and server-side data handling. The pivot grid and data exporter are Enterprise features.
   This approach can be useful for teams that need a grid alongside forms, trees, charts, and other business UI components. It is also worth evaluating for existing Ext JS applications that are adopting React.
   Compare ReExt with alternatives such as AG Grid, MUI X Data Grid, KendoReact, Syncfusion, and TanStack Table using the exact feature tiers and implementation requirements for your project.

Conclusion

Column locking, pivoting, export, and server-side data are features that should be tested with realistic workloads, not just checked off a marketing page.
Evaluate each feature individually, test them together, and include licensing and long-term maintenance in your decision.
Further reading: Enterprise React Data Grid Checklist: Locking, Pivoting, Export and Server-Side Data